When selecting font or background colors, there are options to select Bootstrap custom properties like “var(–bs-danger)”.
However, when selecting the colors for spans (for both font and background color), this option doesn’t exist. Furthermore, even if I manually insert the custom property as a color, the software doesn’t allow it.
I’d love to see the option to select Bootstrap custom properties when selecting colors for spans.
If you want one of the predefined theme colors use the text options and select the color
I should have been more specific.
When I want to apply custom styles to specific text, that’s where I want the ability to apply custom properties:
This is why the Span Component exists. So you can style portions of your text with the Options panel or custom CSS rules.
The icons in the top menu for styling text are basically “shortcuts” to quickly insert inline spans with inline styling. Personally, I wouldn’t use them excessively as they’ll “bloat” your HTML.
So in the example above, how do I apply a custom property like ‘var(–bs-danger)’ to the word ‘Ipsum’?
I know I can edit the HTML after I export it but I’d like to do everything in BSS.
var(–bs-danger) inside your <p> element.I’m sure that works but that’s just cumbersome. I’d like to have a more direct method.
That’s why I’m asking for this as a feature.
Thank you for starting this thread! It appears that there is a problem with the color picker. Normally when you click the Design tab you should see the CSS color variables like this:
However they are missing when the color picker is activated while editing text. We will fix this in our upcoming update. When the fix lands you will be able to just click a color variable from this tab.
This have been bugging me for at least 8 months now.
LOL, I should complain more.
Ahh, so it’s a bug in the program. Posting a screenshot of the blank color picker…
would have explained things instantly.
As I have never tried to color text using this method, I wasn’t even aware that it was missing. Glad you got to the bottom of it.
I didn’t know custom properties were supposed to appear under the Design tab. I was just looking for an easy way to apply them to specific text.
And for some designs, the Design tab isn’t empty:
The bug you’ve uncovered is the program’s failure to display the Bootstrap variable colors along with the CSS Colors in the Design tab when you try to style inline text.
The Design tab in the color selector palate should normally show the standard Bootstrap variable colors, and below it, colors that exist in your design via custom CSS rules you’ve added. That’s why in your example, you’re only seeing your CSS colors.
When they fix it, it should look like this… (I’ve used Photoshop to artificially increase the height of the color palate so you can see all the colors. Normally you’d have to scroll to see them.)
I didn’t uncover a bug. I asked for a feature, not knowing that the Design tab was supposed to provide the functionality I wanted.
Martin investigated and discovered that the Design tab wasn’t working as intended.
Okay. Either way, a bug was discovered thanks to your post, so kudos.
Talking about the colors i wish there is a list view so i can see which color to pick. Sometime i want to use my custom variables but is not easy to see from the palette.
