Now we should decide a plan how to attac the current design. One idea is, to vary background and foreground colors first. The responsible CSS is "default.css". Regard, the name "default.css" is independent from the theme name: In our "myT" subdirectory we find the default.css. Have a look into:
0001 body {
0002 color: #000;
0003 background-color : #DFE3BA;
0004 }
0005
0006 /* ---------- Block colors ----------- */
0007
0008 #container, #header {
0009 background-color: #ADB583;
0010 color : black;
0011 }
0012
0013
0014 #sidepanel div.box {
0015 border : white 2px solid;
0016 }
0017
0018
0019 .toggle1 {
0020 background-color : #EDF4D1;
0021 color : black;
0022 }
0023
0024 .toggle2 {
0025 background-color : white;
0026 color : black;
0027 }
0028
0029
0030 .bgcolor1 {
0031 background-color : #DEE2BD;
0032 color : black;
0033 }
0034
0035 .bgcolor2 {
0036 background-color : #EDF4D1;
0037 color : black;
0038 }
0039
0040 .bgcolor3 {
0041 background-color : #ADB583;
0042 color : black;
0043 }
0044
0045
0046 q {
0047 background-color : #d6d7ca;
0048 color : black;
0049 }
0050
0051
0052 a:link, a:visited {
0053 text-decoration : none;
0054 background-color : inherit;
0055 color: #A03E19;
0056 }
0057
0058 a:hover, a:active {
0059 text-decoration : underline;
0060 background-color : inherit;
0061 color: #000;
0062 }
0063
0064
0065 h1, h2, h3 {
0066 background-color : inherit;
0067 color: #A03E19;
0068
0069 }
0070
0071 h1 a {
0072 text-decoration : none;
0073 }
0074
0075 h1 a:hover {
0076 background-color : inherit;
0077 color : #CB572D;
0078 }
0079
0080
0081 th {
0082 color: #A03E19;
0083 background-color : #EDF4D1;
0084 }
0085
0086
0087 .box {
0088 background-color : #ebedd1;
0089 color : black;
0090 }
0091
0092
0093 .box-title {
0094 background-color : #DEE2BD;
0095 color : black;
0096 }
0097
0098
0099 /* -------- Form color ---------- */
0100
0101 input, textarea {
0102 color: #000;
0103 background: #ADB583;
0104 border: #000 solid 1px;
0105 }
0106
0107 input:focus, textarea:focus {
0108 background-color : #EDEFDB;
0109 color : black;
0110 }
0111
0112 input[type="submit"] {
0113 color: #000;
0114 background: #ADB583;
0115 border: 1px #000 outset;
0116 cursor : default;
0117 cursor : pointer;
0118 }
0119
0120
0121
0122 /* ----------- Module ----------- */
0123 #top-menu {
0124 background-color : #DEE2BD;
0125 color : black;
0126 }
0127
0128 #top-menu a:hover{
0129 background-color : #ADB583;
0130 color : black;
0131 }
0132
0133 div.blog div.box {
0134 border : 2px white solid;
0135 }
0136
0137 div.blog div.read-more {
0138 border-top : 1px solid white;
0139 margin-top : 5px;
0140 }
0141
0142 div.category-links {
0143 padding : 4px;
0144 background-color : #EDF4D1;
0145 color : black;
0146 }
0147
0148 /*--------------- Control Panel ---------------*/
0149
0150 div.frame {
0151 background-color: #CBCEAC;
0152 color : black;
0153 border-color : #90996E;
0154 }
0155
0156 div.backgrd {
0157 border-color: #90996E;
0158 }
0159
0160 ul.tabmenu {
0161 line-height : 0px;
0162 margin-top : 10px;
0163 margin-bottom : 12px;
0164 }
0165
0166 ul.tabmenu li {
0167 border-color: #90996E;
0168 border-bottom : none;
0169 }
0170
0171 ul.tabmenu li.inactive {
0172 background-color : #DEDFBA;
0173 color : #49493D;
0174 }
0175
0176 ul.tabmenu li.active {
0177 background-color : #CBCEAC;
0178 color : #49493D;
0179 }
0180
0181 ul.tabmenu li.active a:visited {
0182 text-decoration: none;
0183 background-color : inherit;
0184 color: #49493D;
0185 }
0186
0187 ul.tabmenu li.inactive a:link {
0188 text-decoration: none;
0189 background-color : inherit;
0190 color: #49493D;
0191 }
0192
0193 ul.tabmenu li.inactive a:visited {
0194 text-decoration: none;
0195 background-color : inherit;
0196 color: #49493D;
0197 }
0198
0199 ul.tabmenu li.inactive a:hover {
0200 text-decoration: none;
0201 color: black;
0202 background-color : inherit;
0203 }
0204
0205 ul.tabmenu li.inactive:hover {
0206 background-color : #CBCEAC;
0207 color: black;
0208 }
0209
0210 /*--------------- End Control Panel ---------------*/
0211
0212 div.menu-link {
0213 border-top : white 2px solid;
0214 margin : 0;
0215 padding : 0;
0216 font-size : .9em;
0217 }
0218
0219 div.menu-link a {
0220 font-weight : bold;
0221 text-decoration : none;
0222 }
0223
0224 div.menu-link a:hover {
0225 text-decoration : underline;
0226 }
0227
0228 div.menu-link:hover {
0229 background-color : #ADB583;
0230 color : black;
0231 }
0232
0233 div.link-level-1 {
0234 padding : 5px;
0235 background-color : #CBCEAC;
0236 color : black;
0237 }
0238
0239 div.link-level-2 {
0240 padding : 5px;
0241 padding-left : 1em;
0242 background-color : #E2E5BF;
0243 color : black;
0244 }
0245
0246 div.link-level-3 {
0247 padding : 5px;
0248 padding-left : 2em;
0249 background-color : #F1F4CC;
0250 color : black;
0251 }
0252
0253 div.link-level-1:hover,
0254 div.link-level-2:hover,
0255 div.link-level-3:hover {
0256 background-color : inherit;
0257 color : black;
0258 }
0259
0260 div.current-link {
0261 background-color : #ADB583;
0262 color : black;
0263 }
0264
0265 div.category-menu-bar {
0266 background-color : #DEE2BD;
0267 color : black;
0268 }
0269
0270 div.panel-title {
0271 background-color : #DEE2BD;
0272 color : black;
0273 padding : 4px;
0274 margin-bottom : 10px;
0275 }
0276
0277 ul#navlist li a {
0278 background-color : #ADB583;
0279 color : black;
0280 }
0281
0282 div.category-info {
0283 margin-bottom : 10px;
0284 }
0285
0286 div.breadcrumb span.current-bc {
0287 font-size : 1.1em;
0288 font-weight : bold;
0289 }
0290
0291 /*---- Notes ---- */
0292
0293 .note-not-read {
0294 font-weight : bold;
0295 }
0296
0297
In the first lines are seen the assigned colors of the whole page, the body part. Let change from the green shade to a blue shade I like. We alter (lines 1 to 4) from
body {
color: #000;
background-color : #DFE3BA;
}
to
body {
color: #eee;
background-color : #446;
}
and now is seen (when refreshing your browsers view)
The body background is a blue shaded one. The foreground color just seems to have no effect. The new text color with #eee is a light gray. I prefer that light gray shade for the case a white (#fff) would be hidden in some white background sometimes seen in some areas. May be changed later to white if anything else is well styled.
What we now observe is only a smaller surrounding blue in the whole page. We may assume, there is something more instisting in any front layers.
Without to explore or to know what and how pWS refers for and with layout, the next alterations become an advanture. Only let tell, what makes sense to alter next.
eZine
