The LeagueApps theme editor is an easy way to adjust the appearance of your LeagueApps Hosted Website. The theme editor has basic tools to let you change your site's colors, fonts, logo, and background images.
If you use your own website provider or have purchased a custom WordPress website from LeagueApps, you will likely not need to adjust these settings.
For steps on adding and editing content on your site, click here.
Launching the Theme Editor
- From your LeagueApps Management Console, place your mouse on Design at the top
- Then click Theme Editor
- This will open a new tab in your browser with the Theme Editor open.
Viewing your Site
When making edits to your site, you'll want to see how they look in real-time. You can visit your site from the management console by clicking the small screen icon in the top, left-hand corner.
Clicking this will open your site in a new tab in your browser. Once open, you can simply refresh the page to view your changes as you make adjustments in the theme editor.
Site Appearance Options
Once the Theme Editor is open, you will see a number of tabs across the top. Behind the editor, you will see a rough preview of your site.
To collapse and expand the editor, click the small computer screen icon at the top right of the page.
⚠️ Collapsing the page will not erase your changes, but navigating away from the editor will. Always be sure to save your changes before leaving the editor!
⚠️ Save your edits one tab at a time. For example, if you adjust some colors then switch to the Fonts tab and save your color changes will not be saved.
- Add or update your site's logo
|⚠️ A .png file with a transparent background is best for the site logo|
- Add, remove or reorder homepage slides
- Add links to your organization's social media pages
- Choose from a Color Scheme
- Adjust the colors of individual elements
|⚠️ We strongly recommend having your Content Background be a light color and Body Text and Headings colors be a dark color.|
- You can choose colors either by using the color or by entering a hex value.
- Body Text: Text content on all of your pages
- Main Nav Links: Links in your site's main menu
- Section Title: Headings at the top of each section on your pages
- Logo: Only applies if you do not have a logo image uploaded
- Page Title: Header for each of your content pages
- Upload a site background and adjust its position
- Upload a mobile logo: This is the logo your members will see when viewing your site on a mobile device.
- Mobile app icon: This is the logo your members will see if they save your site to their phone's home screen.
CSS & HTML
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.
|⚠️CAUTION: 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.|
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.
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: You are responsible for styling any custom content you include. We can not support any display issues created by the inclusion of custom content.|