Select to view content in your preferred language

theme

4285
15
06-13-2016 06:57 AM
GilbertoMatos
Frequent Contributor

Bom dia! Pessoal, preciso de uma ajuda urgente: a empresa que trabalho, quer passar a utilizar o web appbuilder, e com isso, querem que eu crie um tema padrão, para só selecionarem e já virem os menus (camadas, legendas, sobre, etc, em texto mesmo). Deve ter um layout com uma linha horizontal no topo, com os menus a direita e o logotipo a esquerda. Abaixo deve ter um mapa e no rodapé uma linha horizontal com o endereço da empresa. Os widgets de layers, impressão, sobre, etc, devem ser chamados através de textos com estes nomes, e não com ícones. O problema, é que não consigo montar isso, na verdade não estou conseguindo me achar em anda da estrutura. Se puderem me ajudar, agradeço.

0 Kudos
15 Replies
AdrianWelsh
MVP Honored Contributor

Hi Gilberto,

I attempted to translate your text to English. It looks like you are wanting to create a custom theme in Web AppBuilder. Have you looked at the documentation listed here:

Create a theme—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

GilbertoMatos
Frequent Contributor

Hello! Excuse me, I am Brazilian and I do not speak English. That's right, I need to create a default theme for my business, but I can not understand the structure and have no knowledge dojo to mount the panels I need. My Viewed this link content that you went, but unfortunately I can not understand. I am somewhat concerned because the layout is simple, but I can not ride.

As I said before, there are three panels. A top with logo and menus, a center which will map and open the widgets that I will have to call through the menus and a bottom panel. I can not find me because I took the demotheme and tried to change it and create a new name. If you can give me an example of how to do this, thank you very much. Thank you

0 Kudos
AdrianWelsh
MVP Honored Contributor

Gilberto,

You will need to be able to modify the JavaScript code within your application in order to make these changes (as far as I understand). It will likely take a lot of tinkering around with in order to make it look the way you want it to look.

I am tagging additional groups in this post in order to hopefully get more visibility. There are much more brilliant people on this board who can give you much better advice than I.

Web AppBuilder for ArcGIS

Web AppBuilder Custom Themes

Web AppBuilder Custom Widgets

For starters, it may help for you to post the code that you are stuck on and show where you need assistance.

GilbertoMatos
Frequent Contributor

Hello!

Thank you for your help. I will check the links that you sent me. If I can solve, post here. Thank you so. hug

0 Kudos
GilbertoMatos
Frequent Contributor

Hello! I checked the links you suggested. I am not able for example, include a new color style. I am editing the theme foldable. I created the folder "stemapp \ themes \ FoldableTheme \ layouts \ layout5" which is a copy of "stemapp \ themes \ FoldableTheme \ layouts \ default" (this will have a white background and black letters). After I created the folder "client \ stemapp \ themes \ FoldableTheme \ styles \ white", which is a copy of the folder "client \ stemapp \ themes \ FoldableTheme \ styles \ yellow". Inside it, I changed the hexadecimal codes for the white color "#ffffff". And last modified the file "client \ stemapp \ themes \ FoldableTheme \ manifest.json, which included the following lines:

"Styles":

    [

{

            "Name": "white"

            "Description": "this is white style"

            "StyleColor": "#FFFFFF"

        }

]

and

"Layouts":

    [

{

            "Name": "layout5"

            "Description": "this is layout5"

        }

]

After all, I ran the novametne startup.bat and tried to change the style. The white icon appears right below the other colors of items, however, the color does not change to white, just showing the default color is gray for the bottom of the top panel. Do you have any idea to help? Honestly I do not understand what happens, because I follow the tutorials, but just does not work. I'm using the website hosted on the company's server, and web AppBuilder installed on my local machine. I am creating an application in the portal (server), making the record, taking the id generated and configuring the new application by WAB from my local machine.

Thank you!

Gilberto.

0 Kudos
AdrianWelsh
MVP Honored Contributor

Gilberto,

Have you followed the instructions at this page for making a new style for the theme?

Create a new style for a theme—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

0 Kudos
GilbertoMatos
Frequent Contributor

Hello! Yes, it was exactly these following steps. I can not understand what happens, because nothing of what I do reflects on my edited theme. 😞

0 Kudos
AdrianWelsh
MVP Honored Contributor

Well, I am not sure. I tried doing the same thing with different themes and still cannot get it to work, just like you. I am not seeing this:

I have a feeling a step is missed somewhere. I think the JavaScript (or json) needs to be changed somewhere else but I cannot figure out where.

I found in the config.json file (located in the main folder), there is a list of styles under the theme:

{
  "theme": {
    "name": "FoldableTheme",
    "styles": [
      "black",
      "default",
      "green",
      "cyan",
      "red",
      "purple",
      "blue",
      "yellow",
  "myStyle"
    ],

but, even when I put n "myStyle", it still doesn't reflect in my map.

Tagging Web AppBuilder Custom Themes​ again just in case someone can help chime in on why this is not working...

0 Kudos
GilbertoMatos
Frequent Contributor

Hello!

Friend, I could run style on white background and black letters. I was doing everything right, the two problems is that I had to clean the chrome browser cache and had to create a new application to test. It worked! Thank you for your help.

0 Kudos