Hide header elements for anonymous users?

[Maja Kovats]

I'd like to remove these elements from the Confluence header for anonymous/unregistered users:

"Log in" can stay.

I've looked at these resources, but I'm still unable to identify exactly what these elements are:

• https://confluence.atlassian.com/confkb/how-to-hide-elements-in-confluence-using-css-or-javascript-313458894.html?
• https://community.atlassian.com/t5/Confluence-questions/How-do-I-hide-the-Browse-menu-from-anonymous-users-in-Confluence/qaq-p/83237

I know how to remove the entire header, but I'm hoping I can avoid that for this reason:

https://community.atlassian.com/t5/Confluence-questions/How-to-modify-the-breadcrumb-navigation-bar-for-Confluence-from/qaq-p/1016421

Sorry if this question is lazy and/or bad practice. If anyone can recommend an app to accomplish this, please let me know too.

Feel free to tell me I'm barking up the wrong tree entirely.

Thanks!

[Stephen Sifers · Accepted solution]

Hello Maja,

Thank you for providing details into what elements of Confluence you’re wanting to hide.

I tested out a few CSS options and found the following works when applied as a global stylesheet to Confluence. This example would apply to all users.

#main-header-placeholder {display:none;}
#header-precursor {display:none;} 
#header {display:hidden !important;height:40px; } 
div.aui-header-primary {display:none !important; } 
div.aui-header-secondary .aui-nav #search-ui {display:none }
#main-header {display:none;top:0px;left:0px; } 
#metadata-history-dialog-link { display:none; } 

However, when I attempted to apply this via Custom HTML with Javascript, it did not come out as desired. The top bar shrunk and I was unable to adjust its size via javascript alone. Here is the Javascript I used;

<script>
AJS.toInit(function(){
if (AJS.params.remoteUser == ''){
AJS.$('div.aui-header-primary').hide();
AJS.$('div.aui-header-secondary .aui-nav #search-ui').hide();
AJS.$('#header').setAttribute("style","height:40px");
}
});
</script>

While this is not a complete solution, you do have an option of using the CSS stylesheet or finishing the javascript portion to have it adjust the size of the header bar.

I hope this proves helpful and gives some direction on hiding elements from anonymous users.

Regards,
Stephen Sifers

[Maja Kovats]

Hi Stephen-- thank you so much for putting this together. I have not yet tried it, but I'm sure its a great starting point.

In the meantime, I have also been looking into theme add-ons, and I've found it frustrating how while most allow different themes for different spaces - I've not found one that allows you to maintain the default Confluence theme for some spaces, while applying a custom theme to others.

I'm not responsible for all of my team's internal documentation and project spaces, just our customer-facing spaces (KBs). The default Confluence theme is perfectly fine and what people are used to internally, so there is no need to change it.

All I need is the ability to tweak the Confluence theme to be more appropriate for anonymous viewers.

Anywho, I just wonder if I'm missing something or going about this in completely the wrong way-- because this use case does not seem so uncommon to me.

Thanks again though!

[Neetam Limbu]

Please click the settings icon on the top right corner, from the drop down menu, click on general configuration. Find the section "Look and Feel" and click Cusom HTML. Click on edit button and paste the following code on the head section and save.

<script>
AJS.toInit(function(){
if (AJS.params.remoteUser == ''){
AJS.$("#space-tools-menu-trigger").hide();
AJS.$(".aui-header-logo-device").hide();
AJS.$("#space-menu-link").hide();
AJS.$(".aui-buttons").hide();
AJS.$("#search-ui").hide();
AJS.$("#action-menu-link").hide();
}
});
</script>

[Cameron Clancy]

@Neetam Limbu is this still working for you?  And is it Cloud or Server you're using?

It seems the "Custom HTML" option is no longer available??