SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
mikehaynes

Junior Member
Registered:
Posts: 12
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. 
0
nickburggraf

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

0
mikehaynes

Junior Member
Registered:
Posts: 12
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
0
docnzok

Moderator
Registered:
Posts: 47
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

0
mikehaynes

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

Quick Navigation:

Easily create a Forum Website with Website Toolbox.