Author: Wikidot Community
License: CC BY-SA 4.0
Navigation: No Top and Side Support
rating: +1+x

Image Unavailable

Click for a live demo!

Specialization of the Standard Theme designed to work as a cover page for your site.

Import

To use this CSS Theme and ensure you always have the latest version, paste the following code into your site's CSS:

@import url('http://css.wikidot.com/theme:standard-cover/code_');

Description

The front page is the page most users will see when they visit your site, so you want it to stand out. Installing this theme will specialize your cover pages, assuming you are using one of the Standard Themes, tailoring them more toward presentation rather than content.

In order to use this theme, you need to include the above import code after importing one of the standard color themes. For instance, for a red cover page, your site's CSS would look like the below:

@import url('http://css.wikidot.com/theme:standard-red/code_');
@import url('http://css.wikidot.com/theme:standard-cover/code_');

For more info concerning how to design your cover pages, visit the Notes section below.

Code

header.header-wrap{  height: 550px; }
nav.side-bar-wrap{  display: none !important; }
div.main-content-wrap{  width: 100% !important; }
 
main.content-wrap{  background: #FFF; }
main .content.container{
    max-width: none;
    margin: 0;
    width: auto;
}
main .content{
    background: none;
    box-shadow: none;
    top: 0;
    border-radius: 0;
}
main .main-content-wrap{  padding: 0; }
main .content .page-title{  display: none; }
 
main .content .main-content-wrap .main-content h1{
    background: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
main .content .main-content h1{  margin-top: 0; }
 
main .content .feature{  padding: 40px 0; }
main .content .feature .row{  margin: 0 auto; }
 
main .content .feature.feature-header{
    display: block;
    height: 410px;
    background: none;
    border: none;
    position: absolute;
    top: -410px;
    width: 100%;
    padding: 0;
}
main .content .feature-header h1{
    font-size: 40px;
    letter-spacing: 0.08em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}
main .content .feature-header p{
    font-size: 18px;
    letter-spacing: .25px;
}
main .content .feature-header .btn,
main .content .feature-header .button{
    font-size: 24px;
    margin-top: 0.5em;
    padding: .25em 1em;
    border-bottom-width: 4px;
}
 
main .content .feature.feature-center{  text-align: center; }
 
@media (min-width:1200px){
    main .content .feature .row{  max-width: 1170px; }
}
@media (max-width:1200px) and (min-width:992px){
    main .content .feature .row{  max-width: 970px; }
    main .content .feature .col-lg-1:not(:first-child),
    main .content .feature .col-lg-2:not(:first-child),
    main .content .feature .col-lg-3:not(:first-child),
    main .content .feature .col-lg-4:not(:first-child),
    main .content .feature .col-lg-5:not(:first-child),
    main .content .feature .col-lg-6:not(:first-child),
    main .content .feature .col-lg-7:not(:first-child),
    main .content .feature .col-lg-8:not(:first-child),
    main .content .feature .col-lg-9:not(:first-child),
    main .content .feature .col-lg-10:not(:first-child),
    main .content .feature .col-lg-11:not(:first-child){
        margin-top: 40px;
    }
}
@media (max-width:992px) and (min-width:768px){
    main .content .feature .row{  max-width: 750px; }
    main .content .feature .col-md-1:not(:first-child),
    main .content .feature .col-md-2:not(:first-child),
    main .content .feature .col-md-3:not(:first-child),
    main .content .feature .col-md-4:not(:first-child),
    main .content .feature .col-md-5:not(:first-child),
    main .content .feature .col-md-6:not(:first-child),
    main .content .feature .col-md-7:not(:first-child),
    main .content .feature .col-md-8:not(:first-child),
    main .content .feature .col-md-9:not(:first-child),
    main .content .feature .col-md-10:not(:first-child),
    main .content .feature .col-md-11:not(:first-child),
    main .content .feature .col-lg-1:not(:first-child),
    main .content .feature .col-lg-2:not(:first-child),
    main .content .feature .col-lg-3:not(:first-child),
    main .content .feature .col-lg-4:not(:first-child),
    main .content .feature .col-lg-5:not(:first-child),
    main .content .feature .col-lg-6:not(:first-child),
    main .content .feature .col-lg-7:not(:first-child),
    main .content .feature .col-lg-8:not(:first-child),
    main .content .feature .col-lg-9:not(:first-child),
    main .content .feature .col-lg-10:not(:first-child),
    main .content .feature .col-lg-11:not(:first-child){
        margin-top: 40px;
    }
}
 
@media (max-width:768px){
    main .content .feature-header{  text-align: center; }
    main .content .feature-header h1{  font-size: 32px; }
    main .content .feature .col-sm-1:not(:first-child),
    main .content .feature .col-sm-2:not(:first-child),
    main .content .feature .col-sm-3:not(:first-child),
    main .content .feature .col-sm-4:not(:first-child),
    main .content .feature .col-sm-5:not(:first-child),
    main .content .feature .col-sm-6:not(:first-child),
    main .content .feature .col-sm-7:not(:first-child),
    main .content .feature .col-sm-8:not(:first-child),
    main .content .feature .col-sm-9:not(:first-child),
    main .content .feature .col-sm-10:not(:first-child),
    main .content .feature .col-sm-11:not(:first-child),
    main .content .feature .col-md-1:not(:first-child),
    main .content .feature .col-md-2:not(:first-child),
    main .content .feature .col-md-3:not(:first-child),
    main .content .feature .col-md-4:not(:first-child),
    main .content .feature .col-md-5:not(:first-child),
    main .content .feature .col-md-6:not(:first-child),
    main .content .feature .col-md-7:not(:first-child),
    main .content .feature .col-md-8:not(:first-child),
    main .content .feature .col-md-9:not(:first-child),
    main .content .feature .col-md-10:not(:first-child),
    main .content .feature .col-md-11:not(:first-child),
    main .content .feature .col-lg-1:not(:first-child),
    main .content .feature .col-lg-2:not(:first-child),
    main .content .feature .col-lg-3:not(:first-child),
    main .content .feature .col-lg-4:not(:first-child),
    main .content .feature .col-lg-5:not(:first-child),
    main .content .feature .col-lg-6:not(:first-child),
    main .content .feature .col-lg-7:not(:first-child),
    main .content .feature .col-lg-8:not(:first-child),
    main .content .feature .col-lg-9:not(:first-child),
    main .content .feature .col-lg-10:not(:first-child),
    main .content .feature .col-lg-11:not(:first-child){
        margin-top: 40px;
    }
}
 
footer .footer{  padding-top: 40px; }

Notes

The Standard Cover has built-in support for what are called "features". A feature is simply a designated pane on your page that displays a chunk of information related to your site/product. For examples of features in action, take a look at the front page of the Standard Template site; each of the alternating white and blue panes are features.

To format your features, you can use the following template codes:

Triple Panel

[[div class="feature feature-center"]]
[[div class="row"]]
[[div class="col-sm-4"]]

CONTENT 1

[[/div]]
[[div class="col-sm-4"]]

CONTENT 2

[[/div]]
[[div class="col-sm-4"]]

[[span class="fa fa-users fa-4x"]]@<&nbsp;>@[[/span]]

CONTENT 3

[[/div]]
[[/div]]
[[/div]]

Left-hand Panel

[[div class="feature"]]
[[div class="row"]]
[[div class="col-md-7"]]

CONTENT

[[/div]]
[[div class="col-md-5 text-center"]]

IMAGE

[[/div]]
[[/div]]
[[/div]]

Right-hand Panel

[[div class="feature"]]
[[div class="row"]]
[[div class="col-md-5 text-center"]]

IMAGE

[[/div]]
[[div class="col-md-7"]]

CONTENT

[[/div]]
[[/div]]
[[/div]]

Center Panel

[[div class="feature feature-center"]]
[[div class="row"]]
[[div class="col-md-12"]]

CONTENT

[[/div]]
[[/div]]
[[/div]]

Offcolor Panel

In order to obtain the alternating color effect, you need to add the offcolor keyword to the list of classes after feature. For example, the bellow will create a Center Panel that is offcolor:

[[div class="feature feature-center offcolor"]]
[[div class="row"]]
[[div class="col-md-12"]]

CONTENT

[[/div]]
[[/div]]
[[/div]]

Header Feature

A special feature panel is required for cover pages, known as the "header feature". This is what appears in the dark-region at the very top of the page. At the very top of the content of the cover page, include and fill in the following template:

[[div class="feature feature-header"]]
[[div class="row"]]
[[div class="col-md-12"]]

CONTENT

[[/div]]
[[/div]]
[[/div]]

You can, of course, customize the header in any way you wish.

Comments

Add a New Comment