• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Styling a SmartLinks List

You can customize your SmartLinks list to match the look and feel of your blog, website, or social networking profile. Simply include a stylesheet and tweak the colors, sizes, and borders to your liking.

Example: SmartLinks List CSS

• Add a #smartLinkList style block either in your css file or directly in your HTML file. The following example shows all the styling possibilities. You can choose to customize some, all, or none at all.
• Padding sets the amount of spacing between the edge of the container and to the actual list. You can choose to set all borders equally or set them separately using padding-top, padding-bottom, padding-right, and padding-left.
• Width is the width of the container.
• Background-color is the color of the container.
• The varying font properties can be set as shown below.
#smartLinkList{
padding:10px;
width:150px;
background-color: #DDDDDD;
font-family: Verdana, sans-serif;
font-style: bold;
font-size: 10px;
}

• Each item is housed as an entry. To enforce the spacing between each entry, add a #smartLinkEntry style block.
• Then constrain the padding.
#smartLinkEntry{
padding-top: 10px;
padding-bottom: 10px;
}
• To include the description of the item, add a #smartLinkList-description style block.
• Then change the display property. Note you must add the !important declaration.
#smartLinkList-description{
display:block !important;
}

To change the color of the title links, add a #smartLinkList a style block.

#smartLinkList a{

color: red;

}



To vary the size of the image thumbnails, add a #smartLinkList-thumb style block.

Then change the width property. Note you must add the !important declaration.

#smartLinkList-thumb{

width:80px !important;

}