Enterprise / WebStorm Design & CSS Overview


This article provides an overview of how to design and implement custom CSS for your Brightidea site. 

Before we begin, please note that some options should only be used with knowledge of HTML/CSS/Javascript. The Design tab in Enterprise/WebStorm allows the administrator to fully implement any custom design and gives great flexibility to skinning your Brightidea site.

 

    • To access the Design section, navigate to:
      • Enterprise / WebStorm(Challenge) Setup --> Site --> Design

Banner

  • There are three options you can use for your banner:

    • Hide Enterprise Banner (No banner will display)
    • Image: Upload an Image from a file on your computer to use as the banner.
    • HTML: Custom HTML (This is for a custom Banner/Navigation)
      • HTML/CSS/Java Experience recommended when using this option.

 

Footer HTML

  • Designers have an easy way to apply footers to the bottom of pages in Brightidea.
  • By using some basic HTML code, the footer can be customized and designed as needed
    • Input any Text/HTML to display in the footer and save changes to take affect.
  • Remember this will show up on every page above the WebStorm logo, including the login page.

 

Favicon Icon (Challenge/WebStorm)

  • A Favicon is an Icon that represents your website will show up in the tab of your browser. Usually it’s a company logo.
  • Note, the 'Favicon' is only available at the Challenge/Webstorm level and not Enterprise.

 

    • It should be an .ICO file.
    • Recommended size should be 32x32 pixels.
  • Below are example of Favicons from Brightidea and Microsoft:

 

Stylesheets/Pre‐sets/Color Picker

  • Pre‐sets/Color picker: Preset color palette default templates with allow the administrator to quickly select different color schemes.
    • The Color picker will populate to the set colors. You can change colors accordingly in the picker if desired.
    • You are able to enter any HEX code and are not limited to just the colors in the “picker” input field:

 

  • At the Challenge/WebStorm Level 
    • Enable Enterprise CSS – Selecting this will apply the Custom CSS Design from the Enterprise level design configuration at any WebStorm level.
      • Note: Headers will not be inherited by your Enterprise CSS. Headers are controlled from the individual WebStorm level.

Custom CSS

  • The goal of the Design tab is to be able to work with your Custom CSS directly in the browser making your changes in this text field without needing to upload CSS files.
    • Here, you are able to enter your custom styled CSS code that will apply to your Brightidea site:

 

IMPORTANT

It is very important to understand the formatting hierarchy in order to comprehend how the CSS is generated on your Brightidea site:

  • First, there’s a barebones default template already in place (Brightidea core CSS code)
    • Second, Color picker values are selected
      • Third, Custom CSS entered into the text box, then any external CSS files uploads.

Make sure to always “Save” any changes in the Design tab before navigating away from the page! 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk