/*
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: "Times New Roman", Times, serif;
}
/*
The font size
*/
.custom h1
{
font-size: large;
}
.custom h2
{
font-size: medium;
margin: 0px;
padding: 0px;
}
body.custom,
.custom,
.custom h3,
.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
{
color: #474E44;
background-color: #Fefefe;
}
#ext_wrapper
{
color: #474E44;
margin: 0px;
padding: 0px;
}
#wrapper
{
color: #474E44;
margin: 0px;
padding: 0px;
}
#header
{
color: #474E44;
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#footer
{
color: #474E44;
background-color: #2D7D53;
margin: 0px;
padding: 0px;
}
#body
{
color: #474E44;
background-color: #F3F4EC;
margin: 0px;
padding: 0px;
}
#main
{
color: #000000;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#sidebar
{
color: #474E44;
background-color: #F3F4EC;
margin: 0px;
padding: 0px;
}
#ext_sidebar
{
color: #474E44;
background-color: #F3F4EC;
margin: 0px;
padding: 0px;
}
/*
The navbar and calendar header colors
*/
#navbar
{
background-color: #51c287;
}
/*
The link styles
*/
a,
h1 a
{
color: steelblue;
}
a:hover,
h1 a:hover
{
color: saddlebrown;
}
/*
The navbar link styles
*/
.navbar a
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
.navbar a:hover
{
color: #A37B45;
text-decoration: underline;
}
/*
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
*/
.custom #header div.pad
{
margin: 0px;
padding: 0px;
}
#sitename
{
text-align: center;
}
.header h1
{
margin: 0px;
text-transform: uppercase;
padding-top: 0em;
padding-right: 0px;
padding-bottom: 1em;
padding-left: 0px;
}
.header h2
{
margin: 0px;
padding: .5em;
font-size: small;
text-transform: uppercase;
}
.header h1 a
{
color: #474E44;
margin: 0px;
padding: 0px;
}
.header h1 a:hover
{
color: firebrick;
}
.header h2
{
color: #A37B45;
}
/*
Body styles and colors
*/
.main h1
{
text-transform: uppercase;
margin: 0px;
padding: 0px;
}
.main h1,
.main h1 a
{
color: #5B7B57;
margin: 0px;
padding: 0px;
}
.main h1 a:hover
{
color: firebrick;
}
.main h2
{
text-transform: uppercase;
color: #A37B45;
border-bottom: none;
}
/*
Sidebar styles and colors
*/
.sidebar h2
{
color: #5B7B57;
margin: 0px;
padding: 0px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #006600;
}
.sidebar ul ul
{
margin-left: .5em;
}
/* margins */
form,
object,
param,
embed,
.sidebar ul,
.sidebar li
{
margin: 0px;
padding: 0px;
}
div.spacer
{
margin: 0px;
padding: 0px;
}
div.pad
{
padding-right: 4px;
padding-left: 4px;
}
#body div.pad
{
padding-top: 0px;
}
#header div.pad
{
padding: 0px;
margin: 0px;
}
.header_bg #header div.pad,
.header_img #header div.pad
{
border: none;
}
#header_nav
{
}
#footer_nav
{
}
#copyright_notice
{
}
.sidebar ul,
.sidebar li
{
list-style-type: none;
}
.sidebar li ul,
.sidebar li li
{
list-style-type: square;
}
.sidebar li li
{
margin-left: .5em;
}
.sidebar li li li
{
margin-left: .8em;
}
.sidebar li .sem_subscribe_me ul,
.sidebar li .sem_subscribe_me li,
#democracy ul,
#democracy li
{
margin-left: 0px;
list-style-type: none;
}
.custom #subscribe_form form
{
}
.custom .newsletter_fields
{
margin-top: .5em;
margin-bottom: .5em;
}
.custom .newsletter_fields input
{
margin-top: .1em;
margin-bottom: .1em;
}
.custom .newsletter_submit
{
margin-top: .5em;
margin-bottom: .5em;
}
/* text block margins */
div.entry,
div.entry_body,
div.entry_meta,
div.entry_actions
div.comment,
div.comment_body,
div.bookmark_me_display_widget
{
margin-bottom: 0.5em;
padding-top: 0px;
padding-bottom: 0px;
}
div.entry
{
margin-top: .5em;
margin-bottom: 2em;
}
div.entry_header,
div.comment_header,
.sidebar li
{
margin-top: .5em;
margin-bottom: 0.5em;
padding-top: 0px;
padding-bottom: 0px;
}
.entry_header h2,
.entry_header h1,
div.entry_author,
div.entry_date,
div.entry_nav,
div.entry_tags,
.comment_header h2,
.comment_header h3,
.sidebar h2
{
margin-top: .2em;
margin-bottom: .2em;
padding-top: 0px;
padding-bottom: 0px;
}
h1,
h2,
h3
{
margin-top: .5em;
margin-bottom: .5em;
padding-top: 0px;
padding-bottom: 0px;
}
.header h1
{
margin: 0px;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 10px;
padding-left: 8px;
}
.header h2
{
margin: 0px;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 8px;
}
.invert_header h1
{
padding: 63px 8px 2px 8px;
}
.invert_header h2
{
padding: 2px 8px 43px 8px;
}
.header_img #header h1
{
padding: 0px;
margin: 0px;
}
p,
ul,
.sidebar li ul,
ol,
dl,
pre
{
padding-top: 0px;
padding-bottom: 0px;
}
hr
{
margin-top: .2em;
margin-bottom: .2em;
padding-top: 0px;
padding-bottom: 0px;
}
blockquote
{
background: url(img/blockquote.gif) 6px 6px no-repeat;
margin-left: 0px;
margin-right: 0px;
padding: 10px 10px 10px 60px;
}
pre
{
margin-left: 0px;
margin-right: 0px;
padding: 10px 10px 10px 10px;
}
li,
.sidebar li li,
.sidebar li li ul,
dt,
dl
{
margin-top: .2em;
margin-bottom: .2em;
padding-top: 0px;
padding-bottom: 0px;
}
.inline_menu span
{
margin: 0px 3px;
}
.display_sidebar_nav_widget div
{
}
.display_sidebar_nav_widget div span
{
display: list-item;
margin-left: .5em;
list-style-type: square;
}
.entry_actions span,
.comment_actions span
{
margin-left: .1em;
margin-right: .1em;
}
/* admin links */
.admin_link
{
font-weight: normal;
font-size: small;
}
/* links */
a img
{
border: none;
}
a em
{
font-style: normal;
color: firebrick;
}
a,
h1 .admin_link a,
h2 .admin_link a
{
color: blue;
text-decoration: underline;
}
h1 a,
h2 a
{
text-decoration: none;
color: black;
}
h1 a.external,
h2 a.external
{
background: none;
padding-right: 0px;
}
a:hover,
.admin_link a:hover
{
color: firebrick;
}
/* override external links */
.header .external,
.sidebar .external,
.footer .external
{
background-image: none;
padding-right: 0px;
}
/* credits, extra_footer */
#entry_footer,
#extra_footer,
#credits
{
margin: 10px auto;
text-align: center;
font-size: small;
}
/* comment form */
#author,
#email,
#url,
#comment
{
width: 90%;
}
/* gravatars */
img.gravatar
{
float: left;
margin: .2em 1em;
}
/* translator bar */
.narrow #translator_bar,
.narrow_sm #translator_bar,
.narrow_ms #translator_bar
{
width: 590px;
margin: 10px auto;
}
.wide #translator_bar,
.narrow_em #translator_bar,
.narrow_me #translator_bar,
.narrow_essm #translator_bar,
.narrow_esms #translator_bar,
.narrow_emss #translator_bar,
.narrow_ssme #translator_bar,
.narrow_smse #translator_bar,
.narrow_msse #translator_bar,
.narrow_ssm #translator_bar,
.narrow_sms #translator_bar,
.narrow_mss #translator_bar,
.narrow_esm #translator_bar,
.narrow_sme #translator_bar,
.narrow_ems #translator_bar,
.narrow_mse #translator_bar
{
width: 770px;
margin: 10px auto;
}
.wide_em #translator_bar,
.wide_me #translator_bar,
.wide_essm #translator_bar,
.wide_esms #translator_bar,
.wide_emss #translator_bar,
.wide_ssme #translator_bar,
.wide_smse #translator_bar,
.wide_msse #translator_bar,
.wide_ssm #translator_bar,
.wide_sms #translator_bar,
.wide_mss #translator_bar,
.wide_esm #translator_bar,
.wide_sme #translator_bar,
.wide_ems #translator_bar,
.wide_mse #translator_bar
{
width: 970px;
margin: 10px auto;
}
.flex #translator_bar
{
margin: 0px 8px;
}
#translator_bar table
{
margin-left: auto;
margin-right: 0px;
}
.flags_bar img,
#translation_bar img
{
margin: 0px 1px;
}
.flags_bar,
#translation_bar
{
margin-top: 1em;
margin-bottom: 1em;
}
/* floating images */
.entry_body img
{
margin: 0px .5em;
}
/* gallery class */
.gallery
{
overflow: hidden;
}
.gallery p
{
text-align: center;
}
.gallery img
{
border: outset 1px;
margin: .2em auto;
}
/* ad */
div.ad,
div.announcement
{
border: solid 1px lavender;
background-color: ghostwhite;
color: black;
padding: 0px 10px;
clear: both;
}
.main div.ad,
.main div.announcement
{
margin: .5em 0px;
}
.main div.title_ad
{
margin: 1em .5em .2em 0px;
width: 240px;
float: left;
overflow: hidden;
}
/* widgets */
#calendar h2,
#google-search h2
{
display: none;
}
.widget_search
{
text-align: center;
}
/* tables */
.main th,
.main td
{
padding-right: 2px;
padding-left: 2px;
}
.main table p
{
margin-top: 0px;
}
/* entry_author_image */
.entry_author_image
{
float: left;
border: outset 1px;
margin: 1.2em 1.2em 0px .1em;
}
/* cc_license */
.license_block
{
margin-right: auto;
margin-left: auto;
text-align: center;
}
/* podpress */
.entry .podPress_content img,
.entry .podPress_content th,
.entry .podPress_content td
{
padding: 0px;
margin: 0px;
}
/* prev_next_page */
.prev_next_page
{
text-align: center;
}
/* fix IE, sometimes */
.sell #ext_wrapper,
.sell #wrapper,
.me #main,
.me #ext_main,
.em #main,
.em #ext_main,
#header
{
position: relative;
}
.sidebar #newsletter,
.sidebar form,
.sidebar script
{
overflow: hidden;
}
/* shopping cart */
#widgetshoppingcart,
#shoppingcartcontents
{
padding: 0px !important;
margin: 0px !important;
float: none !important;
}
/* mediacaster */
div.media,
div.enclosures
{
margin: .5em 0px;
}
div.media
{
text-align: center;
}
/* 3-columns, narrow width */
.narrow_ems #ext_wrapper,
.narrow_esm #ext_wrapper,
.narrow_mse #ext_wrapper,
.narrow_sme #ext_wrapper
{
width: 800px;
margin: 10px auto;
}
.narrow_mse #wrapper,
.narrow_sme #wrapper,
.narrow_ems #wrapper,
.narrow_esm #wrapper
{
width: 630px;
}
.narrow_ems #sidebar,
.narrow_esm #sidebar,
.narrow_ems #ext_sidebar,
.narrow_esm #ext_sidebar,
.narrow_mse #sidebar,
.narrow_mse #ext_sidebar,
.narrow_sme #ext_sidebar
{
width: 168px;
}
.narrow_sme #sidebar
{
width: 150px;
}
.narrow_ems #main,
.narrow_esm #main,
.narrow_mse #main,
.narrow_sme #main
{
width: 480px;
}