Team Buttons Customizations

[mikehaynes]

Anyone been able to successfully customize the way that the team buttons look? Color, shape, etc?

 

Care to share your css? 

 

Thanks in advance. 

[SportsEngine Staffer]

Do you mean the Team Buttons Element?  When you want to add a list of your teams to a page?

 

 

[mikehaynes]

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

[docnzok]

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.

 

 

 

 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.

 

 

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

[mikehaynes]

Thanks Mark! 

[jmarcus]

Do you have the code that will work with the Nokomis theme?