Getting path to targeted class's param through dev.tools ,for styles.less


#1

Hi, i’m customizing atom’s appearance and got pretty basic question: how ,for overwrite config ,to get patch to class which defining targeted param;, would appreciate any help


#2

What about atom-workspace div.setting-description?


#3

@DamnedScholar
Thanks for responce

Doesn’t looks like (

atom-workspace div.setting-description {
 color: rgba(225, 225, 225, 1);
}

(didn’t worked) )

Also, the thread’s question is how to get such path trough the dev.tools (not only in this particular case).


#4

Why is it such problematic? i thought extracting path from the tools is pretty basic scripting action


#5

I’m not sure what you mean. That is all pure CSS and HTML. It’s no more problematic than with any other website. Are you sure you’ve got the right specificity for the selectors?


#6

@Aerijo
If you mean “rights” then: how to check?, If you asking ,you think atom-workspace div.setting-description should work?;, Yes i don’t know how to get the path trough the tools (in atom and web browsers)


#7

The dev tools are very interactive: the colour boxes can be clicked and used to change colours live. There’s a lot more it can do, but I don’t actually know how to properly use them. My comment was also to point out that a CSS tutorial would probably help more than asking here.

In any case, the following should turn all the text green

atom-workspace .settings-view .setting-description {
  color: rgb(100, 200, 100);
}

I got the classes by clicking the ones listed in the Styles box. atom-workspace wasn’t there, but adding it may guard against accidentally turning something else green.


#8

@Aerijo
Damn, i did tried atom-workspace .settings-view .setting-description, guess made some syntax mistake, it worked
I know i can change displayed colors (trough the tools), but how to apply the changes (they reset after page reload or program restart)?


#9

To make them permanent, you’d have to add them to the styles.less file.


#10

@Aerijo
So its just for preview thing
thanks for the answers


#11

You could also override with !important at the end of the CSS change:

atom-workspace div.setting-description {
 color: rgba(225, 225, 225, 1) !important;
}

#12

So what difference it makes from same without the keyword?


#13

The keyword tells the HTML renderer to obey that rule over all of the other rules that might apply.


#14

@DamnedScholar Which “might” be applied after styles.less ,which is userConfigfile, what is the sence? :slight_smile:
But good to know new keyword for future maybe :slight_smile:


#15

You just use !important to say “Hey, this is the more important rule. Override anything else (that doesn’t also have !important and is more specific”.


#16

This maybe not completely related to the theme, but:
What special with this class?


at the end i accomplished the task by walkaround with regard to @ahallicks 's info (thanks by the way :slight_smile: ), but would like to know if possible to overwrite the class directly;