Styling a SmartLinks Grid

You can customize your SmartLinks grid 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 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%2Fbooks& skin=white&width=400&numItems=4&type=grid&columns=4&&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 grid, add a #smartLinkGrid style block. Alternatively you can wrap the SmartLink feed HTML in <div style="width:400px;"></div> tags.

#smartLinkGridSTYLEID {

width: 450px;

}



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

#smartLinkGridSTYLEID a{

color: red;

}



Each item is housed in a cell with default width: 80px; height: 150px;. To change the size of each item in the grid, add a #smartLinkCell style block. The image of each item will adjust accordingly.

#smartLinkCellSTYLEID{

width: 120px !important;

height: 160px !important;

}