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

Home Forums Support Custom Right Sidebar width differently than the global setting.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #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

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

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

    #1452084
    David
    Staff
    Customer Support

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

    #1452102
    Huseyin

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

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

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

    #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)

    #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;
    }
    #1453168
    Huseyin

    thanks,

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

    #1453171
    Elvin
    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1453172
    Huseyin

    Great Thanks

    πŸ™‚

    #1453372
    David
    Staff
    Customer Support

    Glad we could be of help

    #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

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