[Resolved] Theme designs imbibing into page builder + a separator for blog posts

Home Forums Support [Resolved] Theme designs imbibing into page builder + a separator for blog posts

Home Forums Support Theme designs imbibing into page builder + a separator for blog posts

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #630326
    Swadhin

    Hi,

    I have this weird issue where the in the colors (in customizer) I have set links on hover change to orange. This is working good but at pages where I use Thrive Architect, this creates an issue when button colors when hovered changes to orange.

    Please see this page for example. The text in buttons are not intended to be orange but they do because I have set link hovers to be orange in theme. How to get rid of this?

    1) I want a separator line for blog. How to create a line (like this blog) that appears on single pages, as well as archive pages. Please see image.

    2) I want certain posts of mine to be center aligned (everything on the page except for menu) and have less width like say 850px. How to achieve that? Here is a GP site that does it (all other page templates including sidebar and full width etc are as they should be, this is only for specific posts I select).

    Thanks so much,
    Best regards
    -Swadhin

    GP Premium 1.6.2
    #630446
    David
    Staff
    Customer Support

    Hi Swadhin,

    the thrive buttons, don’t have a hover color class applied to them, worth checking in there settings to see if they are set to default and if there is an actual color selector. If not this CSS should do the trick:

    a.tcb-button-link:hover {
        color: #fff;
    }

    Adding a border to the site main wrapper, add a media query so its not there on smaller devices when the side bar stacks.

    Single Post full length:

    .single-post .site-main {
        border-right: 1px solid #222;
    }

    Single Post article length:

    .single-post .inside-article {
        border-right: 1px solid #222;
    }

    Archive Full length:

    .archive .site-main, .blog .site-main {
        border-right: 1px solid #222;
    }

    Media query – insert CSS i here to apply only to tablet and desktop:

    @media (min-width: 768px) {
    CSS RULES HERE
    }

    Changing the layout we can target individual pages with some CSS either by the Page-ID, or by using Simple CSS plugin. What pages are you trying to target? Do they have a common category? As we could add this as a body class and target that. Let me know.

    #630606
    Swadhin

    Hi David,

    Thanks for replying. πŸ™‚

    Awesome! I will go ahead and apply hover effects to all links (I was surprised because in my previous theme it worked okay without the hover effects too. Might be because the theme did not any color setting for linked when hovered whereas GP has.)

    The border worked exactly well but not on archive pages. Also, in my example link the line was just upto the post content, here it is crossing all the way till the Any idea?

    No these pages do not have a common category. I was thinking to target long-form content (can be in any blog category) to be center aligned and with less width (than a full-width page) to reduce distractions.

    For the page template, I could have set up this code .no-sidebar:not(.home) .container {max-width:800px;} (the exact code my friend I linked to above is using. But in that case, it would imply every post without a sidebar to be 800px which is what we don’t want.

    If setting up a custom category can help then I don’t mind adding all those posts into one insider category. But in this case, suppose I add a post on backlinks and I add it under the category 800px articles it will also be in a default category of link building the parent category of all posts related to backlinks.

    Will this set up not effect and work smoothly? If yes I can go on with adding a custom category.

    Best regrds,
    -Swadhin

    #630651
    David
    Staff
    Customer Support

    OK, i updated the CSS above, so full length and article length only borders for single posts, and one for archives, you can combine the selectors into one rule of course.

    Ok, so we just need to target specific pages (category classes could get messy with back links), so choices:

    1. Simple CSS plugin – allows you to add your CSS in the page / post editor. So copy and paste for each post.
    2. Prefix the CSS selector with the postid-# – and repeat that for every post.
    3. Or use a WordPress Custom Field to add a body class to those posts, heres a pretty cool article on a real simple method:

    https://krogsgard.com/2012/wordpress-body-class-post-meta/

    #630749
    Swadhin

    Thanks David,

    The first one about border is solved. What’s the purpose of this piece of code`@media (min-width: 768px) {
    CSS RULES HERE
    }`

    For the second one:

    Will adding custom CSS with simple CSS not be an issue with page load time. Excuse me I am not that well versed with codes and all. But will adding an extra plugin and extra CSS at a post level increase the page load time? Will it affect the page speed?

    P.S. Can we not simply create a custom post template like we have for sidebar, for full width etc etc?

    Best,
    -Swadhin

    #630761
    David
    Staff
    Customer Support

    OK that code is just if you want to restrict the border to desktop and tablet eg.:

    @media (min-width: 768px) {
        .single-post .inside-article {
            border-right: 1px solid #222;
        }
        .archive .site-main, .blog .site-main {
            border-right: 1px solid #222;
        }
    }

    Simple CSS writes the CSS inline to the head of the post, so as long as you’re not writing lots of code in there it wouldn’t be a problem.

    CPT Template is do-able, you would need to register the back end meta etc. so maybe something to investigate if it becomes a regular requirement.

    #631203
    Swadhin

    Good morning David and thank you πŸ™‚

    Then I think going the plugin way would be easier. Can you please provide me the code for it that is responsive across all devices but has a width of 900px on desktop?

    Just for knowledge:
    If we went CPT way:
    1) Is it within the scope of you to help me create a custom template?
    2) Even if we created, that means this custom template will be loading (since it is in the codes) while someone reads a post that has say full-width template or sidebar template too? If that is the case wouldn’t it increase page load time?

    P.S. Is the font we use here on the forum “Catamaran GP” exclusive to GP or we also can use it because I couldn’t find it in the typography module in the customizer. πŸ™‚

    Best regards,
    -Swadhin

    #631372
    David
    Staff
    Customer Support

    Ok i am thing what is the best method to make it simple for you.
    I think the CPT would overkill and really we just need an option for you to select in the editor.

    So do you ever use, or intend to use the Page Builder Container:

    https://docs.generatepress.com/article/page-builder-container/

    We could use the Contained option, which strips out all padding and margins. But adds a specific class to the body which we hit with the right CSS. Then its really simple to set this option.

    Any good? Let me know

    #631403
    Swadhin

    David,

    I already use that option for pages built entirely on page builder.

    #631472
    David
    Staff
    Customer Support

    In that case, the using the Code Snippets plugin is the current easiest method. As you already have disable sidebars on those posts you just need:

    #page {
        max-width: 800px;
    }
    #632103
    Swadhin

    Sorry David, I did not understand what you mean to say. Can you please explain a bit (this is all new for me so it’s taking some time to grasp, sorry for that).

    P.S. Please don’t miss the query on the P.S. section in this reply

    Best regards,
    -Swadhin

    #632319
    David
    Staff
    Customer Support

    Not a problem. Add the Simple CSS plugin:

    https://wordpress.org/plugins/simple-css/

    In the page / post editor. It will provide a Simple CSS Meta box.
    Just paste the above code into there and it will be applied to that page only.

    Actually i never noticed the Font before, ill check with Tom.

    #632323
    Swadhin

    Thanks so much.. Now I understand this. I was confused because I thought I had to add it in the page builder container box or something similar.

    This solved my issue.

    Yes, thanks! The font looks cool. I loved it the first time I saw after the redesign. Please keep me posted on this one.

    I am marking this thread as resolved. When you get the font information, kindly update it here. πŸ™‚

    Best regards,
    -Swadhin

    #632407
    David
    Staff
    Customer Support

    Awesome. Glad to be of help. I have asked Tom about the font πŸ™‚

    #632569
    David
    Staff
    Customer Support

    It seems its just the Google Font: Catamaran πŸ™‚

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