Sideloading different css

Check whether you can restrict it using User Permissions,

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

Thanks

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,

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

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?

Thanks, Nathan :)

No problem.

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

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>

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>