/*
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
- 'narrow3' stands for '3 column narrow' and allows 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
}
You're 80% proficient with Semiologic customization once you've understood the above. Familiarity with the document canvas ensures full proficiency.
Document canvas
---------------
The hierarchical ids/classes defined by the canvas are the following:
ids classes notes
----------------------------------------------------------------
#ext_wrapper
#shadow_top empty div
#shadow
#wrapper
#header .header
#tagline
h2
#sitename
h1
#navbar .navbar
#header_nav
#search_form
#body .body
#main .main
#sidebar .sidebar
#footer .footer
#copyright_notice
#footer_nav
#ext_sidebar .sidebar
#shadow_bottom empty div
#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 used to style ul / li lists as
inline lists
.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.
*/
/*
3-column widths
*/
#copyright_notice{font-size:10px; color:#fff;}
.entry_actions{font-size:11px;}/*////////////*entry links/*/
.entry_body
{
padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
background-color:#FFF;} /* post txt bg color*/
.entry{padding:20px;}
.entry_header{font-size:10px;/* posted/date txt color*/
color: #FF9900;
}
.wide3 #ext_wrapper,
.narrow3 #ext_wrapper
{
width: 950px;
border:1px #000 solid;/***************/
}
.wide3 #wrapper,
.narrow3 #wrapper
{
border-right:#FFFFFF thin solid;
width: 770px;
background-color:#FFD697;/***************/
}
.wide3 #main,
.narrow3 #main
{
width: 540px;
background-color:#fff;/******bodypage bg*********/
}
.wide3 #ext_sidebar,
.wide3 #sidebar,
.narrow3 #ext_sidebar,
.narrow3 #sidebar
{
width: 178px;
}
/* external side bar color*/
/*
2-column widths with internal sidebar
*/
.wide2s #ext_wrapper,
.narrow2s #ext_wrapper
{
width: 770px;
}
.wide2s #main,
.narrow2s #main
{
width: 540px;
}
.wide2s #sidebar,
.narrow2s #sidebar
{
width: 178px;
}
/*
2-column widths with external sidebar
*/
.wide2e #ext_wrapper,
.narrow2e #ext_wrapper
{
width: 950px;
}
.wide2e #wrapper,
.narrow2e #wrapper
{
width: 770px;
}
.wide2e #ext_sidebar,
.narrow2e #ext_sidebar
{
width: 178px;
}
/*
1-column widths
*/
.wide1 #ext_wrapper,
.narrow1 #ext_wrapper
{
width: 770px;
}
/*
The font family
*/
.custom,
.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, Helvetica, sans-serif;
font-size:12px;
line-height:19px;
color:#000;
}
/*
The font size
*/
.custom h1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
}
.custom h2,
.custom #wp-calendar caption
{
font-size:13px;
color:#333333;/***************/
}
.custom body,
.custom h3,
.custom table,
.custom th,
.custom select,
.custom button,
.custom li,
.custom dt,
.custom dd,
.custom pre,
.custom code
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000;
}
.custom input{color:#000;}
.custom p{color:#000;}
.custom textarea{color:#000;}
.custom td{color:#FFFFFF;}
/*
The color and background colors
*/
body{
background-color:#ccc;}
#body{
background-color:#fff;}/*rightside second category bg*/
/*#sidebar{
background-color:#ccc;
border-left:thin #666 solid;}*//*-------------------------------------------------------------------------------------*/
#ext_wrapper{
background-color:#fff}
#wrapper{
background-color:#FFFFFF;}
#ext_sidebar{
background-color:#ccc;}/*extented side bar bgcolor*/
#ext_sidebar p
{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
/*background-color:#00A2D7;*/
}
#sidebar a{ color:#5F5F5F;}
#sidebar a:hover{color:#FFFFFF;
background-color:#fff;
text-decoration:none;}
#ext_wrapper{
background-color:#333;
border:thin #666 solid;}/**********//****/
/*#wrapper{background-color:#00CC00;}*/
#main
{
padding-left:10px;
background-color:#fff;}
/*#sidebar{
background-color:#EEF4F9;}*/
#header
{
background-color:#999;
}
#footer
{
/*background-color:#702570;*/
background-image:url(menu_img.jpg);
}
#footer a{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
}
#footer a:hover{
color: #fff;
text-decoration: underline;
}
/*---------------------------------------------------------------
The rigth side bar
---------------------------------------------------------------*/
/* ex side bar*/
.wide3 #ext_sidebar,
.wide3 #ext_wrapper,
.narrow3 #ext_wrapper
{background-color: #331A00}/* ex side bar*/
#ext_sidebar a
{
text-decoration:underline;
color: #fff;
}
#ext_sidebar a:hover
{
color: #FFCC00;/*
background-color:#5A9CC9;*/
padding:0 0 0 2px;
text-decoration:none;}
#sidebar,
.widget_categories,
.widget_archives{
color:#00FF00;}
/*---------------------------------------------------------------
right sidebar heading background
---------------------------------------------------------------*/
.sidebar h2
{
background-color: #FFCC00;
border:1px #fff solid;
padding-left:5px;
color: #663300;
/*background-image:url(rightbar_bg.jpg);*/
}
/*----------------------------------------------------------headding---------------------------------*/
/*#credits{
border:1px #83B5D6 sold;
padding:10px;
width:932px;
height:25px;
color:#000000;
text-align:center;
background-color:#6BA6CE;
}
*/
/*---------------------------------------------------------------
The navbar and calendar header colors
---------------------------------------------------------------*/
#navbar
{
color:#FFFFFF;
/*background-color:#702570;*/
background-image:url(menu_img.jpg);
}
#wp-calendar thead th
{
color:#FFFFFF;
background-color:#702570;
}
/*
The link styles
*/
a,
h1 a
{
color: #FF6600;
}
a:hover,
h1 a:hover
{
color: #000;
}
/*---------------------------------------------------
The navbar link styles
---------------------------------------------------*/
a{
font-family:Arial, Helvetica, sans-serif;
text-decoration:underline;}
.navbar a
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
/*text-decoration: none;*/
}
.navbar a:hover
{
color: #FFCC00;
text-decoration: underline;
}
/*--------------------------------------------------
Center the navbar
---------------------------------------------------*/
#header_nav
{
text-align:right;
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;
padding: .0em 8px;
background-color:#FFD697;
}
#sitename
{
text-align: Left;
display:none;
}
#tagline{/*
display:none;*/
}
/* dont want jaison*/
.header h1
{
margin: 0px;
padding: 2em 0px 1em 0px;
text-transform: uppercase;
}
.header h2
{
margin: 0px;
padding: .5em;
font-size: small;
}
.header h1 a
{
color: #000000;
}
.header h1 a:hover
{
color: firebrick;
}
.header h2
{
display:none;
border-bottom:thin #FFA042 solid;
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
/* dont want jaison*/
/*
Body styles and colors
*/
/*--------------------------------------------------
Main Posted headings
---------------------------------------------------*/
.main h1
{
text-transform:capitalize;
font-size:17px;
}
.main h1,
.main h1 a
{
font-family: Arial, Helvetica, sans-serif;
color: #0060A7;
}
.main h1 a:hover
{
color: #FF9900;
}
.main h2
{
text-transform: uppercase;
color: #000;
border-bottom: none;
}
/*
Sidebar styles and colors
*/
.sidebar ul ul
{
margin-left: .1em;
}