Custom Theme - Style.css not applying

4201
3
03-23-2015 01:23 PM
SamDrummond2
New Contributor III

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

0 Kudos
3 Replies
NEvatt
by
New Contributor III

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

0 Kudos
StanMcShinsky
Occasional Contributor III

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

0 Kudos
SamDrummond2
New Contributor III

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

S

0 Kudos