Twenty Ten Weaver Theme Documentation

Version 1.2

The Twenty Ten Weaver (TTW) Wordpress theme is a pure child theme of the new Wordpress 3 standard Twenty Ten theme. Twenty Ten Weaver allows you to change many of the colors and other aspects of the standard Twenty Ten theme. In addition, it allows you to easily add whatever special code you might need (such as advertising tracking code), all without having to get into the depths of Wordpress theme code.

TTW allows you to build a custom site look by tweaking many of the style rules for your Wordpress blog. You can get a very customized look just by picking colors and layout options. While the Main and Advanced Options control panels may look overwhelming, they really aren't that hard to use once you play with them a bit. This Help document has lots more information to help you design your own site look by changing many of the the standard Twenty Ten theme styles. Don't know what a style is - don't worry, you just have to pick colors and click on check marks.

How to get started:

  1. Select one of the predefined sub-themes. There are over a dozen to choose from.
  2. Go to the Main Options panel. You'll see a list of options you can change. Play around with them, and see how the theme you selected changes. This may be enough to get a custom theme you like.
  3. If you have ad-sense code, or other code from a similar site, you can easily add it to your site in the Advanced Options panel.
  4. Finally, read the help page. There are lots of tips there, as well as fairly detailed explanations of exactly which CSS rules TTW supports, and hints on how to go beyond the basics and really customize your site.

Design Hints

This section has a few hints on designing your own theme.

Latest Help Info

This help document is current as of the time of the release of this version of Twenty Ten Weaver. The latest revisions of this help page can be found at Twenty Ten Weaver Help.

Choosing Colors

Good themes use related colors. Many times (but not always), when you look at the Main Options page, you'll notice that all the colors of the should "look good". They don't have to, but having a nicely matching set of colors.

The color picker has an interesting feature. Once you pick a color from the left section, the right bar shows different brightness levels of that color. This is especially useful for making a color lighter or darker.

Some themes use the same colors for all links, some vary. But using the same link hover color for all the different kind of links lends consistency to your theme. The same is true for the other colors - try for a consistent look in your theme.

Testing

There a a couple of tricks that can help make testing you theme easier. First is the preview window at the bottom of the theme settings tabs. However, you might find it easier to open a new tab in your browser. Open the theme admin page on one tab, and the main site on the other. After you make a change (and save them), you can toggle to the second tab and refresh the page.

Another important thing is to change just one thing at a time. This may seem to take longer, but you will really be able to see the effect of your change this way and be sure it does what you want.

Saving Option Settings

After you make any changes to the values of the Main or Advanced Options, you must save your changes. If you navigate away from the design tabs without first saving your values, everything will be lost. This is typical behavior for most Wordpress settings screens.

After you save your settings, the preview window at the bottom of the Twenty Ten Weaver admin page will be updated to show the effects of your settings.

Saving Your Own Theme

Once you have a design you like, you can click the "Save in My Saved Theme" button near the bottom of the Main Options tab to save your theme. You restore that saved theme by selecting it from the Sub-Theme list. Your saved theme will then overwrite all options, including the Advanced Options. This is the one way to preserve all your work, so when you get something you like, save it. You can then fiddle and fine tune more without losing your previous work.

Sidebar and Content Widths

This table gives the maximum width of the usable areas of sidebars and other areas depending on which sidebar scheme you've selected - using the standard width of 940px. Usable area is the maximum width of an image you could put in the area and still maintain the appropriate margins in area.

  Content Content
(single col)		 Primary
Widget Area		 Secondary
Widget Area		 Footer
Widget Areas		 Top/Bottom
Widget Areas
Default sidebar
1 right		 670px 800px 210px 210px 220px 570px
Right sidebar
wider		 590px 800px 290px 290px 220px 510px
One Left 630px 800px 210px 210px 220px 590px

Two sidebars
left and right

 460px 800px 200px 200px 220px 390px

Two sidebars
right side

 490px 800px 210px 160px 220px 410px
Two sidebars
left side		 500px 800px 205px 160px 220px 410px
No sidebars 860px 800px n/a n/a 220px 790px

(Note: it is mostly because of all the different sidebar choices that TTW does not let you change the overall width of the theme. The inter-relationships of the different sidebars are too complex to allow both different sidebar arrangements and a total width option.)

Twenty Ten Predefined Sub-Themes

TTW comes with over a dozen predefined themes. You can use them as-is, or as a starting point for your own designs. When you select a new sub-theme, all the options values from the Twenty Ten Weaver Main Options are cleared and set to the new values of the sub-theme. Most of the Advanced Options are not changed - except the Special Overrides are set to the values required by the new sub-theme.

Twenty Ten Weaver Main Options

This document gives some hints for using TTW, as well as describing some of the technical aspects used to develop the theme. The things you can control have been divided into

Advanced Note: Included at the end of each description is some CSS code contained in {braces}. This information includes which CSS style rules are used to control the desired attribute. This information can be useful for those of you who know a little CSS. For example, all the link attributes use some form of the "a" tag. You can add underlining or change font style of links by adding an appropriate CSS style entry to the <HEAD> section of the advanced options.

Header Options

Menu Bar:  Color of the main menu bar. {#access}
Menu Bar hover BG:  Color of the menu item and drop down background when hover over item. {#access li:hover > a, #access ul ul:hover > a}
Menu Bar text:  Color of the main menu bar text item when not hovering {#access a}
Menu Bar text hover:  Color of the main menu bar text item when hovering or current page {#access ul ul a, #access li:hover > a, #access ul ul:hover > a}
Bold Menu Text:  Check to use bold font style for menu text. {#access, #access li ul ul a}
Move Menu to Top:  Move the menu to above the image. {#header, #access, #site-title}
Larger Site Tagline:  Check to make site Tagline larger. {#site-description}
Hide Site Title and Tagline:  Check to hide display of Site Title and Tagline {#branding, #site-description, #site-title }
Header Image Height:  Change the default height of the Header Image (use 0 to HIDE image). Upload new image in Appearance -> Header after changing height. { }
Space After Header:  Change the space between Header and Body (specify space in px, but just give number, no px). {#main}

General Appearance

Main Sidebars:  Choices for one on right (default), one on left, 3 varieties of two sidebars, or none. {#container, #content, #primary, #secondary}
Content Font:  Font used for main site content. {body, input, textarea, .page-title span, .pingback a.url}
Smaller Content Font:  Make font of article and post text a bit smaller. {#content, #comments}
Titles Font:  Font used for titles, labels, and other text. {h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar,
.comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget_search label, .widget-title, input[type=submit]}
Bar under Titles:  Enter size in px (just value, no px) if you want a bar under Titles. Leave 0 for no bar. {.entry-title}
Bar under Widget Titles:  Enter size in px (just value, no px) if you want a bar under Widget Titles. Leave 0 for no bar. {.widget-title}
Rounded Corners:  Check to use rounded corners for main area and colored sidebars. {#content, #wrapper, #primary, #secondary}
Area Border:  Check to include border around main area and colored sidebars. {#wrapper, #primary, #secondary}
Header/Footer Border:  Color of the border around the header image and above the footer area. {#branding img, #colophon}
<HR> color:  Color of horizontal (<hr>) lines in posts and pages. {hr}

Theme Text Colors

Blog Title:  Color of the blog's main title in header. {#site-title a }
Header text:  Default color for headers and other text not otherwise specified. {#content strong, #content b, #content dt, #content th',#content h1, #content h2, #content h3, #content h4, #content h5, #content h6, h1, h2, h3, h4, h5, h6, .page-title, #content .entry-title, .page-link, #entry-author-info h2, h3#comments-title, h3#reply-title, .comment-author cite, .entry-content fieldset legend }
Content text:  Color for main blog and article content. {#content, #content input, #content textarea}
Widget Title:  Color for Widget titles and labels. {.widget-title, .widget_search label, #wp-calendar caption}
Widget text:  Color for widget content. {body, input, textarea}
Standard Link:  Color for most links. {a:link}
Standard Link Visited:  Color for links that have been visited. {a:visited}
Standard Link Hover:  Color for links when hovering. {a:active, a:hover}
Widget Link:  Color for links in widgets (uses Standard Link colors if left to default color). {#primary a:link, #secondary a:link, #footer-widget-area a:link}
Widget Link Visited:  Color for widget links that have been visited. {#primary a:visited, #secondary a:visited, #footer-widget-area a:visited}
Widget Link Hover:  Color for widget links when hovering. {#primary a:hover, #secondary a:hover, #footer-widget-area a:hover}
Post Entry Title Link:  Post entry title link color (blog entry titles are links). {.entry-title a:link, .widget_rss a.rsswidget:link}
Post Entry Title Link Visited:  Post entry title links that have been visited. {.entry-title a:visited, .widget_rss a.rsswidget:visited}
Post Entry Title Link Hover:  Post entry title for links when hovering. {.entry-title a:active, .entry-title a:hover, .widget_rss a.rsswidget:active, .widget_rss a.rsswidget:hover}
Information text:  Color for secondary and information text like dates and small labels. {#comments .pingback p, #respond label, #respond dt, #respond dd, .entry-meta, .entry-content label, .entry-utility, #content .wp-caption, #content .gallery .gallery-caption, .navigation}
Information Link:  Links in secondary and information text like dates and small labels. {.page-title a:link, .entry-meta a:link, .entry-utility a:link, .navigation a:link, .comment-meta a:link, .reply a:link, a.comment-edit-link:link}
Information Link Visited:  Visited Information Links. {.page-title a:visited, .entry-meta a:visited, .entry-utility a:visited, .navigation a:visited, .comment-meta a:visited, .reply a:visited, a.comment-edit-link:visited}
Information Link Hover:  Hovering on Information links. {.page-title a:active, .page-title a:hover, .entry-meta a:hover, .entry-meta a:active', .entry-utility a:hover, .entry-utility a:active, .navigation a:active, .navigation a:hover, .comment-meta a:active, .comment-meta a:hover, .reply a:active, a.comment-edit-link:active, .reply a:hover, a.comment-edit-link:hover}

Theme Background Colors

Wrapper Page BG:  Background for total wrapper - everything inside outer BG - use Appearance->Background to change outer background. {#wrapper}
Main Area BG:  Background for main page wrapper - wraps content and sidebars (uses wrapper bg if not set). {#main}
Content BG:  Background for post and page content area (uses main bg if not set). {#container}
Primary Widget Area BG:  Background for the primary (#1 sidebar) widget area. {#primary}
Secondary Widget Area BG:  Background for the secondary (#2 sidebar) widget area. {#secondary}
Footer BG:  Background for the footer area. {#footer}

 

 

Twenty Ten Weaver Advanced Options

The Advanced Options page allows you to save pieces of HTML code required by third-party plugins and widgets. You can also use them to save Google Maps/Analytics/AdSense javascript snippets. You will need to understand a bit of HTML coding to used these fields effectively.

The values you put here are saved in the Wordpress database, and will survive theme upgrades and other changes. When you select a new sub-theme, all the Advanced Options are left untouched (except the Special Theme Overrides, which are set by the new sub-theme). However, if you pick "My Saved Theme", then all Advanced options are replaced. The idea is that you can use the Advanced Options to set up things you want, and try different sub-theme looks without losing your work. But if you restore "My Saved Theme", then you should get back what you really saved.

PLEASE NOTE: NO validation is made on the field values, so be careful not to paste invalid code. Invalid code is usually harmless, but it can make your site display incorrectly. If your site looks broken after you add stuff here, please double check that what you entered uses valid HTML commands. Also note that backslashes will be stripped.


Code entered in the <HEAD> box is included right before </HEAD> tag in your site. You can add custom CSS here to further enhance the look of your site. The section covering the various include sub-themes includes specific examples of CSS used to get a particular effect. Another use is for <META> tags for description or bot search terms. (This field is also useful for entering links to javascript files or anything else that belongs in the <HEAD>, but this use will be uncommon - usually you can find a WP Plugin to do what you need.)


This must be HTML markup code (including WP shortcodes), and will be inserted into the #branding div header area right above where the standard site header image goes. You can use it for logos, better site name text - whatever. When used in combination with hiding the site title, header image, and the menu, you can design a completely custom header.

Note that this code will be after or before the default Primary menu depending on the move menu setting. You can completely replace the default menu (hide it), but you will have to hard-wire the links to pages in your replacement menu.

If you hide the title, image, and header, no other code is generated in the #branding div, so the code here can be a complete header replacement. You will almost certainly need to add some CSS style, too. (We've added a class called ttw-center which you can use to div-wrap your insert code to center it:
<div class="ttw-center">[shortcode]</div>)

You can also override the CSS #branding rule, create a new div, or use in-line styling. One of the most flexible capabilities of the section is the ability to embed Wordpress shortcodes. This might be most useful for adding a rotating header image using a plugin such as Meteor Slides or WP-Cycle.

For example, assume you've installed the Meteor Slides plugin, and have uploaded your rotating header images for the plugin to use. To add this slide show header image, you should first disable the default header image by setting the header image size to zero in the Main Options tab. Then, add this code to the Site Header Insert Code box:

<div class="ttw-center">[meteor_slideshow]</div>

Note that the built-in ttw-center CSS class will ensure the slide show is displayed properly. Without appropriate CSS styling, you may get unexpected placement of the plugin output. The ttw-center class will usually do what you want.


This code will be inserted into the site footer area, right before the before the "Powered by" credits, but after any Footer widgets. This could include extra information, visit counters, etc. You can use HTML here, so include style tags if you want! And like the Site Header Insert Code section, you can also use shortcodes.



This code is inserted right before the closing </body> tag. This is the best place for your Google analytics code other final code that is not usually displayed.



The entries in this field are usually generated by some of the example themes provided with Twenty Ten Weaver. You can fiddle with them, but it is generally better to use the regular <HEAD> overrides. (Note: this code is included before the standard <HEAD> section code above.)

Twenty Ten Weaver Advanced Topics

Custom Menus

One of the new features included with Wordpress 3 is support for custom menus. By using the Appearance->Menus panel, you can create a menu completely under your control. While the standard Twenty Ten only supports one custom menu, Weaver supports two. If you have defined two custom menus, they will be placed above and below the site header image.

Custom Menus can let you really customize site navigation. One typical use of multiple menus is one for pages, the other organized by category or tags. But you have complete control. However, which menus show can be a bit confusing. There are three specific cases of specifying menus that are most likely to be useful:

  1. No Custom Menus Defined
    This might be the most common case. If you don't use the Menus panel, and don't define any custom menus, then the theme will automatically generate a menu based on your pages (including Home) using the page order defined in the page editor when you create pages. This is the legacy method, and works fine for many situations.

  2. Defining One or Two Custom Menus
    You can also define one or two custom menus. The two menus supported by Weaver are called the Primary and Secondary Menus. If you define a Primary Menu, then it will be the main menu bar normally under the Header Image. If you don't define a Secondary menu, then only one will be displayed. If you define the Secondary Menu, then it will normally be displayed above the Header Image. You can switch the order of the two menus either using the Main Options tab, or by switching the order in the Menus panel.

    Normally, both menu bars will use the same menu bar color scheme. When you've selected the rounded area option, the top menu bar will have the top edge rounded, and the bottom menu bar the lower edge rounded. This look great with a square Header Image.

    You can use CSS snippets to change the color of the Secondary menu bar - it uses #access2 for its CSS tags.

  3. Define Only Secondary Custom Menu
    If you define only the Secondary Menu and leave the Primary Navigation theme location blank, then Weave will display two menu bars - the Secondary Menu bar on top as you defined, and the default menu with pages (as discussed in #1 above) on the bottom menu bar.

Miscellaneous Notes

Technical Notes

The Twenty Ten Weaver theme is a child theme of the Twenty Ten theme now standard for Wordpress 3. As this theme is currently implemented, all the changes you can make to the default Twenty Ten theme are accomplished using CSS style rules. Don't worry - you don't have to know them to use the options panel of TTW. But that does mean that there is nothing you can do about the order that the content is generated by the parent theme. But mostly that doesn't matter - the parent theme has made many very good choices on how it generates site content.

Twenty Ten HTML <div> Hierarchy

The Twenty Ten theme generates content that is wrapped in HTML <div>'s with a set of conventional names. A typical site page will have the following hierarchy. Knowing this can help you make additional custom modifications. (Another useful thing to do is to use the "View Document Source" option of your web browser to see the actual HTML generated by Wordpress for your site content.)

wrapper
	header
		masthead

   main
	    container
			content
				comments

		primary
		secondary
	footer
		colophon

 

Notes on Example Themes

Here are some notes to discuss some of the special CSS rules that were added to give the sub-themes a better look, as well as other aspects of the designs. Note that this code is part of the internal theme definition, but is displayed in the Special Theme <HEAD> Section Overrides section of the Advanced Options panel. You can accomplish similar effects by adding rules to the <HEAD> section. It is better not to use the Special Theme section since that gets replaced if you select a new theme. Code in the <HEAD> section is preserved.

Dark - 2 Left Sidebars

This theme add a very simple rule that is used in some of the other themes - it adds some space below the widget title. You can use the same style name to change the font style, add a box, or whatever. But adding space seems to help the look of some themes. 

.widget-title {margin-bottom:10px;}

Blue

This style rule adds some space to the top of the content box to make the theme look a bit better.

#content{padding-top:15px;}

Dark with Green

This makes a couple of things italic, and adds some padding to the top of the content box.

.entry-title {font-style:italic;}
#content{padding-top:15px;}
#branding h1 {font-style:italic;}

Reds

The Reds theme uses several CSS styles to help give it its look. The ones with border values add the white bars. The #branding rules add the right color at the top. And we add some italic. 

#main{border-top-style:solid; border-top-width: 5px; border-top-color: #FFFFFF;}
#primary{border-left-style:solid; border-left-width: 5px; border-left-color: #FFFFFF;padding-top:10px;}
#content{padding-top: 10px}
#secondary{border-left-style:solid; border-left-width: 5px; border-left-color: #FFFFFF;}
.widget-title {margin-bottom:12px;}
#branding{background-color:#660000;}
#branding a{margin-left:15px;font-style:italic;}
#content h2, #content h1{font-style:italic;}

Tan and Gray

We use the #header rule to fix the color at the top. We add some padding to the site title, and fiddle with margins in the footer. We make the blog post titles bigger. 

#header{background-color:#9D8851;}
#content{padding-top:15px;}
.entry-title h1,.entry-title a{font-size:30px;font-weight:normal;line-height:35px;}
.widget-title {font-size:30px;font-weight:normal;line-height:35px;margin-bottom:5px;}
#colophon a{color:#333333;}#branding a{margin-left:15px;}
#footer-widget-area{margin-left:10px;}

Orange

This adjusts the widget titles, and add some padding and dotted borders. 

.widget-title {font-size:130%;margin-bottom:8px;border-bottom: 1px dotted #C4BCB0;}
#content p{padding-left:15px;}
#content .post {border-top: 1px dotted #DBD2C4;border-bottom: 1px dotted #C4BCB0;margin-bottom:10px;}

Simple Silver

These two rules add the boxes around the post information. Note that the post information comes partly at the top and partly at the bottom of the post content. Many themes combine this information into one section, but Twenty Ten has the information split around the post. Changing this would require more than simple style rule changes.

.entry-meta {padding:4px 0 4px 20px;background-color:#F8F8F8; border: solid 1px #A0A0A0;font-style:bold;}
.entry-utility {padding:4px 0 4px 20px;background-color:#C0C0C0; border: solid 1px #A0A0A0;font-style:bold;}

 

Ivory Drive example notes

The Ivory Drive example is based on the web site of Ivory Drive (IvoryDrive.com). As is the case with several of the example themes, you have to set the header in the Appearance Admin menu to the Ivory Drive header.

This example has a couple of interesting items. First, the header image was crafted to fit with the left-hand sidebar. The left hand sidebar is 240px wide, so the band photo on the left was made to be 240px. This led to a header image height of 167px. So as you can see from this example, it is possible to craft a special header image that corresponds to the settings of the rest of your theme.

We use the {.widget-title} style to override the color of the bar under the widget titles. Here's the code:

.widget-title {border-bottom: 2px solid #737373; font-variant: small-caps;}

 

More Help - Suggestions

The Twenty Ten Weaver page at WPWeaver.info allows comments. You can leave questions or comments there. No promises on how quickly you will get a response, however. I have a lot of other projects going, and travel some, so I might not get a chance to respond immediately, but I will try. If this theme becomes popular, I might create a support forum for it. But for now - just comments.

Thanks for checking out Twenty Ten Weaver. Hope you create a beautiful Wordpress theme with it!