Hi There,
I’m getting a lot of automatically named styles like “style21” which are meaningless and starting to get out of control.
How do I rename styles?
You can open up your styles.css file and rename them in there.
That won’t affect the class names in your documents though so you’ll then need to use a find and replace (ctrl-f) to change them to the new names.
Ok thanks, seems a lot of work considering I’ll be doing it 100 times a day!
Well i guess you try and make styles as universal as possible so you can reuse them.
Or adjust things in the Bootstrap theme so they become universal etc.
You can also apply styles to elements like
or and using ID names instead of classes. That can cut down a lot as well.
I have a very heavy focus on styling and found i spent a lot of time initially in setting things up, but now as i create a new page the style classes have all been set before and are being reused.
There are also some Bootstrap classes you can add to elements which are really usefull such as:
w-100 = sets width to 100%
m-1 = (or up to m-5) sets margin a margin from 1 to 5. This also works for mb, mt, ml, mr for marigin, bottom, top, left, right
p-1 = (same as above except for padding instead of margin)
ml-auto =(margin, left auto) This only works inside certain elements, mainly a flex-box, but in the case of left, it pushed the element all the way to the RIGHT side. Great to have one element on the left and another on the opposite side.
text-primary = (works with other color classes like danger, success etc) changes the text color
Hey Philip, I appreciate your help. The issue is that I am working on very different sites and many have styles are subtle and wont be used anywhere else.
I think wappler needs to do the sames as a certain other (unamed) web builder that has already solved this issue and recognised that having the ability to create and rename styles easily is a requirement…(ese below)
Sure. makes sense if you’re working on different sites etc. I’m just a solopreneur as they say so me taking extra time at the start pays dividends for what I do 
Anyway, hope i wasn’t telling you how to ‘suck eggs’ but there are definitely a few predefined bootstrap classes i like to add onto an element that speeds things up at times.
1 Like
Well this happens when you don’t add a class name when applying styles in design panel so these are automatically created.
Please check how to use the design panel:
It shows how to create your classes.
1 Like
Ok, so let’s say I forget to create the class and I want to rename it?
Renaming classes is currently not possible in the Design Panel.
You can post a Feature Request for this, so other people can vote for it, if they find it useful.
1 Like
You can do this manually by going into the style sheet and renaming the class. Then use a global find and replace to change the class in your documents.
Having said that, this is a very bad way to go, it is much better to get into the habit of using the method suggested by @Teodor. That way you can reuse the class for similar elements.
1 Like
Did anyone put in a feature request for this?
The ability to rename styles is one of those seemingly small things, but it just makes managing them so tedious that don’t bother to use the Design tab, which is such a pity!
Is renaming styles very different to renaming anything else - eg variables and field names etc? In each case it of course has to be done with much care but is not necessarily difficult or tedious. Obviously it’s something which should probably be done if you end up with ‘style21’ and style150’ - but using Design Manager as @Teodor suggests, this shouldn’t happen. If it does, renaming ‘style21’ to ‘my-nice-class-name’ is going to be quite an easy and safe global replace anyway.
Ending up with style1 ... style99 means you just didn’t add a name for your class in the design manager.
You can safely open your custom style.css selected in your projet settings and find+replace .style1 to .meaningfull-class there.
Of course, if you have already applied it to an element make sure to add the new class name there. It’s just the same workflow as if you manually write your CSS styles…
Thanks for your input Teodor… I agree all that is possible, it just creates a lack of flow in the design process!