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

[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!

[Ying]

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.

[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?

[Ying]

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.

[Graham]

https://www.loom.com/share/93a400afdded44dfa5950b71b9ad9692

[Ying]

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.

[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.

[Ying]

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;
}
}

[Graham]

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

[Ying]

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

[Graham]

ok will give it a try and report back.

[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;
}
}

[Ying]

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.

[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?

[Graham]

example: https://dropdeskstage.wpengine.com/blog/best-dual-monitor-stands

[Author]

Posts