Theme index.css getting started!

Started by Maxx, October 21, 2014, 08:30:35 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Maxx

Lets see if we can get started!

Ok as mention before we will start with the index.css first you please the looks of the theme or template.
Pick the color scheme you like. keep in mind too much contrast in colors, will always look bad.

I found that keeping with various shades of the same basic color combinations, always looks best, pleasing to eyes. This can be done for practice by viewing various web sites and see what appeals to your minds eye!

The First thing you want to do is, grab a good free  color picker add on to you browser, I use FireFox, cause it usually has all I need.

the other must have add on is the Firebug (will come in to play soon)!

First in your index.css you'll find blose to the top the "body" tag!
take that and comment it out "/*" in the front of the body code and the "*/" and the end of the code..  always without the quotation marks! ..then save.
the original code is like this with it commented out!!

/* body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
} */


Now we add our own code that will look like this:

html, body {
color:#A4AFB3;
height: 100%;
-webkit-font-smoothing: antialiased;
}

body {
margin: 0 auto;
background: #090909 url ('../images/theme/bg-body.jpg') no-repeat top left;
font-size: 13px;
line-height: 18px;
/*--- below your need to place the over all font face for you theme--*/
font: "Verdana", "Arial", "Helvetica", sans-serif;
}


Now with your image place at the top left you'll need to use your color picker to grab the very bottom color of your bg image and place this "hex" code example #090909 like above so you image does not need to be the siz of your wrapper and will blend perfectly!

Next step soon, I'm rel busy so please hang in there! and play around with the above Code
But always remember to make back up copied for each day you work and finished for the day

ie: index.css21oct

regards,
Maxx