CSS tips to tweak the look of your site
Your OM4 site has self-managed design features that do not require any CSS knowledge.
However, if you are feeling adventurous, or if you have a web developer in the family, your OM4 site lets you tweak some CSS rules to change the way your site looks.
Remember to clear your cache
When a broswer loads a web page with a CSS style sheet, it will cache the style sheet. That means each time the browser gets a new page, it will use the cached version of the style sheet.
If you create a new CSS rule, your OM4 site regenerates your style sheet. You then need to clear your browser’s cache to get rid of the old style sheet before the browser will download the new one.
How to create custom CSS rules
Using Dashboard, Site Design, scroll down to the Custom CSS section. You can create any CSS rules here, and they will be appended to your style sheet, after all previous rules. This means you can override any of the standard formatting.
Using a custom image for bullets
Example from: Alaya International
#content ul {list-style-type: none; padding: 0; margin: 0 0 1em 0; }
#content li {background-image: url(/files/Bullet.jpg); background-repeat: no-repeat; background-position: 0 .4em; padding-left: 1em;}
Aligning the top of sidebars
If you are using a dual sidebar layout, the top margin of the topmost sidebar widgets may need adjusting.
You need to know the name of the widgets to apply this rule. You can view the Page Source and scroll down to find the sidebar widget names. Or you can use the Firefox Web Developer toolbar.
Here is the CSS to lift text widget 4 and text widget 5 by 15 pixels.
#text-5 {margin-top: -15px;}
#text-4 {margin-top: -15px;}
Displaying a different background image for IE6
When using images with a transparent background, you’ll get best results by:
- using a transparent PNG image for most browsers (high quality result)
- using a transparent GIF image for IE6 (which can’t handle transparent PNG images)
When preparing the GIF for IE6, for best results use dithering with a matte colour that matches the background colour the GIF will appear over.
To show one image for IE6 and a different image for other browsers, use a CSS rule like this:
#page {background-image: url(myfile.png);}
* html {background-image: url(myfile.gif);} /* This will only be seen by IE6, and will override the prior rule */
To suppress a .png background image in IE6 use this:
* html #outerpage{background:none;/* Hide PNG in IE6 */}
The * html selector is only recognised by IE6.
Collapsible Page Nav
/* Navigation */
.widget_pages .widgettitle { display: none; }
#sidebar ul ul {margin-top: 0; margin-bottom: 15px;} /* Top/Bottom of nav block */
#sidebar ul li ul li {margin: 0 0 18px 0;} /* Space main items */
#sidebar ul li ul li ul li {margin: 0 0 2px 0;} /* Space sub items */
#sidebar ul a:link, #sidebar ul a:visited, #sidebar ul a:hover, #sidebar ul a:active {margin: 0;} /* Remove default margin */
#sidebar .widget_pages li ul { display: none; }
#sidebar .widget_pages ul li { text-transform: uppercase; }
#sidebar .widget_pages ul li ul li { text-transform: capitalize; }
#sidebar ul li ul li ul li a:link, #sidebar ul li ul li ul li a:visited, #sidebar ul li ul li ul li a:hover, #sidebarul li ul li ul li a:active { color: #989898;}
#sidebar .widget_pages li.current_page_item ul, #sidebar .widget_pages li.current_page_parent ul { display: list-item; }
#sidebar ul li ul li a {display: block !important;}
#sidebar ul li.page-item-13 ul li {display: none !important;} /* Supress display of Gallery sub pages */
#sidebar .widget_pages li { padding-bottom: 0em; margin-left: 0px; }
/* Current Item */
#sidebar ul ul li a:hover {color: #FFF;}
#sidebar .widget_pages li.current_page_item a {font-weight: bold !important; color: #a48050 !important; }
#sidebar .widget_pages li.current_page_item li a { font-weight: normal !important; }
#sidebar ul li ul li ul li ul li {display: none;} /* Sub Sub Pages */
WP eCommerce Shopping Cart Tweaks
body.page-id-11 #sidebar li#shopping-cart {display: none;} /* don’t display shopping cart on checkout */
.wpsc-cart-widget-num-items-0 { display: none; } /* Hide empty shopping cart widget */
.wpsc_container { clear: both; } /* fix bug #1565 */
IE6 Fixes
The OM4 theme has a built in PNG fix that makes transparent PNG images display in Internet Explorer 6. This fix only applies to images that are added using standard <img> tags.
Transparent PNG images that are added using CSS (ie using background-image), will not display in IE6.
/* IE6 Zoom fix */
#sidebar2, #sidebar li, #sidebar a { zoom: 1;}
CSS3 decoration features: border-radius, box-shadow and linear-gradient
Additional work is required if you wish to use the following CSS3 features (which work in Firefox and Safari but not in Internet Explorer 6-8):
border-radiusbox-shadowlinear-gradient
An example of border-radius being used is on Faber Vineyard’s footer subscribe form.
The following CSS was used to create rounded borders on the input fields in the footer:
#footer input { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
However these rounded corners won’t work in Internet Explorer 6-8. In order to make it work, two additional CSS attributes had to be added:
#footer input { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; behavior: url(/wp-content/themes/om4/PIE.htc); position: relative; }
The behavior attribute was added as per CSS Pie’s getting started guide.
The position attribute was added as per CSS Pie’s known issues page. Note that adding position relative can cause other problems. For example, if that element has overflow: hidden and elements inside it need to be positioned absolutely outside of it, overflow needs to be set to visible. This was needed for the Care Options header.
A list of CSS Pie’s supported CSS3 features.
CSS3PIE and background images on a rounded corner element
If a block element has a background image applied and also the CSS3PIE htc script (for rounding/shadowing) then IE6/7/8 won’t scale the image when page zooming is used. Instead, use foreground images and round directly.
CSS3PIE and box-shadows on hover
As per this forum topic, the behavior attribute must be added to the element to be hovered, but NOT during hover. Instead apply the behavior to (for instance) a link using:
#somebox a { position: relative; behavior: url(/wp-content/themes/om4/PIE.htc); }
Then for the hover, use only the css3 effects (plus any other normal hovered properties you wish):
#somebox a:hover { -moz-box-shadow: 0 0 5px 5px #d3a554; box-shadow: 0 0 5px 5px #d3a554; }
This will also work for sub-elements:
#somebox a img { position: relative; behavior: url(/wp-content/themes/om4/PIE.htc); }
#somebox a:hover img { -moz-box-shadow: 0 0 5px 5px #d3a554; box-shadow: 0 0 5px 5px #d3a554; }
Make shopping cart controls appear on one line
To force the qty/price/addtocart inputs to sit on a single line, paste the following css block into the custom CSS field…
/* make qty/price/submit inputs appear on one or two lines... */
.wpsc_extras_forms, div.wpsc_product_price br { display:none; }
div.wpsc_product_price { display:inline; padding:0 3.3em 0 15px; }
div.wpsc_product_price .pricedisplay { margin:.8em 0 0 2.8em; position:absolute; width:auto; font-weight:bold; }
body.logged-in div.wpsc_buy_button_container { display:inline !important; }
input.wpsc_buy_button { float:none !important; }
div.wpsc_loading_animation { margin-left:0; display:inline; float:none !important; padding: 0 5px; }
.wpsc_loading_animation img.loadingimage { position:relative; top:5px; }
Note: The members/guest select dropdown (when visible) will remain on the line above and not join the other inputs on one line, due to lack of space.
Dyanmic Dropdown Menu Styling shouldn’t use a:hover
Using CSS to style your blog pages
When you need to style a look for the ‘blog’ part of a WordPress site, there are 3 different WordPress templates you may need to set rules for.
Blog Index – this is the template that displays a list of the most recent posts (default is 10)
Archive Index – this is the template that displays a list of the most recent posts for a category (default is 10) – other than category archives, there are also tag and author based archives (rarely used by our sites)
Single – this is the template that displays a single post (ie. click on the title of a post from the blog index or an archive and you see a single post)
So if you wanted to have a custom header rule for the ‘blog’, typically you will need a CSS rule that targets all 3 of these templates. For example, to set the background colour as black for all blog related pages you would use this rule with 3 separate selectors:
body.blog #header, body.archive #header, body.single #header { color: #000; }
Similar principles apply to sidebar widgets. If you want to have sidebar widget that fires only on blog related pages, you’ll need to use the Widget Context plugin and target the following:
Blog index
Single post
All archives
Note widget context also lets you target just the category archives, tag archives or author archives as well, but All archives is usually what is needed.