Change the Appearance of Links in the Links Widget

Changing the Appearance of Links in the Links Widget

Change the Appearance of Links in the Links Widget

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:  https://www.w3schools.com/cssref/css_colors.asp
Guide to web-safe fonts:  http://www.w3schools.com/cssref/css_websafe_fonts.asp.

Tags:
Dana Kilroy
dana@shortstacklab.com

Dana Sullivan Kilroy is ShortStack's Director of Communications and Social Media Marketing. Before joining the ShortStack team she was a writer whose work appeared in publications and sites including The New York Times, The Los Angeles Times, The Wall Street Journal, Fast Company, Inc. and many other lifestyle publications. Reach her on Twitter @dsullyk. Read more articles by Dana Kilroy.