CSS for userroles

Hello @hotice83 !

I trust you’re doing great!

1. I want to collapse and hide/remove the left sidebar completely – so my content uses this space.

If I understand correctly, that’s the wp-admin menu you’re referring to. There’s an option to collapse it at the bottom, but you can also try this CSS in Branda >> Admin Area >> Custom CSS:

#adminmenumain { display: none !important; }
#wpcontent { margin-left: 0px !important; }

For the CSS per role, you can try this snippet: https://lakewood.media/add-user-role-id-body-class-wordpress/ and it will add a class specific to a role to the body element. Then you can target that specific role in your CSS, for example for Editors:

body.editor #some-selector { display: none !important; }

Warm regards,
Pawel

Thanks for this

I tried doing this with the CSS you had given along with snippet for my woocomercce “shop manager” role.

However, it seems when I do that, it removes all the other stuff I have set with Branda e.g menu items for that user role that i removed all come back

Hi @hotice83

Could you let us know what kind of CSS code you have added and does it have the correct selectors? If this is done correctly only those selectors should be hidden.

Also there is possibility you use selectors which are used in other sections. Then this could happen.

bad xxample:
body.editor .css_class_used_in_many_places {}

good example:
body.editor #some_container_like_#content .css_class_used_in_many_places {}

With that, it should only affect those selectors in some content.

Kind Regards,
Kris

i want to use this

#adminmenumain { display: none !important; }
#wpcontent { margin-left: 0px !important; }

for the user role “shop manager”

Can you please give me the exact css it should be

Sorry i’m not great at coding which is why i use branda in the first place

Hi @hotice83

Setting “display: none” for #adminmenumain will fully hide entire admin menu (entire left menu column in wp-admin) area. If this is exactly what you want to do then let’s take a step back.

1. remove all the code/undo everything that was discussed here so far

2. create empty file with a .php extension (e.g. “admin-userrole-css.php” )

3. copy and paste this code into it (using plain text editor)

<?php 

function wpmu_admin_side_role_based_style() {
	
	if ( current_user_can( 'shop_manager' ) ) {
	?>
	
	<style>
		#adminmenumain { display: none !important; }
		#wpcontent { margin-left: 0px !important; }
	</style>
	
	<?php 
	}
}

add_action('admin_footer', 'wpmu_admin_side_role_based_style');

4. save the file

5. use your favorite FTP client (like FileZilla or similar) or cPanel’s “File Manager” and upload that file to the “/wp-content/mu-plugins” folder of your site’s WP installation

It should work out of the box (I tested it).

Note please: I understand that this is slightly different and includes PHP but it’s very simple code and much simple solution than using multiple plugins and codes.

Kind regards,
Adam

Amazing!, thanks so much