I'm just starting to work with CSS. Customizing my blog has been a good learning experience. If you'd like to try some customizing and need more help, leave a comment under the entry. If you have something in mind not covered here, post it under 'How Do I ....?'. Maybe we can figure it out together. -chris

a one celled table with a border and background image

a one celled table with a border and background color

Add an icon to side panel links
Mood:  special
Template: 'Advanced Customization' ---> 'Links on Main page (link.btpl)'
Topic: Link Tricks
An easy effect. Add a single icon to GROUPs one, two, three etc. side panel links. A small image about 16x16 pixels works best. The height of the image is most important. Try to use an image under 24 pixels in height. Tall images will increase the line spacing of your link text. Emoticon gifs uploaded to your account work well if you need an image.

Once your image is uploaded to your account, find and copy it's full http:// URL and paste it into Notepad or SimpleText. Use the URL to write an <img src> tag for your image.

<img src='http://your_image_URL' height='xx' width='xx' border='0' alt='blog link icon'>

Click 'Advanced Customization' at the bottom of the main 'Manage your Blog' control panel. Click the radio button next to 'Links on Main page template (link.btpl)'. Scroll to the bottom of the page and click 'Edit'.


Look for the following code shown here in red ......

<BLOG_LOOP LINKS><A HREF="<BLOG_VAR url>" class="panelLinks">

You'll insert the <img src> tag directly after <BLOG_LOOP LINKS> so it looks something like this.......

<BLOG_LOOP LINKS>
<img src='image_URL' height='16' width='16' border='0' align='bottom' alt='blog link icon'>
<A HREF="<BLOG_VAR url>" class="panelLinks">

Press the 'Preview' button to see what it will look like. If you like it click 'Save'. If not, just click 'Cancel' to start over and try again.

No changes will take effect until you 'Save' and also 'Publish' the changes from the main template list screen.

Here's some emoticon gifs to copy and try.




Each template may vary. If you can't find where to put your image code or need more help, post a comment with the name of the blog template design you're using.

Change Link Color on Mouse Hover
Mood:  sharp
Template: Stylesheet (style.btpl)
Topic: Link Tricks
'Advanced Customization' ---> Stylesheet (style.btpl)

Another easy one. Read the previous blog entry for more detail on link classes and 'flavors' if needed. Just change the word 'active' in the active link flavor to 'hover' in each class of links you want to change.

To add hover to the a.timeLink class....

a.timeLink:active {
color: #<BLOG_VAR LINK_COLOR>;
}

Becomes....
a.timeLink:hover {
color: #<BLOG_VAR LINK_COLOR>;
}


<BLOG_VAR LINK_COLOR> are the colors set in the 'Appearances' control panel. Make sure a different color is set for normal, active and visited links.

<BLOG_VAR LINK_COLOR> can be replaced in the stylesheet with a colorname or color hex number like this.....
color: #ffffcc;

or this.....
color: hotpink;

There's a link to a chart of accepted CSS colornames on the left side panel of this blog.

No underline links
Mood:  a-ok
Template: Stylesheet (style.btpl)
Topic: Link Tricks
'Advanced Customization' ---> Stylesheet (style.btpl)

Easy once you know where to look

There are several areas that control links from the stylesheet. Each link type or 'class' controls a specific type of link. You can remove underlines from any or all of the specific link classes.

link classes on style.btpl ......

'a' - default - controls most links not on the side panel
'a.panelLinks' - controls links on the side panel
'a.timeLink' - controls the links 'post your comment' and 'link to this post'

Each class comes in several link 'flavors' - default, 'visited', and 'active'. Each flavor within the class will need to be editted to remove underlines from links in all states.

The code itself is simple and is added to each flavor of link you want to change.

text-decoration: none;

Add text-decoration: none; to each link class and state you want to change

The code to remove underlines from all flavors of the default 'a' class would look like this

a:link {
color: #<BLOG_VAR LINK_COLOR>;
text-decoration: none;
}

a:visited {
color: #<BLOG_VAR VIS_LINK_COLOR>;
text-decoration: none;
}

a:active {
color: #<BLOG_VAR ACT_LINK_COLOR>;
text-decoration: none;
}

There are many more css text and font styles you can add. Here's a site with short tutorials and an online practice editor.
CSS font styles with a practice editor

Add a logo to the upper side panel
Mood:  special
Template: Main page layout (index.btpl)
Topic: Add a Logo
'Advanced Customization' ---> 'Main page layout (index.btpl)'

You'll need a .jpg or .gif image about 120 pixels wide which will fit most of the blog template side panels. More inside the fridge --->

Custom Help
Mood:  quizzical
Topic: How Do I ....?
If you have a custom effect in mind but can't find how to do it, post it here as a comment and I'll try to help. Include the name of the blog template design you're using.

back dated entry
back dated entry posted 2.23.06 but used date options to backdate 3 years.

same thing
2.23.06