Argh @ changes not taking affect!


#1

I’m trying to make changes to the styles.less file but every time I add something to it, the changes don’t work. Do you have to use LESS to actually make these changes or can you just plug in regular CSS? I’ve even tried going to Developer > Reload Window.

I’m sure others have had this issue, but was there a solution?


#2

Hi
Can you post a sample ? I use css (don’t know less syntax) and most changes are reloaded just by saving the file


#3

I’m not really sure how I could post a sample, actually. I only use css, also. Never tried to use LESS. But basically, when I inspect the elements under the developer window, I add the elements in to CSS and change the values. When I ctrl+s the changes do not take affect on my html window. So like, if I wanna change .string { whatever: the_default_value_is; } to .string { color: red; } it won’t reflect under html window. Not sure that clarifies much…


#4

Ah hmmmm so you want to change the text color ?
Seems ambitious since I guess the syntax colorators have priority. I just tried this :

atom-text-editor {
    color:red;
}

It did change all white texts in editor to red.
Guess you will have to give details about what you want to change…
Edit

I guess the only thing you’re missing is atom’s own classnames you must use check for a list


#5

And check also theme creation and maybe available themes if you want to change atom’s colors and shapes in the canonic way. I guess there are tutos available… sorry I don’t check I’m on phone today and websurfing is a pain


#6

Found it https://github.com/atom/atom/issues/6290
(I wanted the answer)
A dirty way to have all your string highlight red is :

atom-text-editor::shadow .string {
     color:red;
}

In your styles.less


#7

Heh. Thanks, gui3. I wasn’t sure and didn’t even really understand why you had to prefix it all with atom-text-editor::shadow {}. I thought you could just do the whole class trail as you normally would like span.string: { color: red; } Anyway, got it to work and you rock for helping me. Thanks dood!


#8

The shadow DOM was designed so that sections of a page or document could be completely separate from the rest of the page or app’s styling. In Atom, it keeps the UI theme separate from the syntax theme (and maybe some other stuff, but IDK.