Forum Discussion

PerBonomi's avatar
PerBonomi
Boss
11 years ago

Sideloading different css

I have had several requests to show/hide certain elements depending on what kind of user is logged in.

 

E.g. super users want to see all the columns, but a new user doesn't need to see the new posts or kudos column.

 

I'm thinking I can use javascript to dynamically load different css files for users with different  roles.

 

My questions to you: is this ill-advised? Are you doing something similar or totally different with the same results?

  • nathan's avatar
    nathan
    11 years ago

    I'm not aware of an option for hiding the new column.

     

    If you just want to hide it from view then you could use CSS. This won't remove the content from the source code though (so it's not secret).

     

    You can make this CSS dependant on the user's role by wrapping it in some FreeMarker.

     

    Here is an example of code that would hide the New column unless the user has the moderator role.

     

    <style>
<#if user.anonymous == true>
.newMessageCountColumn {
    display: none;
}
<#else>
   <#assign user_has_role = false />
   <#list restadmin("/users/id/${user.id?c}/roles").roles.role as role>
      <#if role.name?? && (role.name == "Moderator")>
         <#assign user_has_role = true />
      </#if>
   </#list>
   <#if !user_has_role >
      .newMessageCountColumn {
        display: none;
      }
   </#if>
</#if>
</style>

    (Code borrowed from this page: http://community.lithium.com/t5/Developers-Knowledge-Base/Using-FreeMarker-expressions-to-personalize-announcements-and/ta-p/7427 )

  • sunny_mody's avatar
    sunny_mody
    Advisor
    11 years ago

    Check whether you can restrict it using User Permissions,

    If the permissions are not solving your issue then javascript can be used.

     

    Thanks

    • PaoloT's avatar
      PaoloT
      Lithium Alumni (Retired)
      11 years ago

      Hi,

       

      have you considered extending the core components with a wrapping logic that detects the role of the user and displays the component only on certain conditions? You can do the same for custom components too (without needing to override / extend).

       

      Cheers,

      • nathan's avatar
        nathan
        Executive
        11 years ago

        I agree with Paolo - you'll have much more control by wrapping the existing components with custom components containing the relevant logic. CSS only has limited ability to change the appearance/layout of components.

         

        If you really need a CSS solution, I would suggest creating a custom component that inserts a link tag referencing a different CSS file depending on the user's role. You can add this to the relevant pages (or common header if you want it across the community).