/*
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: Verdana, sans-serif;
}
/*
The font size
*/
.custom h1
{
font-size: 12px;
}
.custom h2,
.custom #wp-calendar caption
{
font-size: medium;
}
.custom body,
.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
{
font-size: 12px;
}
/*
The color and background colors
*/
body,
#ext_wrapper,
#wrapper,
#header,
#footer,
#body,
#main,
#sidebar,
#ext_sidebar
{
color: #474E44;
background-color: #FFFFFF;
border-top: none;
}
/*
The navbar and calendar header colors
*/
#navbar,
#wp-calendar thead th
{
background-color: #CCCFBC;
}
/*
The link styles
*/
a,
h1 a
{
color: #32331D;
font-weight: 10px;
}
a:hover,
h1 a:hover
{
color: #32331D;
text-decoration: underline;
font-weight: 10px;
}
/*
The navbar link styles
*/
.navbar a
{
color: #32331D;
text-decoration: none;
font-weight: 10px;
}
.navbar a:hover
{
color: #32331D;
text-decoration: underline;
font-weight: 10px;
}
/*
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 0px;
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: none;
}
.header h1 a
{
color: #000000;
}
.header h1 a:hover
{
color: firebrick;
}
.header h2
{
color: #000000;
}
/*
Body styles and colors
*/
.main h1
{
text-transform: none;
}
.main h1,
.main h1 a
{
color: #1A212D;
}
.main h1 a:hover
{
color: #1A212D;
text-decoration: underline;
}
.main h2
{
text-transform: none;
color: #000000;
border-bottom: none;
}
/*
Sidebar styles and colors
*/
.sidebar h2
{
color: #477BAC;
}
.sidebar ul ul
{
margin-left: 1em;
}
/*
* Alterations by Peter S.
*/
/*
* Body; this sets background color, image, and centers the background image;
*/
body.custom {
background-color: #F5F5F5;
background-image: url(images/gray_border.png);
background-repeat: repeat-y;
background-position: top center;
font-family: "Verdana", trebuchet, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 1.8em;
margin: 0;
padding: 0;
}
/*
* This changes the body width for monocolumn layout.
*/
body.m #ext_wrapper {
width: 700px;
}
/*
* #ext_wrapper; specifically sets blog width to 700px;
*/
.custom #ext_wrapper {
width: 700px;
background-color: #fff;
border: none;
margin: 0 auto !important;
border-right: none;
border-left: none;
}
/*
* .header; this sets the height, and the background image for the header;
*/
.custom #header {
height: 138px;
background-image: url(images/gostovanje.png);
background-repeat: no-repeat;
background-position: top left;
}
/*
* .pad; removes the blog name, and blog tagline;
*/
.custom #header .pad {
display: none;
}
/*
* .navbar; setting the navbar height, and text alignment;
* also set the navbar border parameters;
*/
.custom #navbar {
height: 25px;
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
/*
background-color: #eaffff;
*/
background-color:#F5F5F5;
font-family: "Verdana", sans-serif !important;
font-size: 11px;
text-transform: none;
text-decoration: none;
color: #284765;
}
/*
* .pad; resets padding/margin on the navbar (on the navbar menu items);
*/
.custom #navbar .pad {
padding: 0px 0px 2px 0px;
margin: 0;
}
/*
* .header_nav div; makes text center-aligned in the navbar;
*/
.custom #header_nav div {
text-align: center;
color: #32331D
}
.custom #header_nav div a {
text-align: center;
color: #32331D
}
/*
* .header_nav span; spaces the navbar elements out a bit;
*/
.custom .header_nav span {
padding: 0 2px ;
}
/*
* changing this will change the sidebar + body - for example change
* the background here;
*/
.custom #body {
width: 600px;
margin-left: 50px;
background-color: #FFFFFF;
}
/*
* #sidebar; specifically setting the sidebar width to make sure it doesn't
* ride up underneath the main content;
* set line-height back to normal for the #sidebar;
*/
.custom #sidebar {
width: 168px;
margin-top: 10px;
border-left: 1px solid #999999;
line-height: normal !important;
}
/*
* #sidebar ul; specifically set the sidebar bullet points;
*/
.custom #sidebar li ul, .custom #sidebar li li {
list-style-type: none;
list-style-type: disc;
list-style-image: none;
color: #9addff;
}
.custom #sidebar li ul {
margin: 0;
padding: 0;
}
/*
* #sidebar li h2; the main title for each sidebar section;
*/
.custom #sidebar li h2 {
font-family: "Verdana", sans-serif !important;
font-size: 12px;
text-transform: none;
text-decoration: underline;
color: #284765;
}
/*
* #sidebar li li; alter the font styling here;
* the second section is for styling links in the sidebar text;
*/
.custom #sidebar li li {
font-family: "Verdana", sans-serif !important;
font-size: 12px;
}
.custom #sidebar li li a {
text-decoration: none;
}
/*
* .entry; for the main post section
*/
.custom .entry {
padding: 0;
margin: -5px 0 0 0;
}
/*
* .entry h1; for the main title for each post article;
*/
.custom .entry h1 {
font-family: "Verdana", sans-serif !important;
font-size: 18px;
text-align: center;
}
/*
* .entry h2; for the date title for each post article;
*/
.custom .entry h2 {
font-family: "Verdana", sans-serif !important;
font-size: 10px;
text-transform: none;
color: #32331D;
}
/*
* .entry_body, .entry_meta; for styling the text in the post article;
* the second section is for styling links in
* the post and meta section;
*/
.custom .entry_body {
font-family: Verdana, sans-serif !important;
font-size: 12px;
color: #000000;
}
.custom .entry_body a {
color: blue;
text-decoration: none;
}
.custom .entry_body a:hover {
color: blue;
text-decoration: underline;
}
/*
* .entry_meta; the extra options in the post, 'Filed Under' etc
*/
.custom .entry_meta {
font-family: Verdana, sans-serif !important;
font-size: 12px;
color: #000000;
}
.custom .entry_meta a {
font-family: Verdana, sans-serif !important;
font-size: 12px;
color: #32331D;
text-decoration: underline;
}
/*
* .entry_actions a; the bottom of each post, styling what actions are possible
* for each post; the second is for styling links in the actions;
*/
.custom .entry_actions {
font-family: Verdana, sans-serif !important;
color: #32331D;
text-decoration: none;
}
.custom .entry_actions a {
font-family: Verdana, sans-serif !important;
color: #32331D;
text-decoration: underline;
}
/*
* blockquote; custom styling for blockquote;
*/
.custom blockquote {
font-style: italic;
background-color: #FFFFFF;
border-left: 1px dotted #1A212D;
background-image: none;
padding: 1px 1px 1px 5px;
margin-left: 30px;
margin-right: 0px;
}
/*
* two specific div tags for right-floated div tag, and left-floated div tag;
* added margin values in for both, to make it look neat;
*
* note, no '.custom' declaration required since these classnames are not used
* in the theme.
*/
.imdivright, .imdivleft {
padding: 5px 0;
border: 1px solid #5A8FC3;
}
.imdivright {
float: right;
clear: right;
margin: 7px 0 2px 10px;
}
.imdivleft {
float: left;
clear: left;
margin: 6px 10px 0px 0;
}
.floatmenuright, .floatmenuleft {
padding: 5px 0;
border: none;
}
.floatmenuright {
float: right;
clear: right;
margin: -8px 15px 15px 35px;
}
.floatmenuleft {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
.floatmenu li ul, .floatmenu li li {
list-style-type: none;
list-style-type: disc;
list-style-image: none;
}
.floatmenu li ul {
margin: 0;
padding: 0;
}
.endorsements_box {
border: solid 1px #1A212D;
background-color: #F9EBE6;
margin: 5px 0px 5px 10px;
width: 140px;
float: right;
clear: right;
padding: 15px 15px 15px 25px;
}
.endorsements {
width: 140px;
float: right;
clear: right;
margin: 1px 15px 15px 25px;
}
.endorsements_txt {
font-size: 11px;
line-height: 1.6em;
font-style: none;
font-family: Verdana, Helvetica, sans-serif;
}
.endorsements_txt_name {
font-size: 10px;
font-style: italic;
font-family: Verdana, Helvetica, sans-serif;
margin-bottom: 15px;
border-bottom: 1px dotted #000000;
}
/*
* this is for the bottom section, podcast ...
*/
.custom #podPress_footer {
display: none !important;
}
/*
* Related entries;
*/
.custom .entry_related_entries h2, .custom .entry_related_tags h2 {
margin-top: 10px;
padding-top: 0;
}
/*
* For the comments;
*/
.custom #comment_form {
margin: 0;
padding: 0;
}
.custom h1#postcomment {
margin: 10px 0 0 0;
padding: 0;
}
.custom form#commentform {
margin-top: 0;
padding-top: 0;
}
.custom #copyright_notice {
display: none;
}
.custom #footer_nav {
border-top: none;
}
/* advertising blocks */
div.ad
{
border: solid 1px #1A212D;
background-color: #F9EBE6;
color: #000000;
padding: 5px 10px;
clear: both;
}
.main div.ad
{
margin: .5em 0px;
}
.main div.title_ad
{
border: solid 2px #1A212D;
background-color: #F9EBE6;
padding: 5px 10px;
margin: 0.5em .5em .2em 0px;
width: 210px;
float: left;
overflow: hidden;
}
div.subheader
{
margin-top: -1px;
height: 205px;
clear: both;
}
div.subheader_headline
{
margin-top: 0px;
height: 165px;
clear: both;
}
div.fullheaderad
{
margin-top: 0px;
height: 505px;
clear: both;
}
div.inpost_video_ad_left
{
border: dashed 1px #5A8FC3;
background-color: #FFFFFF;
width: 250px;
float:left;
padding: 5px 5px 5px 5px !important;
margin-top: 5px;
margin-right: 15px;
height: 360px;
clear: both;
}
div.inline_video_ad
{
border: solid 1px #1A212D;
margin: 0.5em .5em .2em .1em;
background-image: url(images/bgd_inline_video.png);
background-color: #E4E8EC;
height: 305px;
width: 580px;
clear: both;
}
.main div.title_ad_red
{
border: solid 1px #1A212D;
background-color: #F9EBE6;
padding: 5px 10px;
margin: 0.5em .5em .2em 0px;
width: 240px;
float: left;
overflow: hidden;
}
.main div.youtube
{
border: solid 1px #1A212D;
background-color: #F9EBE6;
padding: 5px 10px;
margin: 0.5em 0.5em 0.2em 0px;
width: 425px;
float: left;
overflow: hidden;
}
.main div.youtube_inpost
{
border: none;
background-color: none;
padding: 5px 15px 0px 5px;
margin: 0em 0em 0em -0.3em;
width: 330px;
float: left;
overflow: hidden;
}
.main div.youtube_inpost_sub_left
{
border: none;
background-color: none;
padding: 5px 15px 0px 5px;
margin: 0em 0em 0em -0.3em;
width: 330px;
float: left;
overflow: hidden;
}
.main div.youtube_inpost_sub_right
{
border: none;
background-color: none;
padding: 5px 15px 0px 5px;
margin: 0em 0em 0em -0.3em;
width: 330px;
float: right;
overflow: hidden;
}
div.youtube_subtext
{
font-weight: bold;
font-size: 13px;
color: #1A212D;
text-align: center;
}
.youtube_subtext a {
color: blue !important;
text-decoration: underline;
text-align: center;
}
.main div.as_med_rect
{
border: none;
padding: 0px 0px;
margin: 0.5em 0em 0em 0px;
width: 310px;
float: left;
overflow: hidden;
}
.main div.as_small_vert
{
border: none;
padding: 0px 0px;
margin: 0.5em 0em 0em 0px;
width: 130px;
float: left;
overflow: hidden;
}
/* Signup Form Styles */
#video_embed{
border: none;
padding: 75px 25px !important;
width: 400px;
float: left;
}
#video_embed_small_ad{
border: none;
padding: -3px -5px !important;
margin-left:-6px;
width: 230px;
float: left;
}
#video_embed_inpost{
border: none;
padding-top: 5px;
padding-left: 5px;
padding-right: 10px !important;
float: left;
}
form
{
margin-top:0px;
padding-top:25px;
}
.form_header_ad
{
padding-top:290px !important;
margin-top:120px !important;
margin-right:60px;
padding-right:50px;
}
#form_ad_video
{
margin-top:0px;
padding-top:185px;
}
#form_inline_ad
{
text-align: center;
margin-top: 115px;
padding-top: 5px;
float: left;
}
form_full_ad_video
{
margin-top:0px;
padding-top:300px;
}
form_full_ad
{
margin-top:0px;
padding-top:300px;
}
#topbar {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/headerbar_top_fashionskincare.png);
width: 700px;
height: 200px;
margin-bottom: 0px;
margin-top: 0px;
}
#topbar_headline {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/headline_0.png);
width: 700px;
height: 162px;
margin-bottom: 0px;
margin-top: 0px;
}
#topbar_headline_1 {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/headline_1.png);
width: 700px;
height: 162px;
margin-bottom: 0px;
margin-top: 0px;
}
#topbar_headline_2 {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/headline_2.png);
width: 700px;
height: 162px;
margin-bottom: 0px;
margin-top: 0px;
}
#topbar_headline_3 {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/headline_3.png);
width: 700px;
height: 162px;
margin-bottom: 0px;
margin-top: 0px;
}
#topbar_headline_4 {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/headline_4.png);
width: 700px;
height: 162px;
margin-bottom: 0px;
margin-top: 0px;
}
#topbar_headline_5 {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/headline_5.png);
width: 700px;
height: 162px;
margin-bottom: 0px;
margin-top: 0px;
}
#full_top_ad {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/full_page_header_video.png);
width: 700px;
height: 500px;
margin-bottom: 0px;
margin-top: 0px;
}
#full_top_ad_video {
text-align: right;
border: none;
padding-top: 0px;
background-image: url(images/full_page_header_video.png);
width: 700px;
height: 500px;
margin-bottom: 0px;
margin-top: 0px;
}
#little_ad_video {
border: none;
padding-top: 0px;
width: 230px;
margin-bottom: 0px;
margin-top: 0px;
}
#inpost_video {
text-align: right;
border: none;
padding-top: 0px;
background-color: #000000;
margin-bottom: 0px;
margin-top: 0px;
}
#SignupForm {
float:right
text-align: right;
border: none;
padding-top: 295px;
width: 700px;
}
#SignupForm_small_header {
float:right
text-align: right;
border: none;
padding-top: 0px;
width: 700px;
}
.SignupForm_small {
text-align: right;
border: none;
padding-top: 25px;
width: 200px;
}
.TextBox {
border: 2px solid #5A8FC3;
background-color:#fff !important;
height: 20px;
width: 185px;
font-family: Verdana, sans-serif !important;
color: #1A212D;
font-weight: bold;
font-size: 14px !important;
padding: 6px 6px 5px 6px;
margin-right: 26px;
margin-bottom: 10px;
}
.TextBox_little_video {
border: 1px solid #5A8FC3;
background-color:#fff !important;
height: 20px;
width: 230px;
font-family: Verdana, sans-serif !important;
color: #1A212D;
font-weight: bold;
font-size: 14px !important;
padding: 6px 6px 5px 6px;
margin-right: 26px;
margin-left: 3px;
margin-bottom: 10px;
}
.RegisterButton {
vertical-align: top;
padding: 0px 0px 0px 0px;
margin-left: 27px;
margin-right: 34px;
}
.SignupForm_inline {
text-align: right;
border: none;
padding-top: 125px;
}
.inline_picture {
margin-left: -10px;
}
.TextBox_inline {
border: 2px solid #cccccc;
background-color:#fff !important;
height: 20px;
width: 185px;
font-family: Verdana, sans-serif !important;
color: #1A212D;
font-weight: bold;
font-size: 14px !important;
padding: 6px 6px 5px 6px;
margin-right: 5px !important;
margin-left: 10px;
margin-bottom: 10px;
}
.RegisterButton_inline {
vertical-align: top;
margin-left: 7px !important;
margin-right: 5px !important;
clear: both;
}
#SignupForm_wide {
border: 1px dashed firebrick;
width: 580px;
margin-bottom: 20px;
margin-top: 20px;
}
.TextBox_wide {
vertical-align: top;
border: 1px solid #cccccc;
background-color:#fff !important;
color: #4383c4;
font-weight: bold;
padding: 5px 0px 5px 6px;
margin-right: 2px;
margin-left: 10px;
margin-top: -15px;
}
.RegisterButton_wide {
vertical-align: top;
margin-top: -15px;
}
.footerstyling{
size: 11px !important;
color: #666666 !important;
font-style: none;
font-family: Verdana, Helvetica, sans-serif;
}
.footerstyling a {
font-size: 11px;
color: #666666 !important;
text-decoration: none;
}
/*
* text widgets styling
*/
.style1 {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {
font-size: 12px;
font-style: italic;
font-family: Verdana, Helvetica, sans-serif;
}
UL {
style: bold;
list-style-image: url(images/bullet-c.png) ;
}
UL UL LI {
style: bold;
list-style-image: url(images/bullet-c.png);
}
UL UL UL LI {
style: bold;
list-style-image: url(images/bullet-c.png);
}