Dashboards & Visualizations

App | Manager | Jobs | Logout menu

Ant1D
Motivator

Hey,

I have a question about customising the following menu:

alt text

Is it possible to remove the Manager, App and Jobs links whilst keeping the Logout link? How would I remove any one of those links?

It would be good to be able to control which of these links different types of users (admin, dev etc) can see but for now, just knowing how to remove some of those links whilst keeping others would be great to know 🙂

I think that this is another application.css job but I am not sure.

Thanks in advance for your help.

1 Solution

sideview
SplunkTrust
SplunkTrust

The remorse: Classnames were not left on these links that would allow you to apply different styles to each link from your application's CSS. It'd be great if they had class="logoutLink" and class="managerLink" etc and this sort of thing would be trivial.

The good news: There is some non-trivial but still simple CSS that will do it.

.AccountBar ul li {
    display:none;
}
.AccountBar ul li:last-child {
    display:list-item;
}

The bad news: this CSS will not work on internet explorer 6, 7 or 8. Which pretty much rules it out unless for some reason all your users are on firefox, chrome, etc...

The other ideas: 1) from application.js you write a little bit of Javascript to use the same CSS selectors (jquery implements its own selectors so you can use the same CSS selector approach or several other approaches for that matter). However the other links may briefly flash as the page loads.

2) make a custom module that's basically a straight copy of all the 'AccountBar.*' files, but you find the bits in the mako template that create the other links and you remove them (mako template means the .html file)

View solution in original post

sideview
SplunkTrust
SplunkTrust

The remorse: Classnames were not left on these links that would allow you to apply different styles to each link from your application's CSS. It'd be great if they had class="logoutLink" and class="managerLink" etc and this sort of thing would be trivial.

The good news: There is some non-trivial but still simple CSS that will do it.

.AccountBar ul li {
    display:none;
}
.AccountBar ul li:last-child {
    display:list-item;
}

The bad news: this CSS will not work on internet explorer 6, 7 or 8. Which pretty much rules it out unless for some reason all your users are on firefox, chrome, etc...

The other ideas: 1) from application.js you write a little bit of Javascript to use the same CSS selectors (jquery implements its own selectors so you can use the same CSS selector approach or several other approaches for that matter). However the other links may briefly flash as the page loads.

2) make a custom module that's basically a straight copy of all the 'AccountBar.*' files, but you find the bits in the mako template that create the other links and you remove them (mako template means the .html file)

View solution in original post

Ant1D
Motivator

Thanks for the info

0 Karma

Ant1D
Motivator

If you know how to write the javascript that would make this work, could you share it please?

0 Karma

sideview
SplunkTrust
SplunkTrust

Because IE never implemented the ':last-child' selector, and without there being any other identifiable classname or id on the li element (and without even fancier selectors that might do the trick), IE is left with no way to do it at all.

0 Karma

Ant1D
Motivator

Why does this CSS not work in IE?

0 Karma

Dan
Splunk Employee
Splunk Employee
0 Karma
Register for .conf21 Now! Go Vegas or Go Virtual!

How will you .conf21? You decide! Go in-person in Las Vegas, 10/18-10/21, or go online with .conf21 Virtual, 10/19-10/20.