How to style multiple sidebars differently

Support
#1

Hi, I have a website that ive made multiple different sidebars for and i added some code into the functions.php file to have them display on their corresponding archives pages. I want to style them all differently, mainly in color. How would I do this? I used the inspector but dont see how to be specific to each sidebar.


Thanks
Rena

#2

Hi Rena,

Thanks for writing in! You can use page or post ID to add specific CSS rules into your sidebars. Please follow the example below.

.page-id-3458 .x-sidebar .h-widget {
    border-color: red;
}
.postid-5192 .x-sidebar .h-widget {
    border-color: red;
}

Please review the following article on how you can locate your page IDs or post IDs to target your specific pages (https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59).

Hope that helps.

#3

Awesome! Thank you for that!!!

#4

Actually… im still confused bc these arent pages they are archives.
I used this code to apply certain sidebars to each corresponding category archive: So how would it be for a category?

add_filter( ‘ups_sidebar’, ‘x_category_sidebar’ );
function x_category_sidebar($sidebar){
if( is_category( 59 ) ){
return ‘ups-sidebar-cherry-grove’;
} else if( is_category( 56 ) ){
return ‘ups-sidebar-atlantique’;
} else if( is_category( 60 ) ){
return ‘ups-sidebar-fire-island-pines’;
} else if( is_category( 52 ) ){
return ‘ups-sidebar-kismet’;
} else if( is_category( 58 ) ){
return ‘ups-sidebar-ocean-bay-park’;
} else if( is_category( 57 ) ){
return ‘ups-sidebar-ocean-beach’;
} else if( is_category( 53 ) ){
return ‘ups-sidebar-saltaire’;
}
return $sidebar;

#5

Hi Rena,

It would be similar but with category selector, example,

.category-59  .x-sidebar .h-widget {
    border-color: red;
}
.category-56 .x-sidebar .h-widget {
    border-color: red;
}

Where 59 and 56 are the category ID matching your above code.

Hope this helps.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.