Custom Right Sidebar width differently than the global setting.

This topic has 23 replies, 3 voices, and was last updated 5 years, 4 months ago by Elvin.

Viewing 15 posts - 1 through 15 (of 24 total)

1 2 →

Author

Posts
September 21, 2020 at 2:27 am #1451857

Huseyin

Hi Generatepress Support Team,

So I would like have custom sidebar width differently than the global setting. Just want to have this custom sidebar on few pages.

I want to achieve this custom right sidebar:
– Where the page layout needs to be Full width
– This custom right sidebar needs to be on Desktop ONLY
– I just want to add one Shortcode to the custom right sidebar, where there will be 120×600 px AdSense AD banner placed with the shortcode on this custom right sidebar

Thanks

September 21, 2020 at 4:46 am #1452019

David
Staff
Customer Support

Hi there,

are you using the right sidebar elsewhere? If so you will need a plugin like: Content Aware Sidebars to set create a custom sidebar for those pages.

September 21, 2020 at 4:50 am #1452027

Huseyin

I’m already using the right sidebar for my blog posts.

Need this custom right sidebar for few pages.

Also, seen this page for too for custom sidebar width. https://docs.generatepress.com/article/sidebar-widths/#using-a-filter

Is there a way of doing without a plugin?

September 21, 2020 at 5:28 am #1452084

David
Staff
Customer Support

If you want to display different sidebars then you will need a plugin or custom development

September 21, 2020 at 5:38 am #1452102

Huseyin

oh okay, so I will install that plugin but how could i change the sidebar width for those pages?

September 21, 2020 at 6:13 am #1452140
David
Staff
Customer Support
You would use this code:
```
add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
        // If we're on the home page
	if ( is_front_page() ) {
		return 40;
	}
	
        // Return the default
	return $width;
}
```
The return 40; – the 40 is the % width. Adjust that to what you need.

The if ( is_front_page() ) { sets the condition to where this change is applied.

This needs to be changed to meet your requirements. For example you could use this instead:

if( is_page( array( 11, 22, 33, 44 ) ) ) {

This applies it to a series of Pages based upon their ID. If you’re using Pages this condition would apply and you would just need to change the ID#’s to match those pages.

You can find the ID of each page by editing the page, and checking the browser URL you will see the number there.
September 21, 2020 at 6:53 am #1452199
Huseyin
Thanks but it’s not working, also Content Aware Sidebars is configured

I added this code for code snippets;
```
add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
        // Custom Right Sidebar for Filtering Tables
	if( is_page( array( 14221, 19196 ) ) ) {
		return 20;
	}
	
        // Return the default
	return $width;
}
```
also, i had the following css code for global right sidebar width;
```
@media (min-width: 769px) {
    .right-sidebar .site-content {
        display: flex;
    }
    .right-sidebar #right-sidebar {
        width: 380px;
    }
    .right-sidebar #primary {
        flex: 1 0;
    }
}
```
September 21, 2020 at 7:40 am #1452277

David
Staff
Customer Support

The filter code is working, and the CSS you have added is also working ( and overriding the filter size ).

the image you’re displaying is only 120px wide. Use a wider image.

September 21, 2020 at 7:50 am #1452433

Huseyin

i think there is a misunderstanding, where I the want custom sidebar shorten the width so i could use 120px wide banner ads. So with sidebar padding is set to 40px, the custom right sidebar needs to be 200px (120px ad banner + 80px padding (left + right)

September 21, 2020 at 8:17 am #1452486
David
Staff
Customer Support
In that case – no need for the filter.
Use this CSS – it will change the width of a right sidebar on any full width page:
```
.right-sidebar.full-width-content #right-sidebar {
    max-width: 200px;
}
```
September 21, 2020 at 7:30 pm #1453168

Huseyin

thanks,

So i dont need the filter (PHP code) – could i deactivate it?

September 21, 2020 at 7:37 pm #1453171

Elvin
Staff
Customer Support

So i dont need the filter (PHP code) – could i deactivate it?

Yes you can deactivate it. You can delete it later if you really don’t need it.

September 21, 2020 at 7:39 pm #1453172

Huseyin

Great Thanks

🙂

September 22, 2020 at 12:33 am #1453372

David
Staff
Customer Support

Glad we could be of help

December 2, 2020 at 5:56 am #1563599
Huseyin
Hey Generatepress Team,

I’m back again, currently updating the site, need help on resizing the right-sidebar width on the full-width page only. (I will place the given CSS code on the pages needed because I separate the CSS codes by hook element). I just need a width of 160px with no padding inside.Please 🙂 (like i tried the following css codes, but no luck)
```
.right-sidebar. #right-sidebar {
width: 160px;
}
```
```
.right-sidebar.full-width-content {
width: 160px;
}
```
```
.right-sidebar.full-width-content #right-sidebar {
width: 160px;
	}
```
Thanks
Author

Posts

Viewing 15 posts - 1 through 15 (of 24 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Custom Right Sidebar width differently than the global setting.

Popular Articles

[Resolved] Custom Right Sidebar width differently than the global setting.

Popular Articles

Start building better websites today.