Knowledgebase
How do I customize the look of the Link Box on my site?
Posted by Steve Little on 17 June 2010 09:13 AM
You have almost full control over the size and look of the TrafficSwarm Link Box, so you should be able to incorporate it into your site in an unlimited number of ways. You can specify the number of links to be displayed, the width of the Link Box, the text font, text size, text color, and background color.

Customization of the Link Box is accomplished by using CSS, or Cascading Style Sheets. Don't worry if you have no idea what this is ... because you don't need to understand it and we're going to tell you exactly how to customize your Link Box the way you want it, in 30 seconds or less.

In order to customize your Link Box, you simply need to add the following code in the "head" section of your web page. Just cut and paste the following anywhere between the and tags near the top of your HTML Code, then customize it however you want to fit your site.

gt;
.tstable { border-color: #000000; width: 275px; }
.tsheader { font-family: arial; font-size: 10pt; color: #000000; background-color: #dcdcdc; }
.tslinks { font-family: arial; font-size: 10pt; color: #0000ff; background-color: #ffffff; }
.tsfooter { font-family: arial; font-size: 10pt; color: #000000; background-color: #dcdcdc; }

-->gt;gt;

Full customization is accomplished with four separate style definitons:

.tstable - this controls the width and border color of the box.

.tsheader - this controls the font, font size, font color, and background color for the header row.

.tslinks - this controls the font, font size, font color, and background color for the links in the middle.

.tsfooter - this controls the font, font size, font color, and background color for the footer row.

How to Customize your Link Box

border-color: #000000 - In the standard link box, the table has a black (#000000) border around it. You can change this border color to match your site however you want.

width: 275px - The standard link box is 275 pixels wide. You can change the width to whatever you want by specifying the width as a number of pixels (i.e. 275px) or as a percentage (i.e. 25%).

font-family: arial - In the standard link box, the font used throughout the entire box is called "Arial". If you want to use a different font for one or more sections of the link box, just change "arial" to the name of the font you want to use for each section of the link box. (i.e. verdana, courier, etc.)

font-size: 10pt - In the standard link box, the font size used throughout the entire box is "10pt". If you want to use a different font size for one or more sections of the link box, just change "10pt" to the font size you want to use for each section of the link box. (i.e. 8pt, 12pt, etc.)

color: #000000 - In the standard link box, the font color used in the header and footer is black (#000000), and the font color used for the links in the middle is blue (#0000ff). If you want to use a different font color for one or more sections of the link box, just change "#000000" and/or "#0000ff" to whatever you want.

background-color: #dcdcdc - In the standard link box, the header and footer rows have a light gray background color (#dcdcdc) and the middle section where the links appear has a white background (#ffffff). If you want to use a different background color for one or more sections of the link box, just change "#dcdcdc" and/or "#ffffff" to whatever you want.

For colors, you can specify either the color name or the hex code. For example, "#ffffff" is the hex code for white. For a big list of available colors and hex codes, please see the W3 Schools reference.

For more detailed information on Style Sheets, check out this CSS Tutorial.
(6 votes)
This article was helpful
This article was not helpful

Comments (0)