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 pos...
  • 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 )

PaoloT's avatar
PaoloT
Lithium Alumni (Retired)

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).

  • PerBonomi's avatar
    PerBonomi
    Boss
    11 years ago

    Alright, I tink I see how that might work, but I'm missing a step, I think.

     

    Practical example:

    We have the standard community layout on the frontpage:

    three columns:

    title, posts,new

    I want to hide the new column for specific roles. How do I do actually do that?

    • nathan's avatar
      nathan
      Executive
      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 )

      • PerBonomi's avatar
        PerBonomi
        Boss
        11 years ago

        Thanks, Nathan :)