Dashboards & Visualizations

application.css gets ignored in 6.0

FRoth
Contributor

I created a new app based on the sample_app and changed the application.css according to the examples from default.css as described here.

I restarted splunk several times and checked the applied styles with the "Inspect Element" function of Google Chrome. None of the styles I configured in application.css gets applied to my app.



E.g. I tried to change the style of the "section-title" - set it to "font-size: 40px;" and even that didn't get applied.

/* from application.css in /etc/apps/<appname>/appserver/static/ */
.section-title {
   font-size: 40px;
 }

Has anybody an idea why my changes to the application.css are completely ignored?

alt text

Tags (3)
1 Solution

melting
Splunk Employee
Splunk Employee

All of the pages in Splunk no longer load application.css or application.js in 6.0

To help clarify, here is a list:

  • pages (search, pivot, dashboard listings page, report listings page, alerts listing page) - no application.css/js
  • dashboards + forms (simple xml) - Load dashboard.css/js
  • views (advanced XML) - still load application.css/js

View solution in original post

melting
Splunk Employee
Splunk Employee

All of the pages in Splunk no longer load application.css or application.js in 6.0

To help clarify, here is a list:

  • pages (search, pivot, dashboard listings page, report listings page, alerts listing page) - no application.css/js
  • dashboards + forms (simple xml) - Load dashboard.css/js
  • views (advanced XML) - still load application.css/js

yannK
Splunk Employee
Splunk Employee

For advanced xml, you can call application.css (and I believe application.js) in the view element in advanced XML:

<view autoCancelInterval="90" isVisible="true" onunloadCancelJobs="true" template="dashboard.html" stylesheet="application.css">

0 Karma

yannK
Splunk Employee
Splunk Employee

See the new documentation :

http://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/Migration#JavaScript_and_CSS_support_...

And as a workaround you can specify the css file in simple XML dashboard manually.
example :
<dashboard script="application.js" stylesheet="application.css">

0 Karma

FRoth
Contributor

Ok, thanks for clearing things up.

0 Karma

melting
Splunk Employee
Splunk Employee

@FRoth currently there is no way to customize those pages outside of the header color and logo.

FRoth
Contributor

Oh - thanks. Yes - I upgraded to 6.0 before I started app development. Well, now I know why it does not work, but is there a way to edit the colors of the search bar in any other way. My app is meant to analyse logs from a product that has blue as its main color. I changed the color of the nav bar to blue. The color of the search bar is still green. This doesn't look very appealing. Is there another app specific .css that I can modify to change the green color in pages?

0 Karma

LukeMurphey
Champion

It had not even occurred to me that this was on 6.0.

0 Karma

LukeMurphey
Champion

Does Chrome show your .section-title CSS stanza? It should show it though the font-size attribute will be crossed out.

0 Karma

Ayn
Legend

It's probably overridden. Did you try adding !important after your customization? i.e.

.section-title {
   font-size: 40px; !important
}
0 Karma

FRoth
Contributor

No - no change. And I applied the important in the correct way before the ";".

0 Karma
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...