Customizing your Faves Widget using CSS

You can customize the appearance of your Faves widget using CSS. This is more work but gives you much finer control over the appearance of the widget on your site.

To embed your widget on your site and edit it's styles use the following steps:

1. Go to the Faves widget designer at http:faves.com/widget and select the "No Style" theme.
   
2. Copy the code snippet from the widget page.
3. Paste the code snippet into your site. For example, if you are using Blogger then choose "Layout" then click on "Add Page Element". Click on the "Add to Blog" button under the "HTML/Javavscript" heading. Do not add a title but paste the code snippet you copied into the Content panel and click on "Save Changes".
4. Preview your site to see if you need to make any changes in the appearance of the widget. If it looks good then you're done!
   
5. To add CSS rules go to your Styles template and insert them there. For example, if you are using Blogger then select "Edit HTML" from the Layout screen. You'll see all your other CSS rules there. Just add the new rules immediately following the CSS rules that are already there.
6. Go to step 4.

Writing your CSS style rules:

To write your own rules you'll need to know how to select the elements within the widget. All Faves widgets share the following HTML structure:

<div class='favesWidget'>

<h2>Widget Header Title</h2>
<ul>

<li>

<h3><a><span>Fave Image</span>Fave Title</a></h3>
<div><img src='User Picture' />User Name</div>
<p>Fave Note Text</p>

</li>
...

</ul>
<div class='favesFooter'>

<a>More and Get Your Own Links</a>

</div>

</div>

You can use the following CSS selectors to add styles to an element of the Faves widget:

.favesWidget h2	The widget header
.favesWidget h3	The fave title
.favesWidget li div	The user name
.favesWidget li p	The fave note text
.favesWidget ul	The body of the widget containing all the faves
.favesWidget .favesFooter	The widget footer

For example if you wanted to make your header white with a blue border and blue text you would add the following rule to your template:

.favesWidget h2 { background: white; border: 1px solid blue; color: blue; }