How do I change the color of the Links Widget buttons on my Campaign?

Follow

Jane Vance

• May 02, 2017 14:50

I want to customize the appearance of the Links Widget buttons. How can I choose my own colors?

Original question received by ShortStack Support

0

• Official comment

  

  Jane Vance

  • May 02, 2017 14:52
  • Edited

  Answer from ShortStack Support: This can be done via the Style Panel. 

  1. Click the icon at the top to open the Style Panel
  2. Click the Links Widget in the Edit Widgets Panel to open the Links Widget settings in the Style Panel
  3. In the BUTTONS section, update the color in the box below Background Color and in the BUTTON TEXT section, update the color in the box below Text Color
  4. Click Save at the bottom of the Style Panel

  Steps 1-3 are illustrated in the image below.

  
  

  For older Campaigns not using Style Panel: 

  If you are not using the Style Panel for your Campaign (older Campaigns), then you can update the color of the links: 

  .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 */
  }

  If you want to change the color that displays when you hover over the button, then use this CSS:

  .ss_links a:hover{
  background:#585858; /* this controls the background color of the link when you hover over it */
  }

  Permalink

Please sign in to leave a comment.