Until now we worked with default.css. Because the decisions about foreground colors were made there, the text colors appear as to assume. But there are more properties belonging to text content and the responsible file is basic.css:
0001 html, body {
0002 margin: 0px;
0003 padding: 0px;
0004 }
0005
0006 body {
0007 font-family : sans-serif;
0008 font-size : .8em;
0009 padding : 0px 0px 10px 0px;
0010 }
0011
0012
0013 /* ---------- Headers ----------- */
0014
0015 h1, h2, h3 {
0016 font-family: "Trebuchet MS", Verdana, serif;
0017 margin: 0;
0018 padding : 0;
0019 }
0020
0021 h1 {
0022 font-size : 1.2em;
0023 font-style : italic;
0024 }
0025
0026 h2 {
0027 font-size : 1.0em;
0028 }
0029
0030 h3 {
0031 font-size : .9em;
0032
0033 }
0034
0035
0036 /* ---------- Tags ---------- */
0037
0038 /* ----------- Compliant ------------ */
0039 code {
0040 border: 1px solid #C0C0C0;
0041 display: block;
0042 overflow:auto;
0043 background-color : white;
0044 height : 200px;
0045 white-space: pre;
0046 }
0047
0048 /* Uncommenting the below may break CSS compliancy but will
0049 improve the appearence of the <code> tag in different browsers.
0050 Your choice. Please experiment */
0051
0052 code {
0053 /* white-space: pre-wrap; */ /* css-3 */
0054 /* white-space: -moz-pre-wrap; */ /* Mozilla, since 1999 */
0055 /* white-space: -pre-wrap; */ /* Opera 4-6 */
0056 /* white-space: -o-pre-wrap; */ /* Opera 7 */
0057 /* word-wrap: break-word; */ /* Internet Explorer 5.5+ */
0058 }
0059
0060
0061 pre {
0062 font-size : 1.1em;
0063 }
0064
0065 strong {
0066 font-weight : bold;
0067 }
0068
0069 q {
0070 display : block;
0071 padding : 5px;
0072 font-size : 90%;
0073 }
0074
0075 ul {
0076 margin : 0px;
0077 padding : 0px;
0078 padding-left : 8px;
0079 }
0080
0081 p {
0082 margin : 2px;
0083 }
0084
0085 img {
0086 border-style : none;
0087 }
0088
0089 img.float-left {
0090 float : left;
0091 margin-right : 10px;
0092 display : inline;
0093 }
0094
0095 img.float-right {
0096 float : right;
0097 margin-left : 10px;
0098 display : inline;
0099 }
0100
0101
0102 blockquote {
0103 border-top : 1px solid #fff;
0104 border-bottom : 1px solid #fff;
0105 }
0106
0107 fieldset {
0108 margin : 10px;
0109 padding : 10px;
0110 }
0111
0112 legend {
0113 font-style : italic;
0114 font-size : 110%;
0115 }
0116
0117 /* ----------- Form styles ----------- */
0118
0119 form {
0120 margin : 0;
0121 padding : 0;
0122 }
0123
0124 input, textarea {
0125 font-family : inherit;
0126 font-size : 9pt;
0127 padding : 1px 2px;
0128 }
0129
0130 select[multiple="multiple"] {
0131 padding : 1px 2px 1px 2px;
0132 }
0133
0134 ul.no-bullet {
0135 list-style-type : none;
0136 }
0137
0138
0139 /* ------------- Table ------------- */
0140
0141 table {
0142 border-collapse : collapse;
0143 }
0144
0145 th {
0146 font-weight : bold;
0147 font-family : "Trebuchet MS", Verdana, serif;
0148 text-align : left;
0149 }
0150
0151 td {
0152 vertical-align : top;
0153 }
0154
0155 /* ---------- Classes ---------- */
0156
0157 fieldset.quote {
0158 border : 1px solid black;
0159 }
0160
0161 fieldset.quote legend {
0162 font-style : italic;
0163 font-weight : normal;
0164 font-size : inherit;
0165 }
0166
0167 .spoiler {
0168 background-color : black;
0169 color : black;
0170 }
0171
0172 .error {
0173 color : #cf2626;
0174 font-weight : bold;
0175 }
0176
0177
0178 table.form-table {
0179 margin : 4px;
0180 }
0181
0182 table.form-table td {
0183 padding : 4px;
0184 vertical-align : top;
0185 }
0186
0187 .form-table label {
0188 font-weight : bold;
0189 margin-right : 20px;
0190 color : black;
0191 }
0192
0193
0194 .top-label label {
0195 font-weight : bold;
0196 }
0197
0198
0199 .clear {
0200 clear : both;
0201 }
0202
0203 .padded {
0204 padding : .8em;
0205 }
0206
0207 .smaller, .smaller input, .smaller select {
0208 font-size : .8em;
0209 }
0210
0211 .larger {
0212 font-size : 1em;
0213 }
0214
0215 .align-center {
0216 text-align : center;
0217 }
0218
0219 .align-right {
0220 text-align : right;
0221 }
0222
0223 .align-left {
0224 text-align : left;
0225 }
0226
0227 /* ---------------- Box definitions -------------- */
0228
0229 .box {
0230 margin-bottom : 10px;
0231 }
0232
0233 .box-title, .box-content, .box-footer {
0234 padding : 8px;
0235
0236 }
0237
0238 .entry-summary, .webpage-content, .webpage-summary {
0239 /* prevents float overlap */
0240 overflow: hidden;
0241 }
0242
0243
0244 abbr {
0245 border : none;
0246 }
0247
0248
0249 div.webpage-image, div.entry-image{
0250 float : right;
0251 display : inline;
0252 margin : 0 0 10px 10px;
0253 }
0254
Line 6 shows the assigned font family sans-serif with a size of 0.8em to the body. This essential assignment is a base for all subordinated content and I prefer the basic size of 0.8em also and want to priorize the Arial font. The lines before:
body {
font-family : sans-serif;
font-size : .8em;
padding : 0px 0px 10px 0px;
}
and altered:
body {
font-family : Arial, sans-serif;
font-size : 0.8em;
padding : 0px 0px 10px 0px;
}
The view before ...
... and after ...
... really not a major change.
But some titles visible in a red shade are candidates to modify. In html logic, such titles are surrounded in h1, h2 ... tags, depending of the desired hirarchy. Let tell, pWS mainly use h1 to h3 to find up from line 15:
h1, h2, h3 {
font-family: "Trebuchet MS", Verdana, serif;
margin: 0;
padding : 0;
}
h1 {
font-size : 1.2em;
font-style : italic;
}
h2 {
font-size : 1.0em;
}
h3 {
font-size : .9em;
}
The changes are made with the fonts and the font sizes:
h1, h2, h3 {
font-family: Arial, sans-serif;
margin: 0;
padding : 0;
}
h1 {
font-size : 1.1em;
font-style : normal;
}
h2 {
font-size : 1em;
}
h3 {
font-size : .9em;
}
The idea, to change the foreground text color at this place, is wrong. We remember, background and foreground colors reside in default.css and we are just in basic.css, where the font assignments live. I will change that a bit later. Now, my wish is to have a non-proportional font for form fields and that here is the right place. Searching for something like input and textarea, those are to find at line 124:
input, textarea {
font-family : inherit;
font-size : 9pt;
padding : 1px 2px;
}
and I hurry to alter to
input, textarea {
font-family : monospace;
font-size : 9pt;
padding : 1px 2px;
}
And, it is the right time and place to investigate all used fonts. At line 145 is seen an assignment to th (table header) tags. Becomes equalized to body by removal.
th {
font-weight : bold;
font-family : "Trebuchet MS", Verdana, serif;
text-align : left;
}
changed to
th {
font-weight : normal;
text-align : left;
}
There is something more in basic.css, the paddings and margins (but not the borders!). Paddings are distances from the inner content to the border and margings are the extra space a box has surrounding the border.
As to see at th top of basic.css, body has no margins. But body has a bottom padding of 10px. Will keep that unchanged. (The notations are clockwise top,right,bottom,left). Searching for other paddings, some are found at line 124 for input and textarea form fields and, that looks essential, at line 228 and 232 for the box and box-title classes:
.box {
margin-bottom : 10px;
}
.box-title, .box-content, .box-footer {
padding : 8px;
}
I change the padding of 8px to 2px (the margin-bottom of 10px was not touched, because the distances between boxes makes sense).
The look before:
and after
To see is, every content now lives a bit cramped.
eZine
