We've collected a number of common questions and issues that come up during the design process, and placed them here. Hopefully this helps you as you wirk through the process. And, of course, we are always here to assist -- just let us know.
The fastest and easiest way to create a custom theme for your organization is to use the theme editor to edit your site’s logo, header background, and page background.
Adding a Custom Logo
By default, all LeagueApps powered websites come with a hyperlinked text version of the site’s name in replace of a logo. If you want to add a custom logo to your site you can use the theme editor to upload an image of your choice. This will replace the text version of the logo with your image. Supported image types are .png, .jpg, and .gif, and your images must be less than 1MB in size.
The recommended dimensions for a custom logo image can be anything below 365px wide and 200px in height. It is important to note that the logo will appear on the site globally, which means it will also appear on the login screen - a narrower width than what is seen on the homepage.
Following common UI convention, all custom logo images will appear in the left corner of the header area and be hyperlinked to the homepage.
Here is an example of the logo markup:
Adding a Custom Header Image
The header image is the area behind your logo. The recommended 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. Supported image types are .png, .jpg, and .gif, and your images must be less than 1MB in size.
When uploading a header image it is important to note that by default, the header height takes on the height of the existing logo image or logo text. In order to customize the height of your header area you will need to ADD the following css rule to the custom css panel in the theme editor:
Here is an example of the full header markup:
Adding a Custom Background Image
The background image is the area that 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.
The are no recommended dimensions for a custom background image, but we highly suggest that it is fully optimized and under 1MB in size.
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.
Starter TemplateLooking for a quick way to mock up your LeagueApps site design? Try downloading our homepage starter template PSD to help give you the perfect head start!
Download the Homepage Starter Template (PSD)
Adding Custom CSS
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 be included in your pages after the theme CSS, allowing you to override default settings or style any custom content you might include.
Here are some commonly asked questions:
Do I need to turn off the default CSS to create a really unique custom theme?
No, we actually recommend that you leave the default CSS on - this will ensure all updates and latest releases are included in your LeagueApps website.
How come when I try to save my CSS it does not work?
In most cases, there is a syntax error that causes the Theme Editor to disregard any incorrectly formatted code. Copy and pasting the code into a simple word processor like TextEdit or Notepad will help remove any incorrect formatting added by the copy/paste process.
How can add my own CSS that is hosted somewhere else?
You can reference external CSS files by adding it to the HEAD tag panel in the Theme Editor or the Head Includes panel in the Page Editor.
Using the Page EditorThe page editor is a great way to create custom pages on your LeagueApps site and add to the pre-existing default pages. You can create as many custom pages as you wish and control the content on each page.
You can upload your own images by using the image button found on the toolbar. All images must be sized to the desired dimensions before uploading. It is also suggested that images are optimized for web use to ensure quick loading times.
HTML Source Editor
For users with HTML and CSS knowledge, the HTML Source Editor is a great way to customize the markup to create unique and stunning pages quickly. Simply, click on the button to open up the editing dialog.
Once in editing mode, you are able to manipulate the page template’s HTML markup and customize it in any way you like - add new divs, class names, etc. Under the “advanced” properties tab you can even add your own header include files for even more customization
Third Party Extensions (Libraries & Plugins)You can extend the LeagueApps platform by adding third-party libraries to handle image sliders/carousels, dynamic content and more. It is important to consider the best possible solution when selecting these libraries and plugins as they have a direct impact on the complexity of your site.
*Note - This is for users with a strong coding and development background. If you wish to have these features implemented into your site, but do not have these skills, please contact us on how we can help.
Below is a list of suggested third-party libraries that work well with the LeagueApps platform:
Image Sliders & Carousels
Referencing Externally Hosted FilesThere are two primary ways to reference external files and extensions.
Globally using the HEAD TAG panel in the theme editor (located under the HTML tab):
This is useful if you have functionality needed to span the entire website - it allows for a single consolidated location for easy access global files.
Page-specific using the HEAD INCLUDES panel in the page editor (located under the Advanced Properties tab):
When functionality does not need to be included for every page of the website, you can use the Page Editor’s “Advanced Properties” tab to enter any external files you may want to reference.
Widget Background Color
All LeagueApps widgets have a background color that can be edited via the Theme Editor. Simply use the color picker to choose the color of your choice.
Aside from the height and width value options when selecting a widget on the widget page, you can use the Custom CSS panel to target widgets and override their default styles.
Below is the markup structure for the common LeagueApps widget: