Where do I find the css file to edit it?

897
9
Jump to solution
12-05-2017 07:55 AM
SimonCrutchley
Occasional Contributor II

I'm totally new to web App building, and whilst I've used css files where I've been hosting, I'm not sure where the file is when I've been working completely within WebApp Builder? Sorry if that's seems a very basic question, but no-one else seems to have covered it, or if they have I've missed it.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Simon,

  You will be extremely limited in the customization that you can do to an AGOL Host WAB App. Css editing is not available to you when hosting the app on AGOL. But you are in luck because changing the apps title and subtitle color is a UI configurable option. In AGOL go to edit the WAB App and you will see tabs called "Theme", Map", "Widgets", "Attribute". Click the Attribute tab and click the "A" in the Title textbox and choose highlight your text and then click the foreground color button.

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Simon,

  There are dozens of .css file in WAB so you will have to be more specific. Each widget will have there own css file the jimu.js folder has css folder with lots of css files.

0 Kudos
SimonCrutchley
Occasional Contributor II

Sorry. Like I said I'm new to this. I'm specifically after the css for the header as I don't like white text.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Simon,

   That also depends on the theme you are using.

0 Kudos
SimonCrutchley
Occasional Contributor II

Sorry. The tab theme. Thanks for your patience.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Simon,

   Here is the location and the rule to modify:

[install dir]server\apps\[app#]\themes\TabTheme\widgets\Header\css\style.css

.jimu-widget-header .jimu-title{
  text-align: center;
  height: 100%;
/* Added next line */
  color: blue;
}

.jimu-widget-header .jimu-subtitle{
  text-align: center;
  height: 100%;
/* Added next line */
  color: blue;
}
0 Kudos
SimonCrutchley
Occasional Contributor II

Sorry, but my basic problem is that as far as I'm aware I don't have an install directory; I have been working purely from within ArcGIS on-line and am not aware that I've downloaded anything. I was in Content, went to Create - App - Using the Web AppBuilder and was sent to an app that I've been customising. Have I missed something?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Simon,

  You will be extremely limited in the customization that you can do to an AGOL Host WAB App. Css editing is not available to you when hosting the app on AGOL. But you are in luck because changing the apps title and subtitle color is a UI configurable option. In AGOL go to edit the WAB App and you will see tabs called "Theme", Map", "Widgets", "Attribute". Click the Attribute tab and click the "A" in the Title textbox and choose highlight your text and then click the foreground color button.

SimonCrutchley
Occasional Contributor II

Brilliant, and much simpler than I'd thought. Thank you so much for your help and perseverance

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

0 Kudos