quirm.net » css

Category Specific Feed Lists in WordPress

Mel — Thu, 16 Oct 2008 12:20:40 +0000

On larger WordPress blogs, it make sense to offer category specific news feeds so that users can subscribe to just the topics that they are interested in. There are already a couple of solutions out there that can help achieve this using either plugins or making use of wp_list_categories. However, I wasn’t happy with either option. Installing a plugin to create a single page seems like overkill to me whilst the wp_list_categories approach has its own problems.

The Problems

wp_list_categories will always output a link to the categories themselves. On a page that was supposed to just list news feeds, I felt that could create confusion.
It’s difficult to style the RSS links to use icons via CSS — which is useful if you want to create rollover effects.
wp_list_categories used with the feed and/or feed_image parameters outputs the two links with only whites pace separating them. That can cause problems for some user agents.
Even if you make use of both feed and feed_image to provide a text alternative if images are disabled or not accessible, you can only specify a single string for the feed attribute which means that all of the RSS links have identical text. Not good for accessibility or Search Engine Optimisation (SEO).

The Code

I needed a way to simply grab all of the data relating to top level categories and then use it to fashion the links in the manner that I wanted. This is what I came up with:


'.$mycat->name.'';
	echo $myitem;
}
?>

I then dropped the code into a specific page template (and, no, it shouldn’t be inside The Loop), created a new page called “News Feeds” using this template which resulted in the following:

Styling The List

Now to add some icons via CSS.

I created two 16px x 16px rss icons in different colours to represent the ‘on’ and ‘off’ states and dropped them into the images directory of the theme. I then added the following CSS:


.rss-feeds {
	margin:20px 0 0;
	padding:0;
}
.rss-feeds li {
	list-style:none;
	list-style-image:none;
}
.rss-feeds li a {
	padding-left:25px;
	background:url(images/tiny-rss.png) no-repeat top left;
}
.rss-feeds li a:hover,.rss-feeds li a:active,.rss-feeds li a:focus {
	background:url(images/tiny-rss-on.png) no-repeat top left;
}

The End Result

A nicely formatted list of RSS feed links with CSS rollover effects that work with images off or on.

CSS Selectors

rich — Thu, 02 Oct 2008 13:13:42 +0000

In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns are called selectors and may range from simple element names to complex patterns. If all conditions in the pattern are true for a certain element, the selector matches the element and the appropriate style will be applied when the element is rendered in a CSS-capable browser.

Summary of CSS2 Selector Syntax
Pattern	Meaning	Selector Type
*	Matches any element.	Universal selector
E	Matches any E element (eg `h2`,`span`)	Type selector
E F	Matches any F element that is a descendant of an E element	Descendant selector
E > F	Matches any F element that is a child of an element E	Child selector
E + F	Matches any F element immediately preceded by an element E	Adjacent selector
E[foo]	Matches any E element with the “foo” attribute set (whatever the value)	Attribute selector
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”	Attribute selector
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”	Attribute selector
E[lang\|="en"]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.	Attribute selector
DIV.warning	The same as DIV[class~="warning"]	Class selector
E#myid	Matches any E element ID equal to “myid”.	ID selector
E:first-child ^[1]	Matches element E when E is the first child of its parent	Pseudo-class
:first-line ^[1]	Applies style to the first formatted line of a paragraph	Pseudo-class
:first-letter ^[1]	May be used for “initial caps” and “drop caps”, which are common typographical effects	Pseudo-class
E:active E:hover E:focus	Matches E during certain user actions	Dynamic pseudo-class
:before ^[2] :after ^[2]	Can be used to insert generated content before or after an element’s content	Dynamic pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)	Link pseudo-class
E:lang(c)	Matches element of type E if it is in (human) language ‘c’ (the document language specifies how language is determined)	:lang() pseudo-class

Not currently supported by most browsers.
Not supported by Internet Explorer 6.

CSS Usage

rich — Thu, 02 Oct 2008 13:11:38 +0000

Overview

There are three ways of inserting style information:

In the header of a given HTML page (Internal Style)
Within a given tag (Inline Style)
In an separate file which is then linked to the HTML page by a reference in the page header (External Style)

External Style Sheets

External style sheets are the best method when you want the style to be applied to many pages. With an external style sheet, you can change the look of an entire web site by changing one external style sheet file. Each HTML document that you want to apply these styles to must contain a link to the style sheet using the tag inside the section:

...

The browser will read the style definitions from the file mystyle.css, and format the HTML document accordingly.

An external style sheet can be written in any text editor and saved with a .css extension.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the section by using the

The browser will now read the style definitions, and format the document according to it. If the document also contains a link to an external style sheet, the internal style declarations will over-ride any similar declarations within the external sheet.

This can be helful when you wish to re-adjust the style of a single page – for example, alter the padding on the body tag.

Inline Style

An inline style loses many of the advantages of style sheets by mixing content with presentation.

Therefore, you should use this method sparingly, such as when a style is to be applied to a single occurrence of an element.

To use inline styles, you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font-style and the left margin of a paragraph:


This is a paragraph

Inline style will overide both internal and external style declarations.

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the final value will be inherited according to the rules of Cascading Style

For example, an external style sheet has these properties for the h2 selector:

h2 {text-align: left; font-style: italic; font-size: 200%;}

And an internal style sheet has these properties for the h2 selector:

h2 {text-align: right; font-size: 100%;}

And an inline style declaration reads:

...

The final values will be:

text-align: right (from the internal style sheet over-riding the external sheet)
font-style: italic (from the external sheet)
font-size: 80% (from the inline style over-riding both the external and internal declarations for font-size)

Useful Resources

W3C Online CSS Validator

CSS Syntax

rich — Thu, 02 Oct 2008 13:00:43 +0000

Selectors, properties & values

CSS syntax is made up of three parts:

selector (often the HTML element you wish to style)
property (the attribute you wish to change eg. background colour)
value (eg. the colour you want your background to be)

The way in which these are used is:

selector {property: value;}

You don’t have to have each property/value pair on a separate line but it does increase readability – especially in long, complex style sheets.

For example, to set a black background, you would use:

body {background: #000000;}

where #000000 is the hexadecimal code for black.

If the value you want to use contains white space multiple words, put quotes around the value:

p {font-family: 'sans serif';}

You can specify more than one property in a given declaration. The example below shows how to define a center aligned paragraph of italicised text.

p {text-align:center; font-style: italic;}

You can group selectors by separate them with commas.

In the example below, all the header elements have been defined as white:

h1,h2,h2,h4,h5,h6 {color: #ffffff;}

However, whenever you do define a text colour, it is advisable to also define a background colour and vice versa. This can ensure that your text remain readable.

h1,h2,h2,h4,h5,h6 {color: #ffffff; background: #000000;}

Now your white header text will always be on a black background – even if the rest of your page
has a white background.

The class selector

With the class selector you can define different styles for the same type of HTML element.

For example, you want two types of paragraphs in your document: one italicised and one bold.

p.italic {font-style: italic;}
p.bold{font-weight: bold;}

Now, when you want to use either of the above styles in a web page, you can do the following

This paragraph will be in italics.
This paragraph will be bold.

However, you can only use one ‘class’ declaration per HTML element at any one time! The example below is the wrong way of trying to get bold, italicised, text:

This text is bold and italic.

The correct method would be to define a third class selector.

p.bold-italic {font-style: italic; font-weight: bold;}

And then use:

This text is bold and italic.

Or you could use:

This text is bold and italic.

Making selector classes available to multiple HTML elements

If you omit the tag name in a selector, you open it up to be used by any HTML element.

For example, the following class:

.center {text-align: center;}

can be used with any tag as appropriate.

...
...
...
...

can all be used in the same document.

Use class selectors where you think you will need to re-apply the same style more than once in a
given document.

If you think that you will need to use the style with different HTML elements, don’t include any
tag names in the class selector declaration.

The id selector

The id selector is different from the class selector.

While a class selector may be applied to many elements in a given document, an id selector can only be applied to only one element within a given document ie. it must be unique within the document.

The style rule below will match a p element that has the id value ‘para1′:

p#para1 {text-align: center; color: #ff0000; background: #000000;}

The style rule below will match the first element that has the id value ‘green’:

#green {color: 00ff00;background: #000000;}

So you could have:

...
...
...

in the same document.

But having:

...
...
...

would be illegal as you would have attempted to repeat the id selector ‘#green’.

Use id selectors for styles that you are sure you’ll only need once in a given document.

CSS Comments

You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date.

Comments are ignored by the browser and begin with “/*”, and ends with “*/”.

/* This is a comment */
p {text-align: center;}
/* This is another comment */
h1 {background: #ffffff; color: #000000;}

CSS Basics

rich — Thu, 02 Oct 2008 12:57:03 +0000

What is CSS?

CSS stands for Cascading Style Sheets.

A style defines how an HTML element is displayed.

Style information can be stored:

In the header of a given HTML page (Internal Style)
Within a given tag (Inline style)
In a separate file which is then linked to the HTML page by a reference in the page header (External style)

Why use CSS?

A web page consists of two basic components – the Content (or information you wish to display) and the Style (the way if which you wish the content to be displayed).

CSS allows you to separate Content from Style. It’s even possible to have more than one style sheet – thus allowing you to have more than one way of displaying a page.

If all of the style information is retained within one external style sheet, it is possible to edit that one file and make sweeping changes (such as changing background and/or text colours) that affect hundreds of related web pages without having to touch a single HTML file

You can define a style for any HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all relevant elements on every page are affected automatically.

Multiple Styles Cascade Into One

Since you can specify CSS information in a number of ways, it is possible to utilise all three CSS methods as required. When you do utilise more than one CSS methodology (eg. using both external and inline style on the one web page), the multiple styles will cascade. This means that they will merge together to form a complete ‘virtual’ set of style instructions.

Generally speaking, styles using the following rules in descending priority:

Inline Style (inside HTML element)
Internal Style Sheet (inside the tag)
External Style Sheet
Browser default style

So, an inline style declaration has the highest priority and will override any declared internal or external style for the same HTML element and any default style properties normally applied by the browser.