Dashboards & Visualizations
Highlighted

How do I apply my custom CSS to each page I select from my custom navbar in an app?

Communicator

So I created an app with a custom navbar. I added the dashboard.css and application.css to the app, and works fine for all the elements in my navbar. The problem is, if I choose the "basic" item from the navbar, like Search, Pivot, Dashboards, .. etc, the CSS is not applied, and the design is reverted to the default splunk design.

How can I fix this ?

Tags (4)
Highlighted

Re: How do I apply my custom CSS to each page I select from my custom navbar in an app?

Communicator

So you have custom CSS which has added on some more links across the top next to the usual ones?
e.g.
Search, Alert, Report, Dashboard, customlink1, customlink2

0 Karma
Highlighted

Re: How do I apply my custom CSS to each page I select from my custom navbar in an app?

Communicator

Yes, actually the usual ones are in a dropdown, and there are some custom ones. The CSS works with all the custom ones, but not with the usuals

0 Karma
Highlighted

Re: How do I apply my custom CSS to each page I select from my custom navbar in an app?

Communicator

Have you tried using the User Navigation within Splunk?

If not this can achieve want you want to, have a look here and download the pdf:
http://docs.splunk.com/Documentation/Splunk/6.2.3/AdvancedDev/BuildNavigation

You will have something like:

    <nav  search_view="search" color="#FF0000">
      <view name="search" default='true' />
      <collection label="Default">
        <view name="dashboards" />
       <view name="alerts" />
       <view name="reports" />
      </collection>
        <view name="link1"/>
        <view name="link2" />
        <view name="lin3" />
    </nav>
0 Karma
Highlighted

Re: How do I apply my custom CSS to each page I select from my custom navbar in an app?

Communicator

This is just the color of the navbar, but in my CSS I'm using several other selectors as well.

0 Karma
Highlighted

Re: How do I apply my custom CSS to each page I select from my custom navbar in an app?

Communicator

it's not just the colour it also sets out the menu items, and the sub menu's, it will work without the colour:

<nav  search_view="search">
       <view name="search" default='true' />
       <collection label="Default">
         <view name="dashboards" />
        <view name="alerts" />
        <view name="reports" />
       </collection label="Custom">
         <view name="link1"/>
         <view name="link2" />
         <view name="lin3" />
     </nav>
0 Karma
Highlighted

Re: How do I apply my custom CSS to each page I select from my custom navbar in an app?

Communicator

What are your other selectors?

0 Karma