Currently you have to change the dropdown on every single element to avoid inline styles.
To override the inline styles later on, you have to write !important and then hope it doesn't need to be overridden again!
I searched the forum for a solution but my apologies if it's my error.
After finding this thread: https://bootstrapstudio.io/forums/topic/warning-or-toggle-for-inline-css/
I can see a response from the developer, about specificity and stylesheets being an issue. The issue goes both ways - that's why I think it's best the user has an option to set default behaviour.
STYLESHEET ISSUE I propose the CSS could be made in its own stylesheet called 'panel' or something similar, and if it doesn't exist, BSS creates the stylesheet. Remember, if the user would prefer in-line, they can choose to default to in-line and not have an extra stylesheet.
SPECIFICITY ISSUE Personally, specificity when using the panel options is not a big deal for me, as I know if the changes I make in the panel don't work, I can just add a line of specific CSS, no in-line styles and still probably won't need to use !important.
Surely BSS could write the CSS with high specificity by looking at the parent classes / IDs. BSS could probably even detect when a rule just added was overridden and could prompt the user - to add classes / IDs, to add as inline or to use !important. These are just ideas.
In addition, if the option doesn't do anything due to not enough specificity, there could be a tick box next to each option or (ctrl+click) to add it as in-line instead. For me, that would be a last resort - probably after using !important, however it would be super handy when temporarily testing out provisional changes.
So, to recap: - No digging through hundreds of lines of codes to edit in-line styles later. (I hate in-line styles, can you tell?) - Less likely to have to use !important to override styles - it's easier to override stylesheets than in-line. - If edits made in the panel don't work, there are still options to work with. - If people prefer in-line, there could still be the option (in project settings, or in a preferences pane) for users to have it stay in-line by default, exactly how it is now.
I hope it's considered! Thanks for such a great tool Tom
+1 on being able to set a permanent default for the CSS.
Right now it's not as bad as you think it is though mot393. When you choose something from the dropdowns (either the one in the Options pane or the one at the top of the Styles window) it remembers that until you change it or until you end that session. So you only have to set that when you first start each time you open the program, not every time you create a style.
Either way though, I too would love this to be a permanent setting.
I disagree with the app setting up a file for it though, I think we're smart enough (or should be) to do that ourselves. I would prefer that we have a dropdown in the settings of the project that you can choose the file from the currently created CSS files. If the file isn't there that you need, then we would need to create it first and then set the file default.
It's definitely better than it was when I first started where we had no default and had to choose it each time we created a class, but ... I can't tell you how many files I've had to move classes and ID's from one to another because they went to the wrong files. Just a lot of added hassle and work that shouldn't be necessary.
When I code by hand, I know exactly what file I'm putting my code into, so it shouldn't be extra work to do it in an app.
Hey Jo thanks for the reply and support in the idea! I like your suggestion of choosing the CSS file in settings as that makes it more configurable for different people.
My own position is I want to avoid all use of in-line styles, no matter what!
My issue with how it is now is in particular that I can't get it to remember my preference across multiple (all) elements within my project. When I change the dropdown in 'Look & Feel', it only remembers that setting for that specific element, meaning I have to remember to check / change it on every single element. It's nice that it remembers it for that element, but I still have to check every edit I make unless I remember exactly which elements have been set up (which I won't)! Apologies if I am missing something, I've tested this twice, I've also checked and am on the latest version of Bootstrap Studio.
I do have another idea - basically, above the Look & Feel panel, there would be a dropdown menu to change which stylesheet the panel would affect (project-wide). This seems like it would be a very easy fix. It would also be similar to a web developer's workflow - you choose the style sheet to open, then you edit it. So in other words, in addition (or instead of) having the dropdown menu for each element, there would be a dropdown menu for that panel itself.
Tom
Ok so I went in and I see exactly what is wrong.
There "used" to be the ability to choose the file when you choose Create CSS Block (I think?). But don't panic, I figured it out! lol.
First, each time you open the app:
This setup will remain intact until you either change the location or you restart the app.
Sorry I didn't have the answer right away, I don't tend to use the Look & Feel window at all, I'm a coder at heart so I'm just used to doing everything in the Styles window myself so I've only ever had to just choose the file when I wanted to add a class and then was done. I had to actually go in and see how it worked with the Look & Feel setup lol. I really should try getting used to using that pane, it would probably be much easier and such, but ... old habits are hard to break!
Hope that helps until such a time as we hopefully get a permanent solution. :)
Hi Jo, thanks very much for your reply, oddly I still can't produce that result, steps 1-3 seem to work fine, but it only affects that one element, the rest still default to 'Style Attribute'. I will try again later in case I've missed something.
Just an aside note, while doing this I've noticed that the Look & Feel panel already notifies the user when a rule is being overridden so it seems the groundwork is already there for this to be implemented.
I also prefer coding for certain things, but for me, Look & Feel is the fastest way to 'audition' changes where you need to try multiple values, like Fonts and sizes - and that is something particularly important to my workflow.
Hmm not sure what else could be the issue there. Are you on a PC or Mac? I'm on Mac so if you're on PC, could be there's a bug somewhere in your setup.
I'm currently on my PC, but also tried in the live demo version on the website to no avail.
Well don't put much stock in whether things work on the Live version, it's so far behind there's no telling what works and what doesn't. Still, seems that it should work for you, I just keep thinking we're missing a step somewhere.
Try starting a new project and see if it works then or not. Could be something wrong in your project. Doubtful, but should rule that out as well. Also what version is your BSS at?
Thanks Jo, that makes sense about the live version being behind! I wonder if the PC version is slightly behind too as I tested it with a completely new project (and created a 2nd new project when it didn't work).
I think what I'll do is load it up on my MacBook later and try to get that working on there. If it works, I may even switch temporarily, if not then I must be missing something.
My version is 4.3.6
Thanks for all your help, hopefully will get it working on MacBook as a workaround. Tom
Ok Tom, let us know and if it doesn't work still, you may want to contact support and see if there's an issue, maybe they may find what we're missing too if there's not an issue.
Ok so messing around with this a little bit here and I "think" I may know what the deal is. I believe it's working as intended, but there's a difference in how things work between the Look & Feel panel and the Styles window.
In the Look & Feel panel, the reason it doesn't stay to any particular place is because you have to choose either to create a new class, or to edit an existing one. When you create a "new" class, this is where the page chosen in the styles comes in. If you are editing an existing class, it's going to edit it wherever it currently resides so there's no file changing needed for those.
When you are using the Styles window, you "have" to tell it where you want the styles you add to go or it will add it "always" to the first CSS file alphabetically in the your Styles file list. This is where it will remember which file to add to from then on, until you change it or restart the app.
I think, what we really could use is for the default in the Look & Feel to go to the first style in it's class setting. In other words if you have 3 classes in a sentence it would default to the first one which would also be the one that would show up in the Styles window. That's what I think would be the most useful way to utilize the Look & Feel pane. Right now it always defaults to Style Attribute, which to me is the most unhelpful and useless setting in that list, because it is hardly used by anyone that really has any clue on building a website and it shouldn't be encouraged either which this does automatically do.
Does that sound like what is happening to you? I would find that irritating to no end if I had to constantly change that drop down every time I changed to a new element. That I guess is why I've used the Styles window and coded my CSS myself lol. Saved myself time, headaches and frustration, and didn't even know it! lol
Adding on to this I want to ask for the following in the Look & Feel pane:
1. Automatically default to the first CSS class in the dropdown. 2. Add all CSS classes and ID's to the dropdown that are associated with an element even if they are not editable, and add a choice to "Duplicate Locked Class/ID to the Look & Feel dropdown to make more intuitive to the user that it is how to edit locked classes. So there would be 3 choices in that dropdown instead of 2: The element's class (p, li, h1, etc), Duplicate Class/ID, Style Attribute (change this to Inline Style so people know what it's doing more intuitively).
Recapping what was asked for above for the Styles window:
1. Give us the ability to set a "Permanent" default CSS file as well as have that file in the dropdown in case we need to change it and then change it back.
Hi Jo, I'm quite new to BSS but yes that sounds like what's happening to me! The Styles window works fine for my usage, but I just want the Look & Feel pane to always put the changes in CSS - any CSS file! No matter what I do, I need to specify it for every element - so for now, I'm still using the style attribute. I tried on Mac with the same results too.
While I was learning BSS I didn't even realise it was putting my edits in the style attribute, until I exported it and tried to make changes! I had no choice at that point but to resort to !important.
Just seen your next post - your suggestion looks great too, I'll have another read through later in case I have anything to add.
Another suggestion for the Look & Feel pane:
If it's possible, it would be really great to be able to create a class from an Inline Style. In other words, say I have an element that I accidentally added a lot of inline styles too (or in Tom's case above, he did it for everything and didn't realize it). Would be great to be able to click an element and if it has inline styles, be able to click the Create CSS Block and have it pull all the inline styles into that block. From there if we want to separate them it's easy enough to do, but it might make it easier for people who have mistakenly done as Tom has (which I'm going to assume is a lot of people since there's no clarification that it's doing inline styling) and clean up that inline styles by changing them to classes.
Yes, I agree that would be even better, as it would let me undo what has happened here!
I just had another read through your posts and I think I agree with all of it and don't have anything much to add.
So now I guess we await a developer response, or support from any other users who have encountered this.
I really hope something is changed, it would save so much time in the future!