CSS Design Tricks and Tips

Last Updated: Apr 26, 2016 03:21PM EDT
LeagueApps sites have the capability to allow you to customize your site's design through CSS (Cascading Style Sheets) via the Theme Editor.

Using the Custom CSS panel located under the CSS tab in the Theme Editor you can add any additional CSS styles you want. This code will allow you to override default settings or style any custom content you might include.

 

You don't have to be a professional designer to do something as simple as moving the location of the logo on your site. Below are the top 5 most popular pieces of CSS code that you can copy and paste into the Custom CSS panel in your theme editor to dig a little deeper into your site's design.

A couple of notes before you dive in:

 
  • You'll see "px" a lot - that means pixels. It's just a CSS unit of measurement.
  • When you change anything, like the pixel size or the color value, within the CSS code hit 'refresh' in the bottom left of the theme editor window to see the updated changes before actually saving the changes. (When you click 'save changes', the live site is updated).
  • You'll see a semicolon (;) after things like pixel size within the CSS code - make sure you keep that in there. It's a part of the code and won't work without it.
  • This isn't supposed to be easy! You'll see that it's a trial and error process so be patient and be willing to do some testing to make sure everything looks right!

1. Define the height of the header:

#header .wrap { height: 200px; }

When you change the height, you'll be changing the distance between the top and bottom of the header. In the example below, if you change the height to 250px, the header will extend down 50px.
 

2. Move the location of the logo:

#logo h1 { margin: 10px 0px 0px 65px;}

The only thing you need to worry about here to move your logo are the first and last pixel units.
  • The first one (10px in example above) moves the logo up or down and
  • The last one (65px in example above) moves the logo left and right
**You can use negative values here if you need to (see below):
 
 

3. Edit the spacing between menu items on the main navigation bar:

#nav li a { padding: 13px 0px 14px 5px; }

This can come in to play when you have a lot of custom content pages and main navigation items on your site and some of them spill over to a second column:
 
  • The first pixel unit (13px in example above) allows you to control the amount of space between the top of the main navigation item's text and the top of navigation bar
  • The second pixel unit (0px in example above) allows you to add additional space between each main navigation item
  • The third pixel unit (14px in example above) allows you to control the amount of space between the bottom of the main navigation item's text and the bottom of the navigation bar
  • The last pixel unit (5px in example above) allows you to control the distance of all main navigation items from the far left of the navigation bar‚Äč
 

4. Resize / move the logo on log in page:

body.narrow #logo h1 a img { margin: 10px 0px 0px 65px; width: 422px; }

You'll notice that as you make changes to the location of the logo on your site, it effects the logo on the log in page. (ex: http://playleagueapps.com/ is the site, http://playleagueapps.com/login is the log in page). This code allows you change the location (margin) and width of the logo on the log in page:

Again, the only thing you need to worry about here to move your logo are the first and last pixel units in the margin piece:
  • The first one (10px in example above) moves the logo up or down and 
  • The last one (65px in example above) moves the logo left and right
The width piece will simply re-size the total width of the logo image itself.

**You MUST 'save changes' in the theme editor and reload the log in page (ex: http://playleagueapps.com/login) to see the changes. Clicking refresh doesn't do the trick here.

***You can use negative values here if you need to (see below):

 

 
 

5. Edit the account navigation items in the top right of your site:

    #account-nav a { color: #2d6cbe; margin: 0px 3px; }
    #account-nav a:hover { color: #000000 }
 
  • The first piece allows you to change two things - the color of the links and the space (margin) between them
  • The second piece allows you to change the color of the links when a mouse is hovered over them

As you can see above, CSS colors are often labeled with numbers - these are called hex values. Here's a resource for finding hex color values: http://www.color-hex.com/
 
 

6. Hide Tiebreaker Rules on the Standings Page
 

a[onclick*="cOverlay('#tiebreaker-rules"]{
display: none !important;
}


By default, your Standings Tiebreaker Rules appear on every program's Standings page. This can be removed by adding the above piece of code to your custom CSS section. This may come handy if your tiebreaker rules for a certain sport or league are different than the rules set in your global Standings Rules (more on how to customize your Standings Rules here).





7. IF you have your default CSS turned OFF...

 

Add the code below to your custom CSS section. This will ensure that your formatting and styling is consistent on every page. It will also correct any icon font issues that may appear for players using Internet Explorer 8 (generally, older versions of Internet Explorer are prone to formatting issues). 

 

<!--[if IE 8]>
<style type="text/css">
[class^="icon-"] {
font-family: Arial, sans-serif;
font-weight: bold;
}
.icon-account:before {
content: "1";
}
.icon-register:before {
content: "2";
}
.icon-summary:before {
content: "3";
}
.icon-payment:before {
content: "4";
}
.icon-confirmation:before {
content: "4";
}
.five-options .icon-confirmation:before {
content: "5";
}
.cOverlay-wrap {
background: #333;
}
</style>
<![endif]-->


8. Disable the Captain's Ability to Edit Each Team Player's Registration Details


Currently, captains are able to change their teammates' registration details on the team page. Adding this piece of code will hide the 'Edit' button next to each teammate's name, and effectively remove this capability for the captain.


.entity-listing .entity-actions a[style="float: right; position: relative; right: 3px;"] {
display: none;
}
.entity-listing #teammates-container .entity-actions a[style="float: right; position: relative; right: 3px;"] {
display: inline;
}






Want to learn more CSS tricks?

The sky is the limit in terms of how much custom CSS you can add to your LeagueApps site and there are plenty of great resources out there to learn more about CSS. Here's an industry leading resource that has a 'try it yourself' editor to practice with the code before you use it: http://www.w3schools.com/css/default.asp.


Happy coding!!

Contact Us

support@leagueapps.com
http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete