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!

Observability | Use Synthetic Monitoring for Website Metadata Verification

If you are on Splunk Observability Cloud, you may already have Synthetic Monitoringin your observability ...

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...

.conf24 | Personalize your .conf experience with Learning Paths!

Personalize your .conf24 Experience Learning paths allow you to level up your skill sets and dive deeper ...