/*
custom.css sample file
======================
It is assumed that you are familiar with html and cascading stylesheets already. It is completely unreasonable for me to create a html and css tutorial here.
If you are not familiar with either, I highly recommend that you start by reading a tutorial. The ones on w3schools.org are quite accessible to beginners.
Before we go through examples, two points are worth a mention: how the theme works, and the document canvas.
Outline of Semiologic
---------------------
Cascading stylesheets are all too often misunderstood as stylesheets. Semiologic makes advanced use of the 'cascading' aspect of css.
The body tag has a few classes, and the bulk of the theme's features are managed from there. Let's go through a body tag:
- 'mse' stands for 'main, sidebar, external' and allows to define the layout
- 'narrow_mse' stands for 3 column, main, sidebar, external', and allows to define the widths
- 'narrow3' is obsolete and stands for '3 column narrow' and used to allow to define the widths
- 'bookman' refers to the 'bookman old style' font and defines the font scheme
- 'sky_gold' is a normalized version of the skin's directory; its purpose is to let you create cross-skin custom.css files
- 'skin' and 'custom' are generic classes that allow you to override context-sensitive defaults (see below)
Three css files are included:
- style.css (in the theme folder) defines a generic canvas and layout
- skin.css (in the skin folder) defines skin specific skinning
- custom.css (in the skin folder, when it exists) lets you override the two previous without needing to edit them
If you go through them, you'll notice things like:
.header h1
{
...
}
The above stands for "h1 in the context of the 'header' class". As a result:
this h1 tag is not affected
Note that the stronger the context, the stickier the css. To override styling that seems a bit sticky, it is sometimes useful to precede your css declaration with a .custom:
.header h1
{
this applies to h1 tags in the header
}
h1
{
this does not override what you just defined for the header
}
.custom h1
{
this overrides what you just defined for the header
}
Customizing the sell page template works much the same. Just use .sell instead of .custom.
You're 80% proficient with Semiologic customization once you've understood the above. Familiarity with the document canvas ensures full proficiency.
Blank Skin
----------
The blank skin's skin.css file highlights css identifiers and classes that are most frequently asked for during skin creation and tweaking tasks. You'll find it here:
wp-content/themes/semiologic/skins/blank/skin.css
Document canvas
---------------
Please open the sem-canvas.png file in the custom-samples folder before reading any further.
The hierarchical ids/classes defined by the canvas are the following:
ids classes notes
----------------------------------------------------------------
#ext_wrapper
#shadow_top empty div, not used
#shadow not used
#wrapper
#header .header
#tagline
h2
#sitename
h1
#navbar .navbar
#header_nav
#search_form
#body .body
#ext_main
#main .main
#sidebar .sidebar
#sidebar2 .sidebar
#footer .footer
#copyright_notice
#footer_nav
#ext_sidebar .sidebar
#shadow_bottom empty div, not used
#credits
The hierarchical classes and tags used by entries are the following:
class/tag notes
----------------------------------------------------------------
.entry
.entry_header
h2 date
h1 title
.entry_body
.entry_nav entry navigation
.entry_meta filed under...
.entry_tags
.entry_author
.entry_date used in article template only
.entry_actions permalink...
.action applied to each element
.link_entry
.print_entry
.email_entry
.entry_comments
.comment_entry
.admin_link
.entry_trackback_uri
.comments
h1 number of comments
.comment
.comment_header
h2 comment date
h3 comment author
.comment_body
.comment_actions permalink...
.comment_form
Sidebars use the same structure as most WordPress themes:
class/tag notes
----------------------------------------------------------------
ul
li
.widget
h2 widget title
ul
li
Other useful classes to know include:
class/tag notes
----------------------------------------------------------------
.inline_menu wrapper for inline nav menus
.gallery image gallery style
centered, with a 1px border
.sell wraps the entry in the sell page
template, for customizations
.marker fluorescent marker style
.order_form order form style for use in sell
pages
.testimonial, testimonial styles, for use
.testimonials, in sell pages
.side_testimonials
.ad ghost white ad style
.spacer use this class to clear:both; in
floating div layouts, i.e.:
.pad used to pad the content without
bugs in FF in the header, the
footer, the main content area and
each sidebar
Other classes and ids exist, e.g. #wp-calendar, .sem_subscribe_me. They are typically created by WordPress and/or the various plugins. They are not mentionned here because they have little or no importance when it comes to creating or customizing a skin.
Time for an example... Drop this file into the sky gold skin folder to see it transform the skin.
*/
/*
The font family
*/
.custom,
.custom h1,
.custom h2,
.custom h3,
.custom p,
.custom li,
.custom dt,
.custom dd,
.custom th,
.custom td,
.custom input,
.custom select,
.custom button,
.custom textarea
{
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.entry_header ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
.entry_header ul li {
margin-left: 0;
padding: 3px;
border-left:0px list-style: none;
display: inline;
}
.entry_header ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
/*
The font size
*/
.custom h1
{
color: #246ebc;
font-size: 1.25em;
}
.custom h2,
.custom #wp-calendar caption
{
color: #145EAC;
font-size: 1.20em;
font-style:normal;
font-weight:normal;
}
.custom h3,
.custom p,
.custom li,
.custom dt,
.custom dd,
.custom table,
.custom th,
.custom td,
.custom input,
.custom select,
.custom button,
.custom textarea,
.custom pre,
.custom code
{
/* Nothing here */
}
/*
The color and background colors
*/
body {
background: url(grad-grey.jpg) repeat-x top;
background-color: #646464;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.90em;
padding:0;
text-align:center;
margin:0 auto;
}
#ext_wrapper,
#wrapper,
#header,
#footer,
#body,
#main,
#sidebar,
#ext_sidebar
{
color: #000;
text-align:left;
}
.custom #ext_wrapper {
width: 970px;
}
.custom #main {
width: 647px;
float: left;
}
.custom #sidebar {
width: 280px;
float: right;
}
#header {
background-color: #e9e9e9;
}
.divClear { clear:both }
.divRight { float:right; }
.divLeft { float:left; }
.divCentre { text-align:center; margin: 0 auto; }
img.divLeft { margin-right: 8px; }
img.divRight { margin-left: 8px; }
/*
The navbar and calendar header colors
*/
#navbar,
#wp-calendar thead th
{
background-color: #14388C;
border-top: 1px solid #FFF;
border-bottom: 2px solid #CCC;
clear: both;
font-size: 0.90em;
list-style-type: none;
}
/*
The link styles
*/
a,
h1 a
{
color: #181863;
}
a:hover,
h1 a:hover
{
color: #246ebc;
text-decoration:underline;
}
/*
The navbar link styles
*/
.navbar a
{
color: #FFFFFF;
font-weight: bold;
text-decoration:none;
}
.navbar a:hover
{
color: #fff3ae;
text-decoration: underline;
}
/*
Center the navbar
*/
#header_nav
{
text-align: center;
float: none; /* NB: many areas are floating divs */
}
#search_form /* this hides the search form in all cases */
{
display: none;
}
/*
Header styles and colors
*/
#header div.pad
{
margin: 0px;
}
#sitename
{
text-align: center;
}
.header h1
{
margin: 0px;
padding: 2em 0px 1em 0px;
text-transform: uppercase;
}
.header h2
{
margin: 0px;
padding: .5em;
font-size: small;
text-transform: uppercase;
}
.header h1 a
{
color: #474E44;
}
.header h1 a:hover
{
color: firebrick;
}
.header h2
{
color: #A37B45;
}
/*
Body styles and colors
*/
.main h1
{
font-family:Trebuchet MS,helvetica,arial,sans-serif;
font-size:2.25em;
font-weight:normal;
letter-spacing:-2px;
line-height:1em;
margin:0;
padding:0 0 0.25em;
color: #0954A6;
border-bottom:1px solid #E6E6E6;
}
.main h1,
.main h1 a
{
}
.main h1 a:hover
{
}
.main h2
{
}
/*
Sidebar styles and colors
*/
.sidebar h2
{
border-bottom: none;
color: #5B7B57;
}
.sidebar ul ul
{
margin-left: .5em;
}
/*******/
#hdr {
background-color: #14388C;
background-repeat:no-repeat;
margin: 0 auto;
text-align:left;
width: 970px;
}
/**/
/*** MENU **/
/*************************/
UL.upper_menu {
font-size: 0.75em;
list-style-type:none;
margin: 8px 8px 8px 0;
padding:0;
text-align:center;
}
UL.upper_menu LI {
display:inline;
margin-left: 15px;
}
.menu_container {
background-color: #14388c;
clear: both;
padding: 5px 0;
}
UL.main_menu {
font-size: 0.90em;
list-style-type: none;
height: 20px;
margin: 0 auto;
padding: 0;
}
UL.main_menu LI {
border-right: 1px dotted #FFF;
float:left;
padding: 0 10px;
}
UL.main_menu LI.active A {
color: #93d6fb;
text-decoration: underline;
}
UL.upper_menu A, UL.main_menu A {
color: #FFFFFF;
font-weight: bold;
text-decoration:none;
}
UL.upper_menu A {
text-decoration:underline;
}
UL.upper_menu A:hover, UL.main_menu A:hover {
color: #fff3ae;
}
.small_text {
color: #999999;
font-size: 0.75em;
}
.footer {
clear:both;
color: #999999;
font-size: 0.75em;
margin-top: 45px;
}
.footer a {
color: #999;
}
.footer UL {
font-weight:bold;
list-style-type:none;
margin:0 auto;
text-align:center;
padding:0;
}
.footer UL LI {
border-right: 1px solid #448eDc;
display:inline;
padding: 0 6px;
}
.footer UL LI A {
color: #246ebc;
text-decoration:underline;
}
.footer UL LI A:hover {
color: #333;
}
DIV#ext_main {
border:1px solid #FFF;
background-color: white;
margin: 0 auto;
}