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!

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...