Adding and Customizing Themes

Follow

Each Portal Solution site can change it's theme including the header, footer, color scheme, and really about any HTML CSS items available.  Some of the theme options are available with-in the tool as easy configurable color pickers and image uploads.  Using the 'CSS rules' area allows you to completely customize any CSS you want.  


Add a new theme
To create your own theme, you'll first want to go to your Portal Solutions admin area and clock the 'Theme' option under Domain Setup in the domain admin menu.


Edit your new theme by selecting it in the 'Select Theme to Configure' drop-down list.  Once you are satisfied, you can set your new theme to as the theme used by the subdomain site by clicking 'Set Default' next to your theme.  You can create as many themes as you want.


After switching the default theme, you should see your changes instantly.



A Portals Solution domain owner has the ability to control the theme and branding of their solution.  Admins can use the Theme editing tools to choose color schemes and uploading images for specific style objects.  For full customization, the Admin is also provided with a box to specify their own CSS rules.

 

Editing a Theme

To edit a theme, go to your admin tools and under Domain Setup you will find the 'Theme' page.  If you haven't already, add a new theme and then use the Theme Configuration drop down menu to start editing it.  Note, unless your theme is selected as the default, you will not see changes real-time.

You'll see there are a number of elements of the them that you can change using easy color selection tools, text boxes, and file uploaders. 

 

Header

The header area of portals requires a background image of height 82 pixels.  The image file that must be uploaded must be a widget of 62 pixels (image size should be 62x82 pixels) and will be tiled across the entire header of the page.

The logo file must be 300x82 pixels and will be put into the upper-left corner.  We recommend using a transparent png file so that the background image shows through.  

Examples of each of these files can be found attached to this article.

Example Logo file

Example Header Background Tile File

After applying these files to a theme, the header would look like this:

 

Custom CSS

To completely control your CSS, you can enter custom CSS rules at the very bottom of the theme editor.

The format for this is the same as CSS files, which makes it handy for editing.  After changing the custom CSS rules, hit 'Submit' to apply changes.  

Note: There is no undo function, so it is recommended to save a separate backup file on your computer)

What elements are customizable using custom CSS rules?

All elements are customizable.  The best way to determine what to change for an element is to use your browsers debug tools.  Most browsers (Firefox, Chrome, etc) have a tool built-in that allows you to see the HTML and CSS for web page elements.  Usually this is available by right-clicking your mouse on the item.  Here is an example of inspecting the log-in button using Firefox.

You can see that after performing this on the log-in button, the browser shows me a window that shows the html and css for this page, specifically for the log-in button element.

I can now copy this CSS and paste into my Custom CSS Rules in the theme editor to make adjustments to it.

 

Example - Change Button Style

Let's change the default style of the buttons used in Exosite Portals.  Typically this is a gray gradient.  In our case, we want to change this to match my theme.  By pasting the following CSS code into the theme editor's custom CSS rules box and submitting this, the button style will be changed.


.exosite-button {
border-radius: 4px;
border: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
font-size: 14px;
background: #E05C04;
color: rgb(255, 255, 255);
}

.exosite-button:hover {
     background: #E05C04;
    color: rgb(255, 255, 255);
}

 

 

 

 

Example - Remove Widget Block Outlines

If I wanted to remove the edges of the widget blocks for example, I could do that with the following code:

example_with_no_widget_EDGES.png



form#loginform>div.block,
div.block
{
  background-color:transparent;
  border:0px solid #E5E6E6;
  padding:0.0em;
}
div.block .blockcontent .title
{
  background-color:transparent;
  font-size:0.9em;
  font-weight:bold;
  margin:0;
  padding:0 1em;
  text-align:left;
}
div.block div.blockcontent div.content
{
  border:0px solid #E5E6E6;
  padding:0 1em;
  background-color:rgb(249, 249, 249)
}

 

Example - Customize Buttons

 

If you'd like to change the style for your buttons in your Whitelabel account, edit the subdomain's theme by going to your subdomain's theme editing page (e.g. http://<yoursubdomain>.exosite.com/admin/theme) and edit the User Defined CSS rules. 

Here is an example of changing the theme for your site buttons:


.exosite-button {
border-radius: 4px;
border: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
font-size: 14px;
background: #8A56A3;
color: rgb(255, 255, 255);
}

.exosite-button:hover {
     background: #8A56A3;
    color: rgb(255, 255, 255);
}


In any place you can use custom HTML (admin configuration of pages, custom widgets, etc) you can use these buttons like this:


<a class="exosite-button js-exosite-button" href="http://www.exosite.com/" id="button-signup" type="button">CUSTOM ACTION</a>

This would add a button that looked like this:







  



Have more questions? Submit a request

Comments