Options for Customizing your Site Design

Last Updated: Oct 21, 2014 10:58AM EDT

The LeagueApps theme editor is an easy way to customize your league site, even if you don't know anything about HTML or CSS. The theme editor has basic tools to let you change your site's colors, fonts, logo, and background images, all of which can be done visually without any technical knowledge.

If you want more advanced control over your theme, and you're comfortable with HTML and CSS, you can read more about the advanced CSS and HTML customization options.

Getting Started

As an admin, you can start editing your site's theme by clicking the Design tab in your admin console. Once you've launched the theme editor, you'll see a generic sample page from your league site, and an icon in the top right corner where you can toggle the editor on and off while you work.

With the editor open, you'll see several tabs along the top, for COLORS, FONTS, and IMAGES. The last 2 tabs, CSS and HTML, are meant for advanced users. You can read more about them here.

CAUTION: Hiding the editor tool will not cause you to lose your changes, but leaving the page will! Make sure you click Save Changes before leaving the editor screen.


Start customizing your site colors by choosing a color scheme. There are currently 6 preset color schemes to choose from. The schemes were created by the LeagueApps design team, who understand colors and aesthetics. Once a color scheme is selected, it can be tweaked with custom color fields.

Editing colors on your site is as simple as clicking on the item you want to change and using the color picker to set your color. You can visually change your colors by clicking and dragging inside the color picker tool, or if you know the HEX value for your color you can type it in as well.

Each color value corresponds to a specific element of your site. Some elements, like links and buttons, have two options - one regular and one for the "hover" state. This is the color your users will see when they move their mouse over that particular element.

Also, your color choices here will be used in the new mobile templates for your site. 

NOTICE: You can control your widget background color using the widget background element. Additionally, you can follow these instructions to customize the color of your utility nav links



You can change nearly all the fonts on your site, choosing from most of the web safe fonts available to get the exact look you want. You have control over the fonts for several individual types of content, as well the size of the text for each one.

You'll see individual controls for the BODY TEXT (the base font for blocks of copy), MAIN NAV LINKS (the links in your site's main menu), your LOGO TEXT (which will only appear if you haven't uploaded a logo image), PAGE HEADER (which is the text that appears at the top of the content on each page of your site), and finally SECTION HEADERS (which are the headings you'll see at the top of each section with your pages).


You can also use the theme editor to upload your own images to customize your site's logo, header background, and page background. Each image is optional, so you can upload one, all of them, or none at all. Supported image types are .png, .jpg, and .gif, and your images must be less than 1MB in size.

If you upload a LOGO, it will replace the text version of your site's logo (the large text at the very top of the page, above the main menu).

If you upload a HEADER BACKGROUND, it will appear in the area behind your logo. The suggested width is 980px wide, in order to fill the full header area, but you can use anything you like and it will be centered in that area.

If you upload a PAGE BACKGROUND, it will appear as the background of your page, above whatever page background color you set in the colors tab. You'll notice the PAGE BACKGROUND also has options for POSITION and REPEAT. Use this to position your image on screen, and to decide whether you want the image to repeat across the screen, repeat down the screen, tile to fill the screen, or don't repeat at all. 

After you've uploaded an image, you'll see it's file name and web address, in case you want to use it elsewhere or in custom CSS, and you'll see an orange delete button if you want to remove it or replace it with another image. Each option can only have one image uploaded at a time, so you must delete your current image before replacing it with another.

You have the ability to upload a mobile logo, as well as a mobile app icon. 
Please try to keep your logo file sizes as small as possible -- no more than 50 or 60 kb if possible. Please use https://kraken.io/web-interface if you need help optimizing the file size. Click here for more Mobile FAQ's

Finally, feel free to check out our sports-themed backgrounds. If you are looking for a cool site background, we have some great sample site site background images to choose from.

CAUTION: Don't forget to Save Changes after uploading your images. Once an image is uploaded, it is available for previewing in the theme editor, but it is NOT saved to your theme until you click Save Changes.

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found