How to change the style for encoding in the status bar


#1

I’m using the status-bar package, which, among other things, writes the current file encoding to the status bar, for instance “UTF-8”.

I would like to make this information better visible and set the color for this element of the status bar.

Using the DOM inspector, I thought this could be done by putting

status-bar-right encoding-selector-status encoding-status a {
  color: red;
}

into my styles.less, but this doesn’t have any effect.


#2

Try this:

status-bar {
    .encoding-status {
        a {
            color: red;
        }
    }
}

#3

This works!!!

How can one find out this information, i.e. where is it documented?

Ronald


#4

@rovf you may want to read up on how CSS selectors work. MDN has a good tutorial at https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors.

Less also supports the & combinator which references the immediate parent: http://lesscss.org/features/#parent-selectors-feature


#5

I think I now see my mistake. Since “encoding-status” etc. are names of CSS classes, not HTML tags, I needed a leading period. Correct?

Thank you for providing the links…