Using CSS and HTML in the Theme Editor

Last Updated: Apr 01, 2015 11:31AM EDT

The Theme Editor's basic controls have everything basic users need to edit colors, fonts, logo, and background images. If that's all you need, read more about the options for customizing your site designHere is a short video on how to use the theme editor.


Theme CSS Controls

For more advanced users, the theme editor can be a really powerful tool, giving you partial or even full control over your site's theme and styles. If you like the default LeagueApps theme, but just want to customize or override a few pieces here and there, you can add additional CSS to the theme to customize the default display. Or, if you're an advanced user and are comfortable with HTML and CSS, you have the option to turn off the default theme and write all your own styles.


CAUTION: Both of these CSS options are meant for advanced users only. Modifying or rewriting theme CSS is only recommended for advanced customers. Doing so without proper knowledge may cause issues with your site. LeagueApps is not responsible for support issues caused by custom themes.


Adding Additional Theme CSS


The default theme styles everything in your site, and for most users this and the basic customization tools are enough. But if you want to make adjustments to the theme, without writing your own from scratch, you can do so in the CSS tab of the theme editor.


The top field of the CSS tab, labeled THEME CSS is simply a read-only copy of your theme's CSS file. This is just a reference, for your convenience, to see how things are currently being styled in the site. Below that is an empty text field labeled CUSTOM CSS. This is where you can enter any CSS you want. This code will be included in your pages after the theme CSS, allowing you to override default settings or style any custom content you might include.


Turning Off The Default Theme


For the most advanced users, you have the option to completely disable the default theme CSS and write your own from scratch. This gives you the ability to make your LeagueApps website 100% custom, but of course is meant for professional designers or those who are completely comfortable with HTML and CSS.


In the CSS tab you'll see a checkbox at the top right labeled Use default CSS? where you can toggle the theme on and off. If you decide to disable the default theme CSS, your site will appear with only the styles you include in CUSTOM CSS text area, or any external CSS files you include (learn how to include external CSS files).

If you are using a LeagueApps widget and would like to change the widget background color to match your page's background, add the following line to the custom CSS block:
.la-widget-container {background: MY-HEX-COLOR;}


CAUTION: Once you disable the default theme, you will no longer have access to the Theme Editor's color and font editing tools. You will have to edit those values in your own CSS. You can still upload images through the theme editor if you like, or you may host your own images elsewhere.


Theme HTML Controls


In the HTML tab of the theme editor, you can include external files or code in your site's HEAD tag, insert custom HTML into the header of your site, or insert custom content into the footer of your site.


Adding HEAD Includes (eg. external CSS files)


In the first field of the HTML tab, labeled HEAD TAG, you can include any custom files or other code you want into the HEAD tag of your site. For instance, if you don't want to write your CSS, you can include an external CSS file that you host yourself.


Custom Header & Footer Content


In the second and third fields of the HTML tab, labeled CUSTOM HEADER CONTENT and CUSTOM FOOTER CONTENT, you can include any custom HTML you'd like to appear in your site's header and footer.


CAUTION: Your are responsible for styling any custom content you include. We can not support any display issues created by inclusion of custom content.


The header content will be injected into the header content block, into a div with an id of #header-extras, like so:

<div id="header-extras">
	Your Content Here.

The footer content will be injected into the footer content block, into a div with an id of #footer-extras, like so:

<div id="footer-extras">
	Your Content Here.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found