• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Styling Widgets with CSS

This section is for those who want advanced capabilities to further tweak the look of their SmartLink Widget. You can customize your widget to match the look and feel of your blog or website by simply including a stylesheet and tweak the colors, sizes, and borders to your liking.

Click here if you're styling a SmartLink List and click here if you're styling a SmartLink Grid.

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%2Fmovies& 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 background color of the widget, add a #smartLinkListSTYLEID block.

#smartLinkListSTYLEID {

background-color: #CCCCCC !important;

}



To change the color or background of the title links, add a #smartLinkListSTYLEID a style block.

#smartLinkListSTYLEID a{

color: black !important;

background-color: #CCCCCC !important;

}



To change the color of the description text, add a #smartLinkListSTYLEID-description style block.

#smartLinkListSTYLEID-description{

color: black !important;

}



To vary the size of the image thumbnails, add a #smartLinkListSTYLEID-thumb style block. Then change the width property.

#smartLinkListSTYLEID-thumb{

width:80px !important;

max-width:80px !important;

}

Example: SmartLink Grid 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%2Fmovies& skin=white&width=200&numItems=4&type=grid&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 background color of the widget, add a #smartLinkGridSTYLEID block.

#smartLinkGridSTYLEID {

background-color: #CCCCCC !important;

}



To change the color or background of the title links, add a #smartLinkGridSTYLEID a style block.

#smartLinkGridSTYLEID a{

color: black !important;

background-color: #CCCCCC !important;

}