MediaSilo Help Center

Your place for answers on secure video sharing.

QuickSites Basic Style Guide

Last Updated: Dec 11, 2015 04:30PM EST

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

QuickSites provides users with a robust set of tools to customize and create beautiful microsite in just a few clicks. Below is a basic guide to customizing your Quicksite using the exposed CSS Editor whcih is visibile after selecting a theme from here (quicksite.io/designer)


What we’ll learn using only CSS:
  • Change Background Color/Image

  • Change Logo

  • Change Title Color

 

How to Change This Default:

 


To This:

 

 
  • First Select your theme from the template page. Let’s start with Jupiter.

 

To Change the Background Color/Image:

  • Within your CSS editor navigate to the following tag:

 

#content {

 font-size: 14px;

 background-color: #F0F0F0;  

 
  • Highlighted in red is your color code. To change your background color simply replace this code with your new color* you may type in a color (i.e. red, blue, etc) or you may use colorpicker to find a more defined color in this instance we will use white

 

#content {

 font-size: 14px;

 background-color: white

;  



To change your background color to an image see advanced style guide:

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

 

#content {

 font-size: 14px;

 background-image:;  

 

2.    Select upload next to file explorer

3.     Upload selected image

 

To Change site Logo:

  • Within your CSS editor navigate to the following tag:

 

#logo {

 height: 62px;

 width: 206px;

 
  • add the following tag below width tag

 

 background-image:

 
  • upload image with dimensions 206x62 or less 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 Change Page Title Color:

  • Within your CSS editor navigate to the following tag:
     

#page-title {

 text-align: center;

 color: #686868;

 font-size: 2em;

 margin: 0;

 font-family: 'BenchNine', sans-serif;

 
  • Highlighted in red is your color code. To change your background color simply replace this code with your new color* you may type in a color (i.e. red, blue, etc) or you may use colorpicker to find a more defined color in this instance we will use red

 

#page-title {

 text-align: center;

 color: red;

 font-size: 2em;

 margin: 0;

 font-family: 'BenchNine', sans-serif;

 

See our Advanced Guide to see how to complete the tutorial

 


Related Articles


Contact Support

Enterprise Administrator? Click here to View Your Company Cases