nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Modify original index.html file in Experience Builder Developer Edition

PLadd

By default, Experience Builder Developer Edition publishes the index.html file with the following:

<style>

html, body{

...

overflow: hidden;

}

This presents a problem to end users with small screen resolutions when using a date picker in a filter/query widget, as seen in the image below. A simple solution is to make this change in the exported site's index.html file:

overflow: auto;

This enables the scroll wheel for users when the date picker dates can't be accessed. Because I have several apps, and because each time I download from ExB DevEd, I have to remember to manually edit each index.html, I'm wondering if there's a way to find the original source that creates the index.html and modify it's settings once and forget it. I'm sure this is frowned upon by the good folks at ESRI but my goals is to make the UX as easy to navigate as possible and currently it doesn't do that.

(In the image below, this user couldn't access dates beyond the first week. The date picker doesn't allow for manually typing a date)

Find more posts tagged with

ArcGIS Enterprise

Accepted answers

Jeff.Thompson@arlingtontx.gov_arlingtontx

Generally speaking, I would advise against messing with the CSS for the HTML/body tag as that will affect everything in your application. If you are going to do it, the Experience Builder way would be to create a custom theme and make your modifications in there.

https://developers.arcgis.com/experience-builder/guide/theme-development/

All comments

TimWestern

Yeah I've experienced that theme 'development' pain, its not for the faint of heart. Before I got to this post in the thread, i was wondering if there would be a way to make CSS that would be more specific and override the behavior you were initially concerned about, but I suspect with the way react works, it might not make a difference.

Jeff.Thompson@arlingtontx.gov_arlingtontx

@PLadd You could copy this and make call it A Developer's Guide to Theme Development as a full Blog post.

PLadd

Because I floundered when following the ESRI help doc Theme Development, I have documented the steps I had to use to create my own custom theme in Experience Builder Developer Edition. Of note, when you create a custom theme, you are essentially just setting the properties that you want to be different from the default theme.

To sum, you need to add a folder to a very specific location (explained below) and that folder must have very specific files in it (explained below) and those files must have very specific language in them. The easiest way to this (explained below) is to use the sample theme that contains all the necessary junk in it and then modify that to your liking.

I found that the instructions for Sample Theme here provided the necessary material to achieve success (for me anyway) rather than the piecemeal stuff offered on Theme Development.

I will try to recreate those steps here:

The instructions tell you to go to this page on github to “clone the repo” (this means download a copy of the sample theme material to your work environment)
- Click on the green button called “<> Code” and select “Download ZIP”
- Save the ZIP file to wherever you are developing your Experience Builder Developer Edition apps.
Open the ZIP file, open a folder called “themes”, and find a folder called “demo-theme”
- Copy and paste the “demo-theme” folder to your ArcGIS Experience Builder installation folder
  - you’ll have to know where on your system you installed Experience Builder Developer Edition
  - paste the “demo-theme” folder in ArcGISExperienceBuilder\client\your-extensions\themes
- Inside the “demo-folder” is an EXCELLENT readme.md file that provides probably the best explanation about customizing themes in Experience Builder with great examples. It’s worth taking the time to read over while enjoying your favorite bowl of breakfast cereal.
Now that you have a custom folder available in client\your-extensions\themes, Experience Builder Developer Edition needs to know this exists.
- Stop and restart client npm
- When you restart npm for client, you should now see this comment at the end:

Open Experience Builder Developer Edition.
- I suggest creating a new Experience as a test to be sure everything is working – you don’t want to corrupt an existing Experience.
- Click on the “Theme” tab and scroll down below “Vivid” and “Organization Shared” where you should now see “Demo.”
- Clicking on the Demo theme will set all of the widgets in your Experience to this theme – but the Sample isn’t much different from the default, so you won’t notice much difference in your widgets’ properties.
Note this note in the README file I mentioned above:
- “NOTE: In order to have your theme customization to be reflected correct [sic], please remove any unchanged variables from the demo `variables.json` file to avoid unneeded theme overrides.”
- So I deleted everything in my variables.json file and set just the following:

{"darkTheme": true}

Save variables.json
Restart client npm (I later learned this is not necessary – just save variables.json)
Open the Experience from above (if it’s open, just refresh the browser)
- Be sure your theme is set to Demo.
- It came out very dark. IT WORKS!
BUT WATCH OUT!
- Then I tried to edit the variables.json color per the instructions in the readme (and in several other online examples) to be like this:

{

"darkTheme": false,

"colors": {"primary": "red" }

}

BUT THE INSTRUCTIONS BREAK EVERYTHING (at least at version 1.15)
Instead, do it this way:

{

"darkTheme": false,

"colors": {"primary": "#ca0b0b" }

}

Then I tried other settings and felt that I was finally able to modify themes in my project.

I hope someone will find this helpful.

PLadd

Thanks @JeffreyThompson2 . As always, spot-on advice. For whatever reason, I struggled with following the theme-development guide - I found it vague and I think it's missing a few steps. I will paste below the steps I went through to create my own custom theme for anyone else who has landed on this discussion looking for a solution.

Jeff.Thompson@arlingtontx.gov_arlingtontx

https://developers.arcgis.com/experience-builder/guide/theme-development/

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.