topic Re: Change fonts in WAB 2.6 in Web AppBuilder Custom Widgets Questions

Change fonts in WAB 2.6

GeorgeKatsambas — Tue, 14 Nov 2017 15:23:52 GMT

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.

Re: Change fonts in WAB 2.6

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:58:29 GMT

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;
}‍‍‍‍

Re: Change fonts in WAB 2.6

GeorgeKatsambas — Tue, 14 Nov 2017 15:50:06 GMT

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

Re: Change fonts in WAB 2.6

RobertScheitlin__GISP — Tue, 14 Nov 2017 16:03:58 GMT

George,

Yes and Yes if you are using the foldable theme.

Re: Change fonts in WAB 2.6

GeorgeKatsambas — Tue, 14 Nov 2017 16:19:45 GMT

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?

Re: Change fonts in WAB 2.6

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:58:32 GMT

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);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change fonts in WAB 2.6

GeorgeKatsambas — Tue, 14 Nov 2017 19:49:08 GMT

Thats not changing the color

Re: Change fonts in WAB 2.6

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:58:35 GMT

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);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change fonts in WAB 2.6

GeorgeKatsambas — Wed, 15 Nov 2017 16:49:35 GMT

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

Re: Change fonts in WAB 2.6

RobertScheitlin__GISP — Wed, 15 Nov 2017 17:02:26 GMT

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?

Re: Change fonts in WAB 2.6

GeorgeKatsambas — Wed, 15 Nov 2017 19:24:46 GMT

Just a part changes color?

Re: Change fonts in WAB 2.6

RobertScheitlin__GISP — Wed, 15 Nov 2017 19:30:51 GMT

George,

That would appear that you are only adding the color to the title-label... Are you copying exactly what I have in my last code post?

Re: Change fonts in WAB 2.6

GeorgeKatsambas — Wed, 15 Nov 2017 19:37:54 GMT

If I add this to the css then I get partial color, your code is not changing it at all, now it has to be something stupid I am doing

Re: Change fonts in WAB 2.6

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:58:38 GMT

George,

So you are using the blue style of the Foldable theme not the default color so here is the fix for that:

@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.blue .jimu-on-screen-widget-panel > .jimu-panel-title,
.FoldableTheme.blue .jimu-foldable-panel > .jimu-panel-title {
  background-color: rgb(255, 0, 0);
  background-color: rgba(255, 0, 0, 1);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change fonts in WAB 2.6

GeorgeKatsambas — Wed, 15 Nov 2017 19:54:24 GMT

Oh good thing to know, thank you very much