Basic Page Customization

Set background Colors | Format Headings

One of the first things you can do to give your site a unique look is to begin changing the color scheme.  This visual guide show you haow to change the backgrounds and add some disctinctive borders around your content.   The changes all occur the custom.css file. The picture below show how to change each portion of the page.  Just add the following code to your custom.css file and then upload to your site.

Download basic header sample code

A note about color representation.  The color paramater can be set three different ways

1. Name the color >> color: red
2. Set Hex value >> color: #FF0000
3. Hex Shorthand >> color: #F00

Below is a sample of how the code actually looks in Custom.CSS to accomplish the above effects

Code Sample:

/* valid for page framework only */
.custom #page { background: #ffffcc; border: none; }
/* background   = inner line  |   change padding for thickness */
/* border solid = outer line | set border em to for  thickness */
.custom #container { margin-top: 2em; margin-bottom: 2em; padding: 1.0em;
background: maroon; border: 2em solid green; }
/* END valid for page framework only */

/*—:[ Default customizations for header color and background---*/
.custom #header #logo a, { color: red; text-decoration: none; }
.custom #header #logo a:visited { color: red; text-decoration: none; }
.custom #header #logo a:hover { color: green; }
/*---:[ end default ]:—*/

.custom #header {
border:none;
/* border: .2em solid yellow; */
padding-top:1.1em;
}
.custom #header #logo {
float:right;
font-style:italic;
}
.custom #header #tagline {
color:purple;
float:right;
font-size:1.0em;
font-style:italic;
margin: 0.7em 0 0 1em;

Current Release

• WordPress 7.2.1
• Thesis 1.4.3