Storefront - Basic Style Options

The Storefront theme was designed to be used out of the box to get up and running quickly for video subscription content. 

Below are seven basic changes that can be made in the Advanced Editor to modify the theme: 

1. Change the Header Background Color

It's recommended you upload a transparent .png of your logo to match the grey background of the header. If you need to match the header to your logo color add the code below to the Custom CSS file of your Advanced Editor, swap out the color name as needed. Make sure you include the curly brackets! 

#page-header
{

    background-colorwhite!important; 

2. Change the Header Font Color

The default font text color is white, and will need to be modifed if you change the background color. Add the following code to your Custom CSS file:

Coming soon!

3. Change Header Height & Logo Size 

#page-header {
    //use min-height to adjust the height of the header
    min-height100px;
  
    //this is used to center all the elements within the header
    //padding depends entirely on what the height the header is, it's up to the end-user to decide what's the best padding to center everything in the header, we cannot automatically do that for you
    padding20px;
}
  
//this height and the max-height values should be the same, or at least the max-height value must be larger than the height
//these adjust the size of the logo in the header, again it is up to the end user to decide how big or small it can be
#page-header .logo{
    height60px;
}
#page-header .logo img {
    max-height60px;
}

3. Remove the Header Category & Page Text

The default font text color is white, and will need to be modifed if you change the background color. Add the following code to your Custom CSS file:

#page-header a
{
    colorblack!important;
}

4. Remove Social Icons from Header 

It can be a bit complicated to change the color of the Facebook and Twitter icons, so if needed you can remove them by adding the following code: 

#page-header ol{

display: none;

}

5. Move the Marquee Video Title to the Right

Is the video title in the way of your thumbnail, move it to the right by adding the following code: 

#slideshow figcaption {
    right120px;
    leftauto;
}

6. Remove the Marquee Video Titles

If you want to remove the video titles from the featured videos completely, add this code: 

#slideshow figcaption {
    display: none;
}

7. Remove Video Titles from Thumbnails in Category Sliders 

If your video thumbnails have a title or tell about the video content, you may want to remove the video titles by adding the below code: 

.group .item figure figcaption {
    displaynone;
}
 
Please note, these are guidelines for CSS modifications and may conflict with any code you have added.
These instructions can be used for other themes, but may result in theme errors.
Make sure you include the two curly brackets in the examples above!
Contact support@vidcaster.com if you'd like to discuss site customization options.