[Resolved] Assistance With GP Pro Setup For Theme Layout & Styling

Home Forums Support [Resolved] Assistance With GP Pro Setup For Theme Layout & Styling

Home Forums Support Assistance With GP Pro Setup For Theme Layout & Styling

  • This topic has 5 replies, 2 voices, and was last updated 4 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1197556
    Marty

    Hi there, I’ve purchased GeneratePress premium. I’ve been trying to set up a site with styling similar to my old theme, ReHub.

    However, I’m unsure about a few things. If you could assist me I’d appreciate it!

    1. Adding thin border line between main menu options

    2. Adding border around the text body container area

    3. I’m attempting to set the text body width in the layout module, but I can’t seem to get it just right. For some reason I often end up with an odd (not even) pixel width in this area and get the layout the same.

    I’m trying to duplicate the same setup for my old theme: 788px width for the text, ~24px spacing (I think) on the left and right sides.

    Thank you! (Notes in the test post content at the URL provided)

    #1197806
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Try this CSS:

    .main-navigation .main-nav > ul > li:not(:last-child) > a {
        border-right: 1px solid #ddd;
    }

    2. This might do it:

    .inside-article {
        border: 1px solid #ddd;
    }

    3. Setting a static width for you content isn’t a great idea, as it’s not fully responsive unless you go crazy with media queries. Wouldn’t it work to just adjust your container width and sidebar width until you reached an optimum width?

    Let me know πŸ™‚

    #1197840
    Marty

    Hello, Tom, and thank you for your help! I added both #1 & #2 that you provided, customized the colors, and it looks good! πŸ™‚

    Hopefully, after I played around the Layout and Spacing settings I now understand what you mean about adjusting the container & sidebar values.

    However, while doing that did give me the content width of 788px as desired, I can’t figure out how to get the left background spacing (left background area outside of the content container) changed. Also the space between the content container and the right sidebar (seems to be 40px).

    I’d like to change my existing sites using ReHub to GeneratePress Pro too, but they’re based on the 788px image & element width and some other layout dimensions.

    Is there a way to:

    1. Change the left side/background spacing outside of the content container
    2. Right sidebar width (change from 250px to ~334px)
    3. Right spacing between the content container and right sidebar (currently looks to be 40px, I’m trying for 24px)

    I couldn’t find the information on how to do this when searching. Thank you again!

    Marty πŸ™‚

    #1198621
    Tom
    Lead Developer
    Lead Developer

    I’m not too sure what you mean by the spaces outside the container – can you show me a screenshot maybe?

    As for the sidebar, setting a fixed width isn’t easy, but you could try something like this: https://generatepress.com/forums/topic/how-to-set-exact-pixels-in-content-sidebar-width/#post-441791

    That code assumes the sidebar is set to 30% width.

    #1198773
    Marty

    Hi Tom, thanks for your reply. I went and played around with the Widget settings and it’s closer but unfortunately, I’m still having issues.

    When I made Layout > Widget settings now the body text width can extend too far (past the max. desired width). Is there a way to limit the max body text width or something (only for standard posts, not full-width pages)?

    …or whatever is the best way to do all of this, if I’m doing it wrong.

    Snapshots in this URL:

    https://poolurchin.wpstagecoach.com/test-post/
    Live page with these settings:
    https://poolurchin.wpstagecoach.com/about-us/

    Thank you! πŸ™‚

    #1198940
    Tom
    Lead Developer
    Lead Developer

    Without using fixed widths (bad idea), your only choices are to:

    a) Reduce the width of the container (Customize > Layout > Container)
    b) Increase the width of your sidebar (Customize > Layout > Sidebars)
    c) Increase the “Separating Space” option (Customize > Layout > Container)

    The space on either side of the website is just the space between your site container and the edge of your screen. This space will be different for everyone depending on the size of their screen/resolution.

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