Update Application After CSS Edits

Ignition
#1

I'm messing around with the CSS files for the first time and trying to test my understanding.

What's the best way to get the new styles to apply so I can test it?

I save all the relevant files, change something in the project, save the project, merge changes from the gateway, refresh the webpage, change the theme but sometimes it doesn't update.

For example, just to test an obvious change, I used this edit to the popup header:

.ia_popup__header {
    background-color: var(--seq-1);
    color: var(--neutral-100);
    border-bottom: var(--containerBorder);
    font-size: 0.875rem;
}

The change is made:
image

But then changing the style sheet again doesn't change the color back.

.ia_popup__header {
    background-color: var(--neutral-40);
    color: var(--neutral-100);
    border-bottom: var(--containerBorder);
    font-size: 0.875rem;
}

image

While I can work around this issue using the Enhanced Stylesheet resource, it would still be nice to know how to get this to work as intended.

#2

you can directly add/edit css in the browser.
This is the fasted, (be sure to safe it on a separate file before refreshing the page)

in chrome press ctlr+shift+i
then check if you are on the elements tab, on the left, press the add style on the right, then press the inspctor.stylesheet.

image
image1569×495 33.7 KB

this will open a sheet where you can copy paste from/to the perspective sheet after done testing.
also easy to find the correct classes with the inspector
image

1 Like
#3

It looks like changes are refreshed by the gateway every 5 minutes.

#4

For editing of css theme files:
Browser: refresh, F5
Designer: change name of theme, change it back

I'm not sure if this also works for the style sheet.