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 Block Element module. To modify it, head to Dashboard > Appearance > Elements and edit the Home hero header element.
- Posts and Pages
The posts and pages have their own block element using the dynamic data to show the post title. To modify it, head to Dashboard > Appearance > Elements and edit the Global hero element.
Posts List
The home page posts list can be modified using our Blog module and Block Element Content template.
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;
}