Need more info in Tutorials for Appearance Tab

@Martin or whoever else may be in charge of this information:

I've gone through everything in the textual Tutorials (haven't watched the videos so forgive me if it's there, but it should be in the textual area). I cannot find anything that addresses the post linked below so if someone could please add something resembling or better than what I posted for instructions in that linked Post it would really help us in the forums have a way to direct them to the information more easily. All I did find was something that mentioned the Appearance tab area, and that you can Create your own CSS classes, but didn't say how it was done at all. Thanks! :)

https://bootstrapstudio.io/forums/topic/cant-set-text-to-arial-font/#post-19840

btw, I still think that inline styles are not a good default.

I know that inlines are always applied but I find that default annoying. At least I'd like a global setting for BSS to always use external stylesheets and never inline unless explicitly told so.

Although I'm not sure how the best way to set that up would be, I do agree with @marrco, styles should not default to inline. How that could be setup is a question though as it would need to know if you wanted a new class or editing an old one, but if it were to default to a specific custom CSS file that would be very helpful rather than inline code.

I, too, hate that the default is inline styles, but I don't see an easy solution. I mean, to people like me, Jo, marrco, etc, it's really a non-issue because we know what to do. It's really just a problem for beginners who don't understand best practices.

I mean, technically, they can build their websites entirely with inline styles and they will work, and if they're just making a site for themselves and nobody else ever has to touch it, who really cares. The web is FULL of abysmal, badly coded websites. They are the rule rather than the exception. But who among us wants to pollute the web further, right?

I have a friend use uses Pinegrow, and he's constantly posting "why doesn't XYZ work on my website? Can someone please help?" He's an older, retired fellow who has a small freelance business building sites for local businesses where he lives, and he's an eager learner and impresses me for someone from a non-tech generation who's not only learned to build sites and code, but uses PINEGROW, which isn't the easiest program to get comfortable with for a newbie.

So I kinda feel bad for him, and help him out whenever I can, but LORD he is just addicted to using inline styles. He simply won't create external stylesheets, or even a <style></style> block on his HTML page. I have to wade through dozens of inline styles, tons of which are wrong, duplicates, have typos, and I want to scream, because his problems are so often related to his spaghetti coded HTML.

@Printninja sounds like you need to tell him to do it right if he wants your help? :P But yes, I am not saying it will be easy, but it sure would be easier on us if it worked like people expect it to which it almost does other than that one little issue. I too use Pinegrow for a handful of sites that I don't want to redesign for free (too large too much stuff on them for my taste or time frame) and it does work well for that for sure. Eventually everything I do will be in BSS, but for now I'm split between the 2 and since I have a lifetime license with them both .... :P

I agree that defaulting to inline styles has drawbacks. I wish there was another way to do it, but the alternative would be for the app to assign a random id to each component and create a css block for it, where the appearance changes would be written. I think this is even worse than inline styles.

One potential improvement is to make the Appearance default to the first non-style CSS block that matches the element (if such a block exists). It's still up to the user to create this block though.

@Jo we'll update the tutorial with more info on this. Thank you for providing a step by step :)

If it's not possible to set up a way to popup or alert people in some way to do something there, then I think that just getting a good tutorial added will help a lot. I would definitely stick that in the Basics section, although the logic says it should be in the CSS section. My thoughts are due to most people will read the basics before getting into the CSS area if they aren't real good at CSS and this is one of the most basic things that people need to know to stop doing inline coding :) Just my thoughts and/or opinion on it of course :P

In Pinegrow, they had this same issue, and people had the same complaints. The eventually settled on having a small icon of a paintbrush appear next to any component in the "Tree" (comparable to BSS's Overview panel) that had an inline style applied, making it easy to go through and visually spot anything with an inline style. There is also an orange notice in their CSS panel that states, "INLINE STYLE IS SET" and a quick way to convert any inline CSS rule to a new CSS class. Lastly, they have a filter feature on their Tree that allows you to show only components with inline styles.

While I'm not a raving fan of Pinegrow, they did seem to solve this problem effectively.