Jump to content
  • 0

Team Buttons Customizations


mikehaynes

Question

5 answers to this question

Recommended Posts

  • 0

nickburggraf, 

Yes, I meant the Team Buttons Element. 

 

I lack CSS skills and would like to know how to change the colors on the buttons themselves without changing the global color settings on the site. 

 

Thanks, 

Mike

Link to comment
Share on other sites

  • 0

You can customize the buttons using CSS, however, they are built as a list so whatever CSS you apply, will apply it to all the buttons on that page.

 

Here are my normal blue team buttons that are placed when I select insert a team button.

 

Screen Shot 2017-04-27 at 3.36.29 PM.png 

 

 Adding some CSS, the buttons are now changed to whatever color you pick, and I have added the color of the hover as well which is the color they will turn when the mouse goes over them.

 

I also added a radius to the buttons for a rounded look.

 

Screen Shot 2017-04-27 at 3.32.59 PM.png 

The CSS Code is only needed on the page that the buttons are on so you do not need Cascading.

 

Just add this CSS to the Options/Edit Head Code/SINGLE PAGE Head Code

 

<style>

 

.widget-teamButtons a  {

background-color: red;

border-radius: 10px;

border-color: red;

}

 

.widget-teamButtons a:hover {

background-color: yellow;

}

 

</style>

 

That should do the trick.

 

Mark

946071397_ScreenShot2017-04-27at3_36_29PM.thumb.png.eb580ef9d1fc429915228d9d9f40b4f1.png

2073919155_ScreenShot2017-04-27at3_32_59PM.thumb.png.a414b055e35cee898e40763eb448a892.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...