MediaSilo Help Center

Your place for answers on secure video sharing.

QuickSites Advanced Style Guide

Last Updated: Aug 12, 2015 02:15PM EDT

Visit www.quicksite.io/designer to create a Custom QuickSite

The Mediasilo Basic Style Guide showed you how to change basic components of your Quicksite like background color, title, and logo. In the advanced guide you’ll learn how to

  • Upload background image

  • Change Grid background

  • Resizing Asset Thumbnails

  • Change asset title colors

  • Apply active menu color

  • Add stylized lines and graphics in header

 

Upload background image:

Although our final theme doesn’t have a background image we’d like to show you have to do this anyway.
 

Navigate to the #content tag and change background-color to background-image

 

#content {

 font-size: 14px;

 background-image:

 

  • Select upload next to file explorer

  • Upload image into the file explorer

  • Once the image is loaded into file explorer press insert image (note: make sure cursor is after colon on “background-image: “)

 

final should resemble below

 

background-image:url('https://custom-portal-theme-assets.s3.amazonaws.com/552e956ae4b04f33cbc89c32logo-teal.png?1429118714911')

 
  • place semi-colon after parenthesis

  • to ensure background fits entire page add the following after the background-image code

background size: 100%;

 

Change Grid background:

Altering your grid color is a great way to add depth to the page. To do so input the following code anywhere within the CSS editor. The color number represents the new color of your grid background
 

#page {

background-color: #538d9b ;

width: 100%;

}

 

Resizing Asset Thumbnails

 

Resizing Asset thumbnails by inputing the following code anywhere within the CSS editor

 

#asset-grid {

padding: 50px;

}

 

The padding number represents the space between each thumbnail. Subsequently altering this will increase or decrease the thumbnail size as it is adjusting to the allotted space between the assets.



 

Change asset title colors:

To change asset title colors navigate to the following tag:
 

.descr h4 a {

 padding: 0 0.8em;

 display: inline-block;

 width: 100%;

 overflow: hidden;

 text-overflow: ellipsis;

 -o-text-overflow: ellipsis;

 white-space: nowrap;

 vertical-align: text-bottom

   ;

 text-align: center;

 color: #e23a38; < update this

 font-weight: 500;

 font-size: 14px;

 

Apply active menu color:

Add the following tag, the red represents the menu color when a link is selected.
 

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {

background-color: #e23a38  ;

color: white;

}


 

Related Articles


Contact Support

Enterprise Administrator? Click here to View Your Company Cases