/*
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 input,
.custom select,
.custom button
{
font-family: Arial, sans-serif;
}
/*
The font size
*/
.custom h1
{
font-size: 2.0;
}
.custom h2,
.custom #wp-calendar caption
{
font-size: 1.7;
font-transform: lowercase;
}
.custom h3,
{
font-size: 1.3;
}
body.custom,
.custom,
.custom p,
.custom li,
.custom dt,
.custom dd,
.custom table,
.custom th,
.custom td,
.custom input,
.custom select,
.custom button,
.custom pre,
.custom code,
.custom .entry_header h2,
.custom .spread_the_word h2,
.custom .comment_header h2
{
font-size: small;
}
/*
The color and background colors
*/
body,
#ext_wrapper
{
background: url(/wp/wp-content/uploads/image/background3.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
#ext_wrapper,
#footer,
#body,
#main,
#sidebar,
#ext_main,
{
color: black;
background-color: white;
}
#ext_sidebar
{
background-color: black;
color: white;
}
/*
The borders
*/
#wrapper,
#ext_sidebar
{
border: black solid 1px;
}
#navbar,
{
border-top: black solid 1px;
border-bottom: black solid 1px;
}
#sidebar,
{
border-left: black solid 1px;
}
#sidebar2,
{
border-left: black solid 1px;
}
/*
The navbar and calendar header colors
*/
#navbar,
{
background-color: black;
}
#wp-calendar thead th
{
background-color: white;
}
/*
The link styles
*/
a,
h1 a,
h2 a,
h3 a
{
color: #8B0000;
text-decoration: none;
border-bottom: dotted 1px #8B0000;
}
a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
{
color: white;
background-color: #8B0000;
}
/*
The navbar link styles
*/
.navbar a
{
color: #fffff0;
text-decoration: none;
font-weight: normal;
border-bottom: none;
font-family: 'Comic Sans MS', cursive;
font-size: medium;
text-transform: uppercase;
background: url(/wp/wp-content/uploads/image/tab2.jpg);
padding: 10px;
}
.navbar a:hover
{
background-color: #fffff0;
color: white;
background: url(/wp/wp-content/uploads/image/tab3.jpg);
padding: 10px;
}
.navbar a:visited
{
background-color: #fffff0;
color: white;
}
/*
Center the navbar
*/
#header_nav
{
text-align: left;
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: .5em 8px;
background-color: white;
}
#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: #8B0000;
}
.header h1 a:hover
{
color: #8B0000;
background-color: white;
}
.header h2
{
color: #8B0000;
background-color: white;
}
/*
Body styles and colors
*/
.main h1
{
text-transform: uppercase;
font-weight: normal;
font-family: 'Comic San MS', cursive;
}
.main h1,
.main h1 a
{
color: #fffff0;
background-color: black;
}
a:hover
{
background-color: black;
color: white;
}
.main h2
{
text-transform: none;
font-weight: normal;
color: #8B0000;
border-bottom: none;
}
.main h3
{
color: #8B0000;
font-weight: normal;
}
/*
Sidebar styles and colors
*/
#ext_sidebar h2
{
color: #FFCC00;
font-weight: normal;
}
#ext_sidebar h3,
#ext_sidebar a
{
color: red;
}
.sidebar h2
{
border-bottom: none;
color: #8B0000;
}
.sidebar ul ul
{
margin-left: .5em;
}
.sidebar li
{
margin: 10px;
}
#sidebar a:link,
#sidebar a:visited
{
border-bottom: none;
}
#sidebar li li
{
padding: 5px;
border: #black 1px solid;
list-style-image: none;
list-style-type: none;
}
.sidebar li li a:hover,
.sidebar li li:hover,
{
background-color: #fffff0;
color: #8B0000;
}
/*
General font settings
*/
h1,
h2,
h3,
{
color; #8B0000;
font-family: 'Comic Sans MS', cursive;
font-weight: normal;
}
a:link p,
a:link h1,
a:link h2,
a:link h3
{
color: #8B0000;
}
span[title]
{
color: #8B0000;
}
a[img]
{
border-bottom: none;
}
/*
This is the float divs
*/
.floatleft
{
float: left;
text-align: center;
padding: 10px 10px 5px 0px;
}
.floatright
{
float: right;
text-align: center;
padding: 10px 0px 5px 20px;
}
.center
{
text-align: center;
}
.caption
{
color: #8B0000;
font-size: 0.8em;
}
/*
Quote formatting
*/
blockquote
{
background-color: #fffff0;
padding-left: 50px;
padding-right: 10px;
margin: 5px 20px 0px 20px;
color: #black;
background: url(/uploads/Image/smallbackground.gif.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
/*
Article divs
*/
.primary,
.secondary
{
border-bottom: 1px solid #8B0000;
padding-bottom: 20px;
}
.index li
{
margin: 10px;
padding: 10px;
padding-left: 20px;
width: 300px;
border: #black 1px solid;
list-style-type: none;
background-color: #ffffff;
background-image: url(1wp/wp-content/uploads/image/smallbackground.jpg/);
background-position: left;
}
.index li:hover,
.index a:hover
{
background-color: #fffff0;
color: 8B0000;
}
#aftero
{
clear: right;
text-align: center;
}
.advert
{
text-align: center;
width: 250px;
border: black solid 1px;
padding: 5px 10px 5px 10px;
background-color: #fffff0;
background: url(/wp/wp-content/uploads/image/smallbackground.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
.advert1
{
text-align: center;
width: 150px;
border: black solid 1px;
padding: 5px 10px 5px 10px;
background-color: #fffff0;
background: url(/wp/wp-content/uploads/image/smallbackground.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
.wide_advert
{
text-align: center;
width: 350px;
border: black solid 1px;
padding: 5px 10px 5px 10px;
background-color: #fffff0;
background: url(/wp/wp-content/uploads/image/smallbackground.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
.advert h3,
.advert h2,
.wide_advert h2,
.wide_advert h3,
.advert1 h2,
.advert1 h3
{
color: #8B0000;
font-weight: normal;
}
.advert p
{
color: #black;
}
.object
{
width: 400px;
}
.external
{
width: 400px;
height: 400px;
}
q
{
color: italics;
}