Twenty Ten Weaver Theme Snippets

CSS Snippets for Twenty Ten Weaver

There are many styling options than can be implemented using CSS. In fact, the vast majority of Twenty Ten Weaver's options are simply CSS style rules that override the defaults used by the parent Twenty Ten theme. Now it would be possible to provide many more options for styling your theme, but at some point, that would begin to make the control interface huge and confusing (What? - you say it already is huge and confusing!).

Instead of adding more and more options, this document will instead contain CSS snippets that you can cut and paste into the <HEAD> section of the Advanced Options tab. (Unless otherwise noted, you should paste these snippets between the <style> and </style> lines in the <HEAD> Section box.)

Many times, these snippets will work without any additional modification - you can simply cut and paste. Sometimes they might call for a path or image name, in which case you will have to change from the example file name to one of your own. Please change these filenames. The examples provided (mostly images) are hosted on our google account, and it would be more polite to use your own resources. You can copy any of the images to your own host, but please, don't use our examples.

And this is not a CSS tutorial. We will try to explain just enough for you to use these snippets without really understanding exacltly how they work. You can easily go Google and search for more information about specific CSS properties we use. For example, searching for "CSS font-weight" will lead you all the information you might need to understand what values "font-weight" can take. But mostly the idea is to cut and paste, and then perhaps play a bit with sizes or other values provided.

And this is an on-going effort. We will add more snippets as they are "discovered". We appreciate contributions if you've found a useful snippet!

The Snippets

Header

Make site title big
Sometimes you might want your site title to be big. Try different %'s to vary the size.
```
#site-title a {font-size:150%}
```
Make menu bar have all corners rounded
Because it usually looks better, the default style when rounded borders are selected rounds only the bottom of the menu bar. You can change it to all rounded borders using this snippet.
```
#access {-moz-border-radius: 7px; -moz-border-radius: 7px;
         -webkit-border-radius: 7px; -webkit-border-radius: 7px;}
```
Border above and below Header image
The parent Twenty Ten theme puts a black bar above and below the header image. In order to avoid problems when picking various background colors, Twenty Ten Weaver removes those bars. You can restore them back to the original with this snippet. The # value is a color, as usual, and you can change it.
```
#branding img {
  clear: both; display: block;
  border-top: 4px solid #000; border-bottom: 1px solid #000;}
```
Move Menu to the Right
If you want the menu items on the right of the bar, you can use this snippet. But be warned: this will reverse the order of the menu items! To get the order you really want, you'll have to use the Appearance->Menus panel to create the order you want - but in reverse!
```
div.menu li { float:right }
```

Post and Page Content

Adding boxes to post information
As demonstrated in the Simple Silver theme, these snippets will put a bordered box of a specified color around the post information at the top and bottom of each post entry.
```
.entry-meta {padding:4px 0 4px 20px;background-color:#F8F8F8;
   border: solid 1px #A0A0A0;}
.entry-utility {padding:4px 0 4px 20px;background-color:#C0C0C0;
   border: solid 1px #A0A0A0;}
```
Adding Background Color to Page Titles
This snippet will add a background color on page and post titles.
```
.entry-title {background-color:#DDDDDD;}
```

Adding Shadows to Site, Page, Post, and Widget titles
These style rules will add a shadow effect on all the major titles. You should be able to figure out which rules affect which titles. You can search the web for "CSS text-shadow" to learn about options.

#site-title a {text-shadow:1px 1px 1px #999;}
#content .entry-title {text-shadow:1px 1px 1px #999;}
.entry-title a:link {text-shadow:1px 1px 1px #999;}
.entry-title a:visited {text-shadow:1px 1px 1px #999;}
.entry-title a:active, .entry-title a:hover {text-shadow:1px 1px 1px #999;}
.widget-title {text-shadow:1px 1px 1px #999; }

Control Font Size and Line Spacing of Content Text
While the main options give you some rough control over the size and line spacing of the main content text, you can get fine control by overriding the "body, input, textarea" CSS tag. Search the web for options on using "font-size" and "line-height". This example will make the text smaller.
```
body,input,textarea {font-size: 10px;line-height: 14px;}
```

Widget Areas

Adding space below Sidebar widget titles
You may want to add some space between a sidebar widget's title and the content. This is fairly easy to do. Add this snippet, which adds 10px (10 pixels, about what a line takes up). If you want more, simply change the 10px to something bigger.
```
.widget-title {margin-bottom:10px;}
```
Changing the font size of a widget title
You can also change the font size of a widget title. Our example uses 'px', but there are other options for specifying font-size - you can use whatever you know. Font-weight can be any of: normal, bold, bolder, lighter, or values 100 to 900. The line-height influences the layout, and is related to font-size. And again, we use the margin-bottom to fix that up. You can play around with the values to get a look you like.
```
.widget-title {font-size:30px;font-weight:normal;line-height:35px;margin-bottom:5px;}
```
A widget title with a dotted bar underneath
This example is taken from the Orange sub-theme. When you see a 6 numbers following a #, that is a color. You can search the web for colors, or play with the Main Options tab to see the value for colors.
```
.widget-title {font-size:130%;margin-bottom:8px;border-bottom: 1px dotted #C4BCB0;} 
```
A widget with a gray bar and small-caps font
This example is from the Ivory Drive sub-theme. You can change the color of the under-bar and its height. Small-caps is the only interesting font-variant currently supported by HTML.
```
.widget-title {border-bottom: 2px solid #737373; font-variant: small-caps;}
```

Footer

Hiding the Copyright and Powered by in the footer
Hey - we'd really appreciate it if you leave the Powered by text in the footer, but we know sometimes you really don't want to have stuff like that in your footer. It is in a <div> with id '#site-generator'. If you also want to eliminate the copyright notice, it is in a <div> with id '#site-info'. This snippet will hide both. It should be fairly obvious which part to delete if you want to keep one.
```
#site-generator {display:none; }
#site-info {display:none;}
```
Border around footer
It is fairly easy to add a border of the style, width, and color of your choice around the footer box. First, however, you need to clear the 4px bar included above the footer by default. Following is a simple example, but you can lookup the other options available for borders by searching the web for "css border values".
```
#colophon {border-top:none;}
#footer {border-style:double; border-width:4px; border-color:#222222;}
```