[Resolved] Questions / Help

[Peter]

Hello,

So we are going to use GP Premium + Elementor Pro for our website. We will have the theme to handle all the fonts and colors.

We will use Elementor Pro for pages only like outlined here

I have some questions.

So I like some of the elements of Volume theme I’m trying to replicate to some degree.

1. on our main nav in you can see we have a white line above menu names, how can I get rid of that white line?
2. on our main nav in you can see we have a black line when we hover over the menu names, how can I get rid of that black line?

Image for reference

3. On the Volume website the header and footer go right across full screen, for some reason I can’t get either the header or the footer to do this.

My container is set in both GP Premium + Elementor Pro to 1140 px. I read here that I should set to 2000px but I tried that with no luck.

4. On the volume website, I like how the text is centered on the bottom of the hero header please see the image. how can I do this?

5. Also on the volume website, I like how the text has some padding below the hero header before the article starts please see the image.

Thanks

[David]

Hi there,

1. In Customizer > Additional CSS – remove this:

.main-navigation .inside-navigation {
    border-top: 0.5px solid #d4d7d8;
}

2. Remove this CSS:

@media (min-width: 769px) {
    .main-navigation ul li {
        position: relative;
    }

    .main-navigation ul li:after {
        content: '';
        position: absolute;
        height: 0;
        width: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        filter: hue-rotation(90deg);
        -webkit-filter: hue-rotation(90deg);
        -webkit-transition: height 0.35s ease;
        transition: height 0.35s ease;
    }

    .main-navigation ul li:hover:after, .main-navigation ul li.current-menu-item:after {
        height: 6px;
    }
}

3. You need to set the Header Container and Inner container to full width in Customizer > Layout > Header.

4. Dashboard > Appearance > Elements – edit the Single Post header. You will need to disable full screen and set you Top Padding higher then the bottom padding. Volume has 18% Top padding and 20px bottom padding.

5. Customizer > Layout > Container – add some Top padding. Volume uses 40px all round.

[Peter]

Thanks,

For the CSS I get this message when I try to remove this 2 suggested CSS.

“Unable to save due to 1 invalid setting”

Also before I even remove the CSS I have this at the top of that section

“There are 2 errors which must be fixed before you can save.
Update anyway, even though it might break your site?”

These are the errors

View post on imgur.com

View post on imgur.com

Also the section you suggested to remove has this warning

View post on imgur.com

Thanks

Here is the CSS

/* GeneratePress Site CSS */ /* Colors */
.main-navigation ul li:after {
    background-color: #000;
}

.main-navigation .inside-navigation {
    border-top: 0.5px solid #d4d7d8;
}

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    color: #fff;
}
.navigation-search.nav-search-active {
	background-color: rgba(255,255,255,0.95);
	top: 100%;
}

/* Theme Global */
@media (min-width: 769px) {
    body {
        margin: 0 30px;
    }
}

body.single-post.no-sidebar .site-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation */
.second-nav.grid-container {
    padding: 0;
}

@media (min-width: 769px) {
    .main-navigation ul li {
        position: relative;
    }

    .main-navigation ul li:after {
        content: '';
        position: absolute;
        height: 0;
        width: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        filter: hue-rotation(90deg);
        -webkit-filter: hue-rotation(90deg);
        -webkit-transition: height 0.35s ease;
        transition: height 0.35s ease;
    }

    .main-navigation ul li:hover:after, .main-navigation ul li.current-menu-item:after {
        height: 6px;
    }
}

/* Widgets */
.widget-title {
    margin: 1em 0;
    font-size: 0.8em !Important;
}

.widget .wp-show-posts article {
    margin-bottom: 0.5em !important;
}

.zero-padding {
    padding: 0 !important;
}

.widget.no-background {
    background-color: transparent;
}

/* Buttons */
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) {
    pointer-events: initial !important;
    border-color: inherit;
    border: 1px solid;
}

/* Page Heros */
.page-hero.overlay {
    -webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
}

.gradient-overlay {
    position: relative;
    z-index: -1;
}

.gradient-overlay:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(3, 89, 155, .5)), to(rgba(14, 161, 234, .6)));
    background: linear-gradient(rgba(3, 89, 155, .5), rgba(14, 161, 234, .6));
    z-index: -1;
}

/* Blog */
.generate-columns .inside-article {
    padding: 0 0 15px;
}

@media (max-width: 768px) {
    .generate-columns .inside-article>*:not(.post-image) {
        padding: 0 15px;
    }
}

.generate-columns-container article .inside-article .post-image {
    margin-bottom: 0.5em;
}

.generate-columns-container article .inside-article .entry-summary {
    margin-top: 0.5em;
    font-size: 0.8em;
}

.generate-columns-container article .entry-header, .wp-show-posts-entry-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

@media (min-width: 768px) {
.generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
}
}

.wp-show-posts .wp-show-posts-inner {
    overflow: hidden;
}

@media (min-width: 420px) {
.wpsp-align .wp-show-posts-image {
    margin-bottom: 0;
}
}
.wpsp-align .wp-show-posts-image a, .wpsp-align .wp-show-posts-image img {
    height: 100%;
}

.generate-columns-container article .inside-article img, .wp-show-posts-image img {
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

/* WPSP Grids */
/* Single column align side image */
/* Add wpsp-align class to to WPSP List shortcode wrapper */
@media (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .wpsp-align .wp-show-posts-inner>div {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 768px) and (min-width: 420px) {
    .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
        margin-right: 1.5em;
    }
}

/* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */
@media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
        display: grid;
    }
}

@media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr auto;
    }

    .wpsp-grid .wp-show-posts article:first-child {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        grid-column: 5 / end;
        grid-row: 1 / 2;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 2 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-column: 7 / end;
        grid-row: 2 / 4;
    }
}

@media (max-width: 899px) and (min-width: 600px) {
    .wpsp-grid .wp-show-posts article {
        grid-column: span 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-row: 3;
        grid-column: span 2;
    }
}

.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
    height: 250px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid article:first-child .wp-show-posts-image a img {
    height: 500px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
    display: none;
}

/* WPSP Card Styling */
/* Add wpsp-card class to WPSP List shortcode wrapper */
.wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
}

:not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
    margin-bottom: 0 !important;
}

.wpsp-card .wp-show-posts-inner {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.wpsp-card article {
    position: relative;
    overflow: hidden;
}

.wpsp-card article, .wpsp-card article .wp-show-posts-image img {
    -webkit-backface-visibility: hidden;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

.wpsp-card article:hover .wp-show-posts-image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

/* Post Navigation */
#post-nav a {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #post-nav a {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
}

#post-nav, #post-nav .post-nav-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#post-nav {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 60px;
}

#post-nav .post-nav-wrap {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 120px;
    height: 100%;
    padding: calc(6% + 1em) 5%;
    -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    -webkit-transition: -webkit-box-shadow 500ms;
    transition: -webkit-box-shadow 500ms;
    transition: box-shadow 500ms;
    transition: box-shadow 500ms, -webkit-box-shadow 500ms;
    position: relative;
	box-sizing: border-box;
}

#post-nav .post-nav-wrap:hover {
    -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
}

.post-nav-wrap>* {
    color: #fff;
}

.post-nav-date {
    font-size: 0.9em;
}

.post-nav-title {
    margin: 5px 0 !important;
}

.post-nav {
    min-width: 60px;
    position: absolute;
    top: 0;
    border-radius: 0 0 2px 0;
}

.post-nav:first-child {
    left: 0;
}

.post-nav:last-child {
    right: 0;
}

.post-nav {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 0.7em;
    text-transform: uppercase;
    background-color: #ff1956;
    color: #fff !important;
}

.header-widget .lsi-social-icons li {
	margin-bottom: 0 !important;
}

body .happyforms-flex {
	padding: 0;
} /* End GeneratePress Site CSS */

[Peter]

3. You need to set the Header Container and Inner container to full width in Customizer > Layout > Header.

I did this but no change? https://imgur.com/NADPPhk

4. Dashboard > Appearance > Elements – edit the Single Post header. You will need to disable full screen and set you Top Padding higher then the bottom padding. Volume has 18% Top padding and 20px bottom padding.

I did this but no change? https://imgur.com/aFak6dp

5. Customizer > Layout > Container – add some Top padding. Volume uses 40px all round.

I did this but no change? https://imgur.com/HioRnSM

In elements here are my items

View post on imgur.com

All posts header setting are as follows

View post on imgur.com

All posts layout container set to full width

[David]

The errors and the warnings in the Additional CSS can be ignored. WP’s code lint doesn’t cover some of the newer CSS features like CSS Grid.

3. Looks like it worked to me – you may need to clear your browser cache. But you also have this Additional CSS which is adding margins to the body – remove that:

@media (min-width: 769px) {
    body {
        margin: 0 30px;
    }
}

4. The bottom padding needs to be PX (pixels) you have it set to %.

5. You have the Page Builder container in your Layout Element set to full width (or contained). This strips out all the padding as you would expect it to be added by your pagebuilder. Set it to default instead for your posts.

[Peter]

I cleared my cache but nothing is working? I’m still getting white space on either side of my header and footer.

would I be better to install the Volume theme then work backward with the page builder for the pages?

this page’s image https://gpsites.co/volume/sample-post/ also shows larger than mine and the header text is at the bottom and aligned to the left but still centered?

Thanks

[David]

I think that re-installing Volume would make sense. It looks like you may have installed a Site before Volume and some of its CSS is left over.

This article explains how to remove a Site:

https://docs.generatepress.com/article/removing-imported-site/

The Link at the bottom of the article for WP Reset plugin is the best way to do this when you have no content to lose. Once reset and you have reactivated the Theme and plugin, just check in the Customizer > Additional CSS to make sure it is empty of old CSS.

[Author]

Posts