Adjusting Your Site's Appearance

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 of Design at the top
  • Then click Theme Editor
  • This will open a new tab in your browser with the Theme Editor open.

main-nav-theme-editor.png

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.

mceclip1.png

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. And behind the editor, you will see a rough preview of your site. 

To collapse and expand the editor, click the small computer screen icon in the top right of the page. 

Note: 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!

Note: 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.


mceclip0.png

Skin Tab

  • Add or update your site's logo
    Tip: 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

Colors

  • Choose from a Color Scheme
  • Adjust colors of individual elements
    Tip: 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.

mceclip2.png

Fonts

  • 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

Images

  • 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 homescreen.
    To learn more about this, click here

 

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: Your are responsible for styling any custom content you include. We can not support any display issues created by inclusion of custom content.

Was this article helpful?
0 out of 0 found this helpful