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

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

szabados — Thu, 11 Jun 2015 10:15:45 GMT

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 ?

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

MichaelPriest — Thu, 11 Jun 2015 13:54:16 GMT

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

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

szabados — Thu, 11 Jun 2015 13:56:28 GMT

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

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

MichaelPriest — Thu, 11 Jun 2015 14:04:14 GMT

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>

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

szabados — Thu, 11 Jun 2015 14:52:13 GMT

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

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

MichaelPriest — Thu, 11 Jun 2015 15:00:16 GMT

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>

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

MichaelPriest — Thu, 11 Jun 2015 15:00:47 GMT

What are your other selectors?