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;
}