Show use of LESS variables in Visual Editor

[Shrike]

This is the one thing that irritated me about the Visual Editor: that it sometimes wasn't clear what value a field had already. The easiest way to show this is with some screenshots. In the Visual Editor, we'll use the Shouts > Border Width/Style/Color and Shouts > Text > Text Color fields (and I've not touched any of these ones). tl;dr at the end of this post seeing as this is a bit long-winded.

View in Visual Editor
Corresponding LESS/CSS in Style Sheet

The Text Color is pretty clearly using the default text colour, and we can see this in the Style Sheet on line 1292 as it has an empty value. In the Visual Editor, it is just an empty field too. This isn't a big problem, because lots of the fields in the Visual Editor are blank so we can assume they just use the main color settings we've set earlier. If the user wants to put them back to the default, they just clear the field and it will have an empty value again.

The confusion comes in with the Border Color field. We can see what the Width and Style are because they've actually got a value; no problem. Now, some people might be able to work out that the Border Color is using the Inner Borders value. This is okay, until they go to change the value for this border in the shoutbox. If they then want to put it back to the Inner Borders color, they'll have to find what that color is (or guess) and then put it back. This is where the problem occurs, and is where my long-winded explanation gets to a point : the color value they set it to is now "hard coded" as that hex value rather than using the @container_inner_border_color variable. Making the field blank doesn't work because, in this case, that makes the border color use the default text color (which is what border-color does). If they ever want to change the Inner Borders color, they'll then need to change the shoutbox border value they changed earlier. From there, it's quite easy to see how they can make it difficult to change all instances of one color simply because they didn't know that those values were all automatically linked back to the Inner Borders value.

TL;DR
Tell the user if a field is using a LESS variable from elsewhere in the stylesheet and/or give an option to reset the field back to that variable.

[Ryan Roos]

The biggest argument against this is that anyone who understands what the LESS indicator means is probably someone who should be editing the CSS directly and not in the medium editor. The medium editor is sort of a Frankenstein's monster when it comes to interpreting the code. We literally had to make a system that allows the editing of the Easy Theme Creator schemes and can also render the full CSS into some sort of editable system.

I can make a note in our to-do list to add something like this.

This needs to be reviewed. It could be a while before it's added. If we like it, look for it in one of our updates after launch.

Thank you.

[Shrike]

Feb 11, 2013 11:00:06 GMT -8 Ryan Roos said:

The biggest argument against this is that anyone who understands what the LESS indicator means is probably someone who should be editing the CSS directly and not in the medium editor. The medium editor is sort of a Frankenstein's monster when it comes to interpreting the code. We literally had to make a system that allows the editing of the Easy Theme Creator schemes and can also render the full CSS into some sort of editable system.

I can make a note in our to-do list to add something like this.

This needs to be reviewed. It could be a while before it's added. If we like it, look for it in one of our updates after launch.

Thank you.

It wouldn't even need to say that it was a LESS variable really. A line at the top saying something like "some fields use a value you set in the Easy Theme Creator, click <xyz> icon next to a field to reset it back to using this value". Then when they click one of the <xyz> icons it would say something like "this field uses the value of <friendly variable name>, do you want to reset this field so it uses that value again?"

Either way, thanks for looking into the idea