Change the Appearance of Links in the Links Widget
This content provides a simple CSS code to customize the appearance of links, including background color, font, and size.
Want to change the background color, size, font, shape or link color of your links when using the Links Widget?
It's not as hard as it seems! Use this bit of CSS to create a more customized appearance:
.ss_links a{border: solid 4px #ff0000; /* border designates the border color, size, and line style */
background:#000000; /* this controls the background color of the link */
font-family: arial, sans-serif; /* font-family determines the web-safe font used for the link name */
color:#ffffff; /* color controls the color of the text in the links widget */
font-size: 14px; /* font-size determines the size of the text in the links widget */
border-radius: 10px; /* border-radius helps to create rounded corners, for a more button-like look. The larger the number, the more rounded the corners. If you don't want rounded corners, change the border-radius to 0px */}
You can even change the color of the button when you hover over the link, here's the CSS:
.ss_links a:hover{background:#585858; /* this controls the background color of the link when you hover over it */}
You can change the Hex Values, pixel dimensions, border styles, and the font-family to suit your tab.
Here are a few great references to help you customize:
Hex Value Guide: http://www.w3schools.com/cssref/css_colors.asp
Guide to web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp.
