/*
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 accessible to beginners.
Before we go through examples, two points are worth a mention: how the theme works, and the document canvas.
Notice
------
This file is mostly out of date.
Moreover, the feature is slated to get dropped with Semiologic 6 (which will feature a new template, and new skins).
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 sales letter template works much the same. Just use .letter 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 used for the sms layout
#main .main
#sidebar .sidebar
#sidebar2 .sidebar
#footer .footer
#copyright_notice
#footer_nav
#ext_sidebar .sidebar
#shadow_bottom empty div, not used
The hierarchical classes and tags used by entries are the following:
class/tag notes
----------------------------------------------------------------
.entry
.entry_header
h2 date
h1 title
.entry_content
.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
.letter wraps the entry in the sales letter
template, for customizations
.marker fluorescent marker style
.order_form order form style for use in sales
letter pages
.testimonial, testimonial styles, for use
.testimonials, in sales letter 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: "geogia","Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}
/*
The font size
*/
.custom h1
{
font-size: large;
font:italic bold 30px Georgia,serif;
text-shadow:2px 2px 4px #787878;
color:#000;
}
.custom h2,
.custom #wp-calendar caption
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font: italic bold 2em Georgia,serif;
}
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 .bookmark_me h2,
.custom .comment_header h2
{
font-size: small;
}
.custom #header {
background:url("../../../header/header-13.jpg") no-repeat scroll 0 0 transparent;
}
/*
The color and background colors
*/
body,
#ext_wrapper,
#wrapper,
#header,
#footer,
#body,
#main,
#sidebar,
#ext_sidebar
{
color: #474E44;
}
#footer {
background-color:#069;
margin-top:0px;
border: 1px solid #B8B8B8;
-moz-box-shadow: 1px 1px 7px;
-moz-border-radius: 0px 0px 23px 23px;
}
#copyright_notice,
#footer a {
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:small;
}
#footer a:hover {
color:#F00;
}
body {
background-color:#ccccff;
background-image:url(http://www.energeticsecrets.com/wp-content/themes/semiologic/img/grad.jpg); background-repeat:repeat-x;
}
#ext_wrapper {
background-color:#FFF;
background-image:url(http://www.energeticsecrets.com/wp-content/themes/semiologic/img/ext-bg.jpg);
background-repeat:repeat-x;
}
/*
The navbar and calendar header colors
*/
#navbar,
#wp-calendar thead th
{
background-color: #CCCFBC;
background-image:url(http://www.energeticsecrets.com/wp-content/themes/semiologic/img/navb.jpg); background-repeat:repeat-x;
}
#navbar a:hover {
color:#C30;
}
/*
The link styles
*/
a,
h1 a
{
color: steelblue;
}
a:hover,
h1 a:hover
{
color: saddlebrown;
}
/*
The navbar link styles
*/
.navbar a
{
color: #A37B45;
text-decoration: none;
font-weight: bold;
}
.navbar a:hover
{
color: #A37B45;
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;
padding: .5em 8px;
background-color: #CCCFBC;
}
#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 a,
a:link {
color:#698EC5;
}
.main h1
{
text-transform:capitalize;
}
.main h1,
.main h1 a
{
color:#30F;
font-family:Verdana, Geneva, sans-serif;
}
.main h1 a:hover
{
color: firebrick;
}
.main h2
{
color:#C90;
border-bottom: none;
font-family:"Times New Roman", Times, serif;
}
/*
Sidebar styles and colors
*/
.sidebar h2
{
border-bottom: none;
color:#039;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.sidebar ul ul
{
margin-left: .5em;
}
li#text-303638501.widget {
background-color:#FFF;
}
/*
Footer styles and colors
*/
.widget_text {
background-color:#006699;
color:#CCC;
font-size:12px;
}