[Resolved] Project Site Layout

Home Forums Support [Resolved] Project Site Layout

Home Forums Support Project Site Layout

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #1670354
    Simon

    I’m starting a really ambitious project today, I’m going to try and get my website to look how I always wanted it to but never had the confidence until now…

    I’m sorry there are a couple of questions but I can open separate tickets if that’s better.

    Q1. Right now I have a colour background image for my homepage. For all pages and posts, can I combine image background for header and content containers to get the effect of the background image behind the menu like below? Is it even possible?

    header image

    Q2. It looks like I can only center both the content column and sidebar together. Is there a way to centre the content column and have the sidebar to the right, as in the image below?

    sb

    Thank you so much in advance!

    #1670490
    David
    Staff
    Customer Support

    Hi there,

    1. That full width merged header is currently best done with a Header Element:

    https://docs.generatepress.com/article/header-element-overview/

    But we’re about to release GPP 2.0 which will allow you to build dynamic heros ( and more ) using the Block Element. So maybe you will want to wait until its fully released?

    2. Post Content / Sidebar layout first – try adding this CSS:

    @media(min-width: 1024px) {
      .right-sidebar .site-content .content-area {
        width: 50%; /* Width of content minus width of sidebar */
        margin-left: 25%; /* width of sidebar */
      }
    }
    #1670863
    Simon

    Thank you for the sidebar code. Really getting there now.

    Just a few questions with the header element.

    This is how it looks at the moment:

    current

    As you can see, not able to get the colour touching the menu. Maybe I’ll have to wait for the GPP 2.0 for that.

    This is what I’m aiming for:

    aiming for

    Is there a way for the background image to ‘overlap’ the main blog content column like above?

    And I played around with author and comments link divs as shown in video on page you sent, but the comment code shows. It may be because I have this code in custom CSS:

    `.single .entry-meta {
    text-align: center;
    }

    .single .comments-link {
    display: inline-block;
    }`

    #1670900
    David
    Staff
    Customer Support

    So the example site is using a Shape Divider at the very top of the content to form the White slanted background color. With GPP 2.0 you will be able to use a Container Block with Shape to create that effect on your hero…. then its just a case of using the Header Element to merge the site header and set is backgrounds to transparent.

    To pull the page content over the header element you can use this CSS:

    @media (min-width: 769px) {
        .single-post .page-hero + #page {
            margin-top: -100px; /* adjust margin to suit */
        }
    }

    When the new update comes out and you use a Block Element, the main Container Block will need a CSS class of page-hero

    #1671014
    Simon

    I’m really looking forward to 2.0!

    Just tried that code, it doesn’t seem to be working?

    https://themakemoneyonlineblog.com/what-is-muncheye/

    #1671159
    David
    Staff
    Customer Support

    Doesn’t look like the CSS i added here:

    https://generatepress.com/forums/topic/project-site-layout/#post-1670900

    I did make an amend to just after i submitted my reply ….

    #1671172
    Simon

    Hey David,

    Yes, I added it again. Sorry, took it off earlier as it doesn’t look good. Sorry, I’ll keep it on this time.

    Here’s what it looks like:

    almost

    Same happened when I tried the merging function earlier.

    #1671187
    Simon

    Got it! Content Layout was set at One Container instead of Separate Containers.

    Thank you so much for your help today, I’ll try and leave you in peace for a while (no promises LOL!) 🙂

    #1671255
    Simon

    Hi again, just updated to 2.0, could you walk me through how to add block elements and shape dividers? Shall I just open a new topic?

    #1671352
    Elvin
    Staff
    Customer Support

    Hi there,

    Adding Block elements is pretty much the same.

    While the UI changed, its functionality prior to 2.0 is retained. Tom just added more things.

    A wise man once said:
    "Have you cleared your cache?"

    #1671356
    Simon

    OK, can you give you me a step by step? I’ve lost track.

    I’m just wanting to move single meta into header like so:

    almost2

    #1671413
    Elvin
    Staff
    Customer Support

    Can you link us to this specific page? To have a better grasp of how its structured.

    A wise man once said:
    "Have you cleared your cache?"

    #1671713
    Simon

    Yes sure, so every posts page. Here’s one:

    https://themakemoneyonlineblog.com/what-is-muncheye/

    #1671794
    David
    Staff
    Customer Support

    This example shows the code you require to add the post meta inside the header element:

    https://docs.generatepress.com/article/page-hero-examples/#example-2

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