Apply CSS (Style Sheet Extension) for certain users?

Help / Discuss
, ,
#1

Hello everyone,

I would like to hide a button only for the unregistered people on my Xwiki website but I really don’t find how to do it. Indeed I would like to create a style sheet extension to hide this button but it should be applied only for certain users or groups.

Thank you in advance for your help !

#2

Hi @STG,
An unregistered user is considered as being the XWiki.XWikiGuest. You can check in velocity the value of the current user with the $xcontext.user call. You can do:

#if ($xcontext.user == 'XWiki.XWikiGuest')
  display button
#end
#3

Hi @acotiuga ,

First of all thanks for your answer.
Indeed this velocity code works to display things for certain users.
However I don’t know how to adapt it in order to hide a specific button. Indeed I have tried to “take” the name of the existing button with the developer tools and use it in this code :

#if ($xcontext.user == 'XWiki.XWikiGuest')
  #set ($btn-default.hidden = true)
#end

But I think I’m completely wrong…

#4

You can build a new boolean variable inside the initial condition or you wrap your button with that check.

#if ($xcontext.user == 'XWiki.XWikiGuest')
  <button>your button</button>
#end

or

#set ($showButton = true)
#if ($xcontext.user == 'XWiki.XWikiGuest')
  #set ($showButton = false)
#end
....
...
...
#if ($showButton)
  <button>your button</button>
#end
#5

Hello, I can only add to above mentioned code, it depends on how you’d prefer to write it, you can also create custom CSS rule or JS code as seprate document. And call it in the if statement for CSS call #set($discard = $xwiki.ssx.use($doc.fullName)) or if you’ve manipulated style via JS ($discard = $xwiki.jsx.use('$doc.fullName')). More about it can be found here - XWiki Skin.

1 Like
#6

As I think about your question I get the idea that you would probably like to do more than just hide a button. Maybe not as of yet but probably in the future more things will pop up, things of which you would like to style based on the user profile.
Therefore I suggest you could create (at least) two different stylesheets.
Based on the answers given already you can add this code on top of your page where you want to present this difference between the user profiles.

#if ($xcontext.user == 'XWiki.XWikiGuest')
  #set($discard = $xwiki.ssx.use("XWiki.guestStyles.WebHome"))
#else
  #set($discard = $xwiki.ssx.use("XWiki.userStyles.WebHome"))
#end

For the rest it would be easy to control how the page would look like for guests and for logged in users.

CSS for guests (XWiki.guestStyles):

.button-to-hide {
  display: hidden;
}

CSS for logged in users (XWiki.userStyles):

.button-to-hide {
  display: block;
}

This is ofcourse a gist, details are up to you. I think you would make your life much easier when you work this way.

Anyway, good luck and happy developing! :slight_smile:
JP