Thanks for importing Charge 🙂

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

The sections below provide a quick overview of 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.

Body

This CSS below is used to set the outer container (only be visible if the screen width is more than 1500px) of the site to color #ddd and make the inner container width 1500px.

html {
	background: #ddd;
}
body {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

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: 3em;
	}
}

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 {
    padding-left: 50px;
    padding-right: 50px;
    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.

This CSS is used to style the post title in the header element:

.page .page-hero h1, .single .page-hero h1 {
    display: inline-flex;
    background: rgba(0,0,0,0.1);
    border-bottom: 5px solid #f6c956;
    padding: 20px;
    margin-bottom: 0;
}

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