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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...