Forum Discussion

PerBonomi's avatar
PerBonomi
Boss
12 years ago
Solved

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

9 Replies

Sort By
  • sunny_mody's avatar
    sunny_mody
    Advisor
    12 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)
    12 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
    12 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
    12 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
    12 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 )

  • nathan's avatar
    nathan
    Executive
    12 years ago

    No problem.

     

    If you mark my answer as the solution, it will help other people to find it when searching.

  • PerBonomi's avatar
    PerBonomi
    Boss
    12 years ago

    Thought I'd post what I ended up doing in the end, just in case it helps someone, or anyone has suggestions for improvement.

    Info:
    Role A = Super User role - These users should always see all elements, regardless of their other roles
    Role B,C,D = low tier roles - These are new and lower tier users, elements get hidden for them
    is_user_new = false/true > flag to determine if the special css gets loaded, to hide elements
    yourcommunity > whatever your comunity is, in my case it's community.spotify.com

    NewUser.css (uploaded under assets):

    .CommunityPage .newMessageCountColumn,
.CommunityPage .lia-component-forums-widget-recent-messages,
.CommunityPage .lia-component-forums-widget-unread-threads,
.CommunityPage .lia-component-community-widget-quick-links,
.ForumPage .newMessagesCountColumn,
.ForumPage .kudosCountColumn,
.ForumPage .viewsCountColumn
{
display:none !important;
}

     



    Code (I put it in Page Head Content in the wrapper (under community style in Studio):

    <#list restadmin("/users/id/${user.id?c}/roles").roles.role as role>
    <#assign is_user_new = false />

    <#if user.anonymous == true>
        <#assign is_user_new = true />
    <#elseif role.name?? && role.name == "Role A">
        <#assign is_user_new = false />
    <#elseif role.name?? && (role.name == "Role B" || role.name == "Role C" || role.name == "Role D")>
        <#assign is_user_new = true />
    </#if>
</#list>

<#if is_user_new == true >
    <script type="text/javascript">
    //<![CDATA[
    if(document.createStyleSheet) {
      document.createStyleSheet('http://yourcommunity/html/assets/NewUser.css');
    }
    else {
      var styles = "@import url('http://yourcommunity/html/assets/NewUser.css');";
      var newSS=document.createElement('link');
      newSS.rel='stylesheet';
      newSS.href='data&colon;text/css,'+escape(styles);
      document.getElementsByTagName("head")[0].appendChild(newSS);
    }
    //]]>

    </script>
</#if>

     

  • PerBonomi's avatar
    PerBonomi
    Boss
    12 years ago

    Fixed a mistake in my code:

    <#if user.anonymous == true>

	<#assign is_user_new = true />

<#else>

	<#list restadmin("/users/id/${user.id?c}/roles").roles.role as role>
		<#assign is_user_new = false />
		<#if role.name?? && role.name == "Role A">
			<#assign is_user_new = false />
		<#elseif role.name?? && (role.name == "Role B" || role.name == "Role C" || role.name == "Role D")>
			<#assign is_user_new = true />
		</#if>
	</#list>
</#if>

<#if is_user_new == true >
	<script type="text/javascript">
	//<![CDATA[
	if(document.createStyleSheet) {
	  document.createStyleSheet('http://community-stage.spotify.net/html/assets/NewUser.css');
	}
	else {
	  var styles = "@import url('http://community-stage.spotify.net/html/assets/NewUser.css');";
	  var newSS=document.createElement('link');
	  newSS.rel='stylesheet';
	  newSS.href='data&colon;text/css,'+escape(styles);
	  document.getElementsByTagName("head")[0].appendChild(newSS);
	}
	//]]>

	</script>
</#if>