[Resolved] Templates for Pages and Posts with Same Styling

Home Forums Support Templates for Pages and Posts with Same Styling

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1324205
    Andres

    Hi,

    Please keep in mind I’m not a developer. Sorry if this is rudimentary for you. For me, it’s not. We are using GP Pro and GenerateBlocks at this point to create a new site. Our current site uses GP Pro with Elementor & Elementor Pro. We no longer want to use anything from Elementor and use just GP Pro and GB as much as possible as it really slows the site down even with lots of optimizations.

    How can I create a template (I’m not sure if that’s the correct terminology) that will permit me to replicate the styling of pages and posts? For example, when I create a new post or page on our current site, there is the option choose a Template (Quick Edit –> Template) that has particular styling options. On the new site with just GP Pro and GB, this option is not available.

    I’ve included a link to a page on our site for reference. It’s pretty basic styling. It’s just the left and right grey margins and having the page title centered (that’s being pulled from the page title when a page is created).

    From what I understand regarding font characteristics, those are set in Customizer –> Topography, and affect the text on the entire site, correct? If this is the case, then the template would really just be for the aforementioned R/L margins and centering the title.

    Thank you and have a good day!

    #1324359
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Yes, the Customizer options are global.

    Are those the only changes? If so, you definitely don’t need a page template for that, you just need a way to target those specific pages so you can add CSS to achieve the effects.

    Are the pages you want to target pretty random? How many of them?

    #1324387
    Andres

    Hi Tom,

    Thank you very much for the quick response!! Most of our content is divided into a few types: 1. Pages on things like About US, FAQs, client reviews, 2. Informative posts, topics related to getting married where we live,Contact Us, … and 3. Posts for weddings and wedding-related events we’ve photographed, 4. Pages that fetch the posts from numbers 2 and 3 (there are a total of 7 categories with page representing each one. The only two random pages are the home page and the main image gallery page.

    With that said, there are two primary types of pages that vary only with regards to how large the left and right, and top grey margins are. The font type and orientation is the same on all of them.

    Given what you said, what CSS would I use and where would I put it? Also, would it be okay to create one page for each of the two page types and then clone them when creating a new page? I don’t know if it would be necessary to write the CSS for each page after creating it.

    On a side note, we a few months ago, we had a developer create our current site. I am happy with how the front end looks, but it’s quite slow and there always seems to be some issue, especially when updated plugins. We want to use just GP Pro and GB as mush as possible to keep it simple and mostly from the same company. Out of curiosity, I created our About Page on GP Pro with GB and ran a test to make sure it was worth the trouble of redoing the site ourselves. It loaded this first time on GTMetrix in 1.1 seconds, over 3 seconds faster than the live page, with no optimization, caching plugin, or CDN, and the number of requests were halved!! We want to do the same for the rest of our site. As such, I wanted to make sure if it’s fine to ask you guys for guidance, which might be often.

    Again, thank you and have a good night!

    #1325350
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You would need a way to distinguish between the two styles.

    For example, if you could add a custom field to the pages where you want a different style, you could use that to add a class to the body element. For example, if you add custom field with the name “alt_style” and the value “true”, you could do this:

    add_filter( 'body_class', function( $classes ) {
        if ( is_singular() ) {
            $alt_style = get_post_meta( get_the_ID(), 'alt_style', true );
    
            if ( $alt_style ) {
               $classes[] = 'has-alt-style';
            }
        }
    
        return $classes;
    } );

    Then you could use the .has-alt-style class to target elements on those pages and change them with CSS. I would need to see an example of the alt style vs the current style to help with that.

    As for guidance on using GPP – we’re always happy to help the best we can in here 🙂

    #1325517
    Andres

    Hello Tom,

    Thanks for the response.

    Here are the 2 primary styles of pages. If you add the following to the domain I sent in the first email, it will take you to these pages. A note on the first one. The developer never finished the styling for this page. The grey upper border should be about 20% thinner, and that same border should be on the right and left sides of the page. It’s the same border styling as on 2. but much thinner.

    1. /about-us/
    2. /gallery/engagements-couples/tony-gabby/

    Please forgive my ignorance. What you wrote was a bit like reading Greek to me. From what I gather form your response, a script (don’t know if this is the correct term) is written to achieve a certain styling, one for each page. That script is written to the theme (?). Then, in the custom field, a class in input that connects that styling to that page. Is that correct?

    Please let me know if there is anything else you need form me to move forward.

    Thank you for your time and have a good weekend.

    Cheers!

    Andrés

    #1325720
    Tom
    Lead Developer
    Lead Developer

    So are you wanting to make certain pages that look like the second URL look like the About Us page?

    The second URL is using a page template which looks specific to Elementor. The about us page is using the standard template in GeneratePress.

    #1325821
    Andres

    Hi Tom,

    Again, thanks for the help. There are two styles we are looking for. One style looks like the About Us page. The other style looks like this page: /gallery/engagements-couples/tony-gabby/.

    A note on the first style. It was not finished by the developer. Basically, the only difference between the styling of these two pages is that one has a wider grey border on the top, right, and left sides fo the page. The About Us type pages should have a .5″ grey border on the top and right and left sides.

    Thank you and have a good night.

    Sincerely,

    Andrés

    #1326548
    Tom
    Lead Developer
    Lead Developer

    So for the About Us page, try using our Full Width option: https://docs.generatepress.com/article/page-builder-container/

    For the gallery page – that’s just the default template in GP.

    #1326616
    Andres

    Hi Tom,

    Thanks. I’m going to have to play around with it. The only thing I would need to modify on either page type are the grey borders. Is this accomplished in the Page Builder Container Options settings?

    Also, how do I modify the alignment of titles on pages and posts to have them centered?

    Enjoy the rest of your weekend.

    Cheers!

    Andrés

    #1326833
    Tom
    Lead Developer
    Lead Developer

    The grey border should just be your body background color set in Customize > Colors > Body.

    As for the alignment, this might help:

    .full-width-content .entry-header {
        text-align: center;
    }

    Thanks! You too 🙂

    #1326872
    Andres

    Hi Tom!

    Do you sleep?

    Thanks for the info!! That worked for centering the title on full-width pages/posts.

    In order to have the page title centered on the “Default” and “Contained” Page Builder Containers, would the CSS be:

    .default-content .entry-header {
    text-align: center;
    }

    and

    .contained-content .entry-header {
    text-align: center;
    }

    As for the borders, I see how to modify the color. Thanks! However, how do I change the size of the borders to get it the width of the border on this page: /client-resources/benefits-next-day-couples-session/ for example, and then make it to where there is no border on the bottom of the page?

    I’m sure you’ve heard this before, but I’m going to say it regardless. I am very surprised how fast GP is out of the box with no optimization. It’s really incredible. I copied the About Us page from our current site and it loads over 3X faster with no optimization and no caching plugin!!! Our current site is about as optimized as it can get, especially for that basic page. Thank you!!

    Have a good night.

    Cheers!

    Andrés

    #1327588
    Tom
    Lead Developer
    Lead Developer

    .contained-content is correct, but there is no class for the default content, that would just be:

    .entry-header {
    
    }

    You can reduce the width of your content area when no sidebars are present like this:

    .no-sidebar:not(.full-width-content) .site-content {
        max-width: 900px;
    }

    That will make it so more of the background color shows up.

    Great to hear about the performance gains! 🙂

    #1327656
    Andres

    Hi Tom,

    Thanks.

    Enjoy the rest of your weekend.

    Andrés

    #1327657
    Andres

    I’m marking the topic as resolved. Again, many thanks!

    #1327658
    Andres

    Oops! I failed to check the box.

    I’m marking the topic as resolved. Again, many thanks!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.