Styling a SmartLink List

This section is for those who want advanced capabilities to further tweak the look of their SmartLink list widget.

You can customize your widget 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: SmartLink List CSS

• Add a styleId value to your HTML widget script. Use different style IDs if you have multiple widgets on a page.
<script src="http://s6.smrtlnks.com/users/GenerateBlueLinks.php?feedUrl= http%3A%2F%2Fs3.amazonaws.com%2Fblueorganizer%2Fbluefeeds%2Fbooks& skin=white&width=200&numItems=4&type=list&display=both&styleId=STYLEID" type="text/javascript"></script>
• Add all style blocks in your existing css file or directly in your HTML. To add it directly in your HTML, include a stylesheet block next to where you've pasted the SmartLink feed HTML.
<style type="text/css">

/* content goes here */
</style>
To set the width of the feed, add a #smartLinkList style block. Alternatively you can wrap the SmartLink feed HTML in <div style="width:200px;"></div> tags.

#smartLinkListSTYLEID {

width: 200px;

}



By default we display the description of each item in feed. If you don't want it included, add a #smartLinkList-description style block and change the display property.

#smartLinkListSTYLEID-description{

display:none;

}



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

#smartLinkListSTYLEID 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.

#smartLinkListSTYLEID-thumb{

width:80px !important;

}