topic Re: Custom Theme - Style.css not applying in Web AppBuilder Custom Widgets Questions

Custom Theme - Style.css not applying

SamDrummond2 — Mon, 23 Mar 2015 20:23:33 GMT

Hello All,

I'm in the process of developing a custom theme for the web appbuilder version 1.1. I am going to customise the FoldablePanel from the Foldable Theme. As Such I have:

1. Copied the entire FoldableTheme\panels\FoldablePanel folder to my [CustomTheme]\panels\FoldablePanel directory

2. Added the following to the [CustomTheme]\manifest.json file:

"panels": [{

"name": "FoldablePanel",

"description": "This is foldable panel"

}]

3. Added the following to the [CustomTheme]\layouts\default\config.json file:

"widgetPool": {

"panel": {

"uri": "themes/[CustomTheme]/panels/FoldablePanel/Panel",

"positionRelativeTo": "map",

"position": {

"top": 50,

"right": 5,

"bottom": 5

}

I can open http://[ServerName]/webappbuilder/?id=stemapp and I can see the foldable panels working in the Foldable theme. However, when I switch to my custom themes and open a widget it loads in the foldable panel but the styles from [CustomTheme]\panels\FoldablePanel\style.css.

Any one have any ideas as to what is happening?

Regards

Sam

Re: Custom Theme - Style.css not applying

NEvatt — Tue, 24 Mar 2015 11:28:02 GMT

Hi Sam,

I am not using 1.1 just yet, but looking at my config file for an older version that uses a custom theme my the set up is a little bit different.

Within the widgetOnScreen section, my config is set up like this:

"panel": {

"uri": "themes/DemoTheme/panels/SimpleBorderPanel/Panel",

"positionRelativeTo": "map"

"widgets": [{

"uri": "themes/DemoTheme/widgets/HeaderController/Widget",

"positionRelativeTo": "browser",

"position": {

"left": 46,

"top": 20,

"right": 0,

"height": 64

"id": "themes/DemoTheme/widgets/HeaderController/Widget_5",

"name": "HeaderController",

"isThemeWidget": true,

"label": "Header Controller"

and then the panel is set up on the widgetPool section:

"panel": {

"uri": "themes/DemoTheme/panels/FoldablePanel/Panel",

"positionRelativeTo": "map",

"position": {

"top": 5,

"right": 5,

"bottom": 5

}

This code may no longer be relevant, but is worth a try.

-Nat

Re: Custom Theme - Style.css not applying

StanMcShinsky — Wed, 25 Mar 2015 14:39:27 GMT

I have not set up my own custom theme yet, but it looks like Nat may be referencing the config in the root of the application and Sam is referencing \themes\FoldableTheme\layouts\default\config.json

-Stan

Re: Custom Theme - Style.css not applying

SamDrummond2 — Wed, 25 Mar 2015 21:39:37 GMT

Hey Nat and Stan,

Nat thanks for replying but Stan is correct. I'm still working in a dev environment and I'm simply opening the stemapp using http://[servername]/webappbuilder/?id=stemapp and manually changing the theme using the WAB.

Thanks