[Support request] Editting SideBars (Main Blog vs Post)

Home Forums Support [Support request] Editting SideBars (Main Blog vs Post)

Home Forums Support Editting SideBars (Main Blog vs Post)

  • This topic has 17 replies, 2 voices, and was last updated 5 months ago by Ying.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #2149838
    Graham

    Hi,

    I was wondering if it is possible to separately edit the main blog sidebar vs specific post side bar?

    For example, https://dropdeskstage.wpengine.com/blog/ has the same sidebar as the post sidebar (and I would like them to be different). Any help would be appreciated!

    #2149875
    Ying
    Staff
    Customer Support

    Hi Graham,

    You can create 2 block element - sidebar to build 2 custom sidebars, assign one to posts and one to blog.
    https://docs.generatepress.com/article/block-element-sidebar/
    https://docs.generatepress.com/article/block-element-overview/

    Theblock element - sidebar will replace the default sidebar completely.

    #2149884
    Graham

    Since the blog is not really a static page, would I select front page as an option for the homepage?

    Also how do I add the widgets to the sidebar using the block element editor?

    #2149911
    Ying
    Staff
    Customer Support

    Most widgets now have block version (not all of them) , you can build the sidebar the same way as building a static page using blocks.

    #2149919
    Graham
    #2149923
    Ying
    Staff
    Customer Support

    I didn’t see your homepage in your video, so I’m not exactly sure what you are trying to achieve.

    The Email subscribe has some original CSS? If so, we should be able to make it work on this one as well, but I’ll have to see your current site.

    And yes, we can make it sticky using CSS.

    #2149947
    Graham

    https://dropdeskstage.wpengine.com/blog/ is the front page

    compared to a post: https://dropdeskstage.wpengine.com/blog/side-hustles

    Yes, The Gfrom has custom CSS and the sidebar would need to be sticky.

    #2149970
    Ying
    Staff
    Customer Support

    Try this CSS:

    .sidebar #gform_wrapper_2 {
            background-image: linear-gradient(45deg, #3698e3, #14a4cc 100%) !important;
    padding: 40px;
    }
    .sidebar #gform_wrapper_2 h2 {
        font-size: 22px;
        font-weight: 700;
        color: #fff !important;
        margin-bottom: 30px;
    }
    .sidebar input#input_2_1 {
        background: #f2f5f7 !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 13px 16px !important;
        font-family: europa,sans-serif !important;
        -webkit-font-smoothing: antialiased;
        font-size: 16px;
        vertical-align: top;
    }
    .sidebar input#gform_submit_button_2 {
        background-color: #3c3c4e !important;
        border: none !important;
        color: #fff !important;
        border-radius: 5px;
        font-family: 'Europa' !important;
        font-size: 15px;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        padding: 15px 30px !important;
        text-transform: uppercase;
    }

    If you want to hide the Email Subscribe text, add this CSS as well:

    .sidebar .gform_description {
        display: none;
    }

    To make sidebar sticky:

    @media (min-width: 769px) {
    div#right-sidebar .inside-right-sidebar {
        position: sticky;
        top: 100px;
    }
    }
    #2149990
    Graham

    Where would we embed this? In the theme CSS under customizer?

    #2150003
    Ying
    Staff
    Customer Support

    Yes, you can add CSS to customizer > additional CSS.

    #2150009
    Graham

    ok will give it a try and report back.

    #2150015
    Graham

    Ok so I added the below CSS. The only issue is it is missing the Join Our Newsletter title.
    `}

    .sidebar #gform_wrapper_2 {
    background-image: linear-gradient(45deg, #3698e3, #14a4cc 100%) !important;
    padding: 40px;
    }
    .sidebar #gform_wrapper_2 h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff !important;
    margin-bottom: 30px;
    }
    .sidebar input#input_2_1 {
    background: #f2f5f7 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 13px 16px !important;
    font-family: europa,sans-serif !important;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    vertical-align: top;
    }
    .sidebar input#gform_submit_button_2 {
    background-color: #3c3c4e !important;
    border: none !important;
    color: #fff !important;
    border-radius: 5px;
    font-family: ‘Europa’ !important;
    font-size: 15px;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 15px 30px !important;
    text-transform: uppercase;
    }

    @media
    (min-width: 769px) {
    div#right-sidebar .inside-right-sidebar {
    position: sticky;
    top: 100px;
    }
    }

    #2150037
    Ying
    Staff
    Customer Support

    It was there before, did you removed it from the block element or the form settings as I don’t see it in the HTML now.

    #2150043
    Graham

    Ok, that was the issue with the homepage sidebar thanks.

    Now under the post Side Bar, I wanted to have the quick links section in between the HTML block and the subscribe. The issue now is the quick links takes up too much space and you cannot see the subscribe anymore (under posts).

    What css can fix this?

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