Change fonts in WAB 2.6

[GeorgeKatsambas]

To change title fonts for all my widgets do I have to change each individual css file? For example in the Measure widget I want to change the font size of measure.

[RobertScheitlin__GISP · Accepted solution]

George,

  No you can add this new css rule to your apps theme common.css file:

.jimu-on-screen-widget-panel>.jimu-panel-title>.title-label,
.jimu-foldable-panel .title-label {
  font-size: 22px;
}‍‍‍‍

[GeorgeKatsambas]

A few months ago you also helped me with changing the color

.FoldableTheme.default .jimu-on-screen-widget-panel > .jimu-panel-title {

  background-color: rgb(255, 0, 0);

  background-color: rgba(255, 0, 0, 1);

}

I can add this rule in the same place right? Do i need the Bold text as well?

WAB DE 2.6

[RobertScheitlin__GISP]

George,

   Yes and Yes if you are using the foldable theme.

[GeorgeKatsambas]

If i add .FoldableTheme.default  nothing happens, if i add 

@import url("panels/FoldablePanel/style.css");
@import url("panels/DockablePanel/style.css");
/********** styles for simple panel***********/
.jimu-simple-panel{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.jimu-on-screen-widget-panel>.jimu-panel-title>.title-label,
.jimu-foldable-panel .title-label {
font-size: 25px;
}
.jimu-on-screen-widget-panel>.jimu-panel-title>.title-label,
.jimu-foldable-panel .title-label {
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0,);
}

I get this, I assume my syntax is wrong somewhere?

[RobertScheitlin__GISP]

George,

Try this:

@import url("panels/FoldablePanel/style.css");
@import url("panels/DockablePanel/style.css");
/********** styles for simple panel***********/
.jimu-simple-panel{
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.jimu-on-screen-widget-panel>.jimu-panel-title>.title-label,
.jimu-foldable-panel .title-label {
  font-size: 25px;
}

.jimu-on-screen-widget-panel > .jimu-panel-title {
  background-color: rgb(255, 0, 0);
  background-color: rgba(255, 0, 0, 1);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[GeorgeKatsambas]

Thats not changing the color

[RobertScheitlin__GISP]

George then try putting it like this:

@import url("panels/FoldablePanel/style.css");
@import url("panels/DockablePanel/style.css");
/********** styles for simple panel***********/
.jimu-simple-panel{
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.jimu-on-screen-widget-panel>.jimu-panel-title>.title-label,
.jimu-foldable-panel .title-label {
  font-size: 25px;
}

.FoldableTheme.default .jimu-on-screen-widget-panel > .jimu-panel-title {
  background-color: rgb(255, 0, 0);
  background-color: rgba(255, 0, 0, 1);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[GeorgeKatsambas]

That does not work either, is it because the map was created in 2.5 and imported into 2.6?

[RobertScheitlin__GISP]

George,

   What theme are you using? I just tested again in 2.6 using the Foldable Theme and it looks like this:

Are you taking about the HeaderController widget panel not having the red color?