About

Thanks for importing Boost 🙂

Boost is created with GP Premium’s awesome built-in features with some custom CSS.

The sections below provides a quick overview on how the site was built and some potential modifications. All the CSS mentioned below can be found in the Additional CSS field in the customizer.

Site Wrapper

A container wrapper is added using Hooks Elements. You can find the Container wrapper opening and Container wrapper closing elements in Appearance > Elements.

It is needed in order to create the shadow and gradient background effect on the entire body container.

Here is the CSS added for the site wrapper:

/* Site wrapper styles */
.site-wrapper.grid-container {
    max-width: 1600px;
    background-image: linear-gradient(-180deg,#0e1f35,#21455c);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
#sticky-navigation {
    max-width: 1600px;
    margin: auto;
}

This site is an excellent resource to tweak the gradient to your liking: https://cssgradient.io/

Header/Navigation

The header/navigation is using one of GP’s newest options Use navigation as Header. You can use a site title or upload a logo in Site Identity.

Here is the CSS added for the navigation button:

/* Navigation styles */
@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        border-width: 3px;
        border-style: solid;
        border-color: inherit;
        border-radius: 5px;
        line-height: 40px; /* this number will likely need to be adjusted */
        padding-left: 15px;
        padding-right: 15px;
    }
}

Header Element/Page Hero

• Home page

The first section after the header/navigation is built using GP Premium’s Header Element module. To modify it, head to Dashboard > Appearance > Elements and edit the Home hero header element.

The background color of the hero is transparent in order to show the gradient background added in the site wrapper.

Here is the CSS added for this section:

.page-hero h2 {
    margin-bottom: 35px;
    font-size: 35px;
    font-weight: 700;
}
@media (max-width: 768px) {
    .page-hero h2 {
        font-size: 25px;
    }
}
.page-hero .button, .slideout-navigation .button {
    width: 170px;
    border-radius: 3px;
    font-weight: 700;
    text-align: center;
}

• Posts and Pages

The posts and pages have their own header element using the {{post_title}} template tag to show the post title. To modify it, head to Dashboard > Appearance > Elements and edit the Pages and posts hero header element.

The background color of the hero is transparent in order to show the gradient background added in the site wrapper.

Here is the CSS added for the border on top and below the titles:

.page-hero .border {
    height: 2px;
    background: #6adaf7;
    width: 80px;
    margin: 12px auto;
}

Posts List

The home page posts list can be modified using our Blog module.

Here is the CSS added for styling them:

/* Posts grid styles */
.generate-columns .inside-article {
    background-color: #f7fbfc;
    transform: scale(0.95);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    transition: all 0.1s ease-in;
}
.generate-columns .inside-article:hover {
    transform: scale(1);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
}
.post-image {
    line-height: 0;
}
h2.entry-title {
    font-size: 15px;
    padding: 20px 40px;
    text-align: center; 
}
.blog.post-image-above-header .inside-article div.post-image, .blog .entry-summary, .blog footer.entry-meta,
.archive.post-image-above-header .inside-article div.post-image, .archive .entry-summary, .archive footer.entry-meta{
    margin: 0;
}
.blog.one-container .inside-article, .archive.one-container .inside-article {
    padding: 0;
}

Pages and posts content container width.

The container width of 1100px is used through out the site.

The content container width for pages and posts are modified with the CSS below:

/* Single posts narrow content container */
.one-container .entry-content, .comments-area, footer.entry-meta {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}