Weaver's CSS Help
Contents
- Basic Introduction to CSS
- More CSS Info: w3schools.com
- Styling Weaver Elements
- Text Elements
- Link Elements
- Menu Elements
- Area Elements
- Borders and Other Elements
- Special Weaver CSS Elements
- More About Styling
Basic Introduction to CSS
CSS stands for Cascading Style Sheets. CSS is used to style different elements on your web page. When using Weaver, virtually every single different element - Site Title, Page Titles, Widget text, links, content area, widget areas, and so on - has the way it looks on the page controlled by a style rule. Every style rule has a name and some parameters that tell your browser how to display that item. When you pick a Weaver subtheme, or change one of the "checkbox" settings from the Main Options tab, you are really specifying a particular set of CSS rules that give the specified look.
In addition to the pre-defined themes and Main Options, Weaver provides you with two different ways to customize your theme - the CSS slide-open box associated with many options on the Main Options tab, and the <HEAD> Section on the Advanced Options tab. The Snippets tab on the Weave admin page has information about using the <HEAD> Section, while this document will focus on the actual styling parameters you can use. It will be especially useful for using the CSS slide-open options, but can be helpful for writing full snippets as well.
What is the difference between writing a snippet for the <HEAD> Section, and adding some CSS using the slide-open CSS option? Basically, using the sliding CSS interface, you only need to pick a specific element from the Main Options page, and then add appropriate CSS styling parameters ( we'll get to the specifics shortly ). With a <HEAD> Section snippet, you need to know the specific CSS class or id, as well as the styling parameter.
A simple example should clarify this. Each CSS rule has two parts: a name ( called the class/id ), and a list of one or more style parameters contained in braces ( {...} ). Each parameter is separated by a semi-colon ( ; ). Consider the Site Title that is included by default on every WordPress page. The site title is styled by a CSS rule with the name "#site-title". Suppose you wanted to make the site title be displayed in italics, and to be larger than the default size. This CSS rule would do that:
#site-title {font-style:italic; font-size:300%;}
Note the name: #site-title, and the style parameters: font-style:italic; font-size:300%;. All CSS rules follow this form. The names will most often begin with a hash ( # ), a period ( . ), or a letter, depending on a technical difference that is not critical at this point. Each of these names is associated with a specific element on your WordPress web page. The style parameters are derived from a very large list of specific possibilities ( e.g., font-style ), and usually include a value after a colon ( : ), again from a large list of specific possibilities ( e.g., italic ) or values ( e.g., 300%, but which include many other possible units ( e.g., px, em, and more ).
The fun and challenging part of styling your page is learning all the different possible parameters that can apply to a specific kind of element, and providing the exact styling parameter to achieve just what you want. A completely different challenge is to determine the name of a specific element you want. To use the <HEAD> Section and the snippets, you need to know the name. We know the name of the Site Title element ( #site-title ), and that it is a text based element ( different style parameters are available for different elements - text, links, boxes, images, areas, etc. ). The slide-open CSS interface available on the Main Options tab avoids the need to find out the specific name of an element - you can simply provide the parameters.
To summarize by example, if you wanted to style the Site Title as in the example using the <HEAD> Section, you would enter the following into the box between the <style> and </style> tags:
#site-title {font-style:italic; font-size:300%;}
If, on the other hand, you wanted to achieve the same effect using the Main Options tab, you would click on the [+] box after the color box on the "Site Title" line. An entry box will slide open, and there you can enter simply:
{font-style:italic; font-size:300%;}
Note that you don't need the name, just the style parameters enclosed in {braces}. The CSS slide-open interface is available for all the elements that have color boxes on the Main Options tab. Note that there are basically four kinds of elements that have color options: text elements, menu elements, link elements, and area elements ( areas with bg colors ). The following sections will discuss the kinds of style parameters that are most appropriate for each area, as well as a discussion of borders, which can be used for almost all elements.
By default, when you've added a CSS rule to a Main Options element, the value box will automatically be displayed. ( This applies also when a subtheme has added CSS element rules. ) There is an administrative option at the bottom of the Advanced Options tab that will let you hide CSS element slide-open rules.
More CSS Info: w3schools.com
The web site w3schools.com may be the most definitive web site with CSS information and tutorials. If you want to know all about CSS, start with this tutorial. There are also reference sections for most kinds of CSS parameters, and these will be links below in the appropriate areas. For a more complete introduction to CSS, start with the Basics at w3schools.com. More details, including a reference summary, are included in the other sections.
Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
Styling Weaver Elements
The following sections give a few details on each type of element found on the Main Options tab.
HINT: When you are trying to style a specific element, first note the original color, then change the element to a recognizable color ( red, for example ). Then save the options and view your page. The element you want to style should now be easy to find. Now make your style changes, and test after each change to see if you got what you wanted. It is always better to change only one thing at a time until you are sure you got what you wanted. Don't forget to change the element back to the original color!
Text Elements
The text elements include titles, content, post info, menu text, and the site title and description. You can specify specific font styles, background color, borders, decorations, and more, for text elements. Start with Styling Text.
Link Elements
Link elements can use the same kind of styling as text elements, plus some specific styling just for links. See Styling Links.
Menu Elements
The menu options in the Main Options tab were designed to give colors to the specific parts of a menu. Adding text decorations, spacing, padding, and link styles are common things to do with menus. Because of the interaction of the different menu elements, you will likely have to use a try and see what happened approach to getting what you want. Many of the items in the Box Model CSS section can be helpful with menu styling.
Area Elements
Area elements are mostly areas that include specific components - the entire site page, widget areas, and so on. One thing to note about areas is that some areas are nested inside of other areas, and that other specific elements of your site are included in areas. Because of the way CSS works, styling applied to an outer area will be inherited by elements contained within that area. For example, by styling the font of a widget area bg, all the text displayed in that widget area will use that font style. This can be an easy way to apply a consistent style to a large area without needing to style each element separately.
Borders and Other Elements
The CSS box model applies to most elements. For example, you can put a border with margins, padding, and a background color around Widget Titles, for example, to get interesting effects for your sidebars. Just how the borders, margins, and padding interact is somewhat complex, and often requires trial and error.
Special Weaver CSS Elements
Weaver has defined several special CSS id's and classes to help you style some of the more detailed elements on pages. These are elements that most people will find that the default styling is acceptable, and so did not warrant inclusion on the Main Options tab. These include things such as the "Older posts" and "Newer posts" links on blog pages, or the separate fields of the post meta info lines ( "Posted on", etc. ). These elements are described in the Snippets document ( click Snippets tab ).
More About Styling
Most of the time, you will be able to simply enter the style parameters in the slide-open box. You should include your rules inside {braces}, but if you forget, they will be added automatically.
Color vs. Background Color
The Main Options tab has options for setting two different kinds of color - the color of an element's text, and the color of an element's background. These were added to the interface mostly on the basis of the use of the element on a web page. In general, you can use the CSS slide-open option to add CSS parameters almost equally. The correct element will be styled. Text colors add a color style: {color: #FF0000;}, while the BG options style with: {background-color: #0000FF;}. A few options may represent the same element - with both a text color and a BG color - for the sake of convenience.
How Do I Do That?
This section contains some commonly used CSS rules that can be applied to almost any of the elements found on the Main Options tab. You can copy/paste most these examples as-is. Some will have values that can be adjusted in an obvious fashion. The styling parameters can be combined, e.g.: Bold-Italic - {font-style:italic;font-weight:bold;}
- Hide an Element: {display:none;}
- Italic text: {font-style:italic;}
- Bold text: {font-weight:bold;}
- Underlined text: {text-decoration:underline;}
( also: overline, line-through )
- Small Caps text: {font-variant:small-caps;}
- Font size: {font-size:medium;}
( also: x-small, small, large, x-large, xx-large, nnn%, and more )
- Font Family: {font-family:Times, serif;}
( many options for this! )
- Text color: {color:blue;}
( or #000000 hex value - style text on a BG element )
- Indent Text:{text-indent:50px;}
- BG color: {background-color:green;}
( or hex value - add a nice block bg to titles, for example. Use padding to leave padding. )
- Borders: {border-bottom: 1px solid black;}
( Many options. This example adds a bar under an element. See the w3schools Border page. )
- Box: {border: 1px solid blue;}
( or border-top, border-bottom, border-left, border-right )
- Padding: {padding: 10px;}
( or padding-top, etc. )
- Margins: {margin:10px;}
( or margin-top, etc. Margins and padding interact. )
- Width: {width:100px;}
There are, of course, many more things you can do with CSS, but you can do a lot with just the above style parameters. In fact, nearly all the effects found on the various Weave subthemes were accomplished using just the above style parameters.
Cascading Tags
And if you really understand CSS, please note that you can also add a cascaded tag to your rules for most of the elements supported. For example, suppose you've created a dark background for the footers, and your links don't show up properly. What you'd really like to do to avoid resorting to <HEAD> Section rules is add a style for anchor ( 'a' ) in the footer. You can do that by adding a style rule in the form 'a{color:#333333;}', which will cause the rule '#footer a{color:#333333;}' to be included in the generated style sheet. ( See the Tan and Gray subtheme for an example of this in action! )
CSS Help V 1.0 - 2/10/2011