Help with a few more CSS tweaks

Here’s what I’m looking to do, all on user profile:
(This is for an internal employee board. I know the pros/cons of using CSS for all of these things. I am just hoping for some help identifying elements/code to do what’s needed.)

  1. hide invites, notifications from admin view, but restore view for self (user)

    • user can see their own tabs but hide from admin view
  2. hide picture change icon from self (user), but restore in admin view

    • I only want admins to be able to change user profile pic
  3. hide about me, location and website header/entry boxes from all users.

    • we have no need for these, just don’t want random people entering stuff.
  4. hide the mute users tab from self (user) but restore admins view

    • we are an employee board, I don’t want people to even see controls for muting a user. But admin should still have it visible to fix in case somehow a user does get muted

Anyone? Still could use some feedback/insight

Quick guide to figuring out what CSS is needed to make small tweaks like this:

  • Right click on the thing you want to hide / adjust and click “inspect”
  • This will open up browser tools; you should see an “elements” section with the HTML of the page, and a “styles” section that lists the CSS rules applied to the selected element
  • Try changing or adding CSS rules in the “styles” list, and you should see them take effect on the page (a preview, basically, applied just for the current page load). For hiding elements for example you’d add a rule display: none;
  • Once you figure out what rules are needed, you can take those CSS rules and add them to a theme customization in Discourse so they’ll always be applied

For admins, looks like there’s a CSS class staff applied to the top level body element, which may come in handy helpful for targeting certain things just for admins/staff but not other users.

It will probably take some trial and error to get the correct selectors, but pretty sure most (maybe all) of this stuff should be doable with CSS.

8 Likes