SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
mikehaynes

Junior Member
Registered:
Posts: 10
Reply with quote  #1 
Anyone been able to successfully customize the way that the team buttons look? Color, shape, etc?

Care to share your css? 

Thanks in advance. 
nickburggraf

Moderator
Registered:
Posts: 8
Reply with quote  #2 
Do you mean the Team Buttons Element?  When you want to add a list of your teams to a page?

mikehaynes

Junior Member
Registered:
Posts: 10
Reply with quote  #3 
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

Moderator
Registered:
Posts: 45
Reply with quote  #4 
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

mikehaynes

Junior Member
Registered:
Posts: 10
Reply with quote  #5 
Thanks Mark! 
Previous Topic | Next Topic
Print
Reply

Quick Navigation: