Transparent background on button

Daniel Hollmann

Posted on 22/09/2021 09:52:53

Hi DW.

I really like the flexibility of swift when it comes to color design. However, I have an obstacle, that I would really like to create a button, with a transparent background color (see attached Image).
However that is not a possibility, with the Swift theme editor, where you must select a hex color.
When leaving it empty, the color will just inherit the theme for the page/row, but I would like to override it with a transparent color. CSS supports the use of ‘transparent’ as a color, so it would be appreciated if that was a possibility using swift theme module.

Anyway, for now is there a way to achieve the given design, without customizing to much?

Thanks
Daniel

Replies

Nicolai Pedersen

Posted on 22/09/2021 10:18:02

This post has been marked as an answer

Yeah - good point. We will take a look at that.

Buttons are setup like this, using css variables:

.theme .btn-primary {
    background-color: var(--swift-button-primary-background-color);
    border: 1px solid var(--swift-button-primary-border-color);
    color: var(--swift-button-primary-foreground-color);
}

Then they are themed by setting the variable to another color (here a theme named "dark"):

.dark {
    --swift-button-primary-background-color: #FFFFFF;
    --swift-button-primary-background-color-rgb: 255,255,255;
}

If you do not specify a color for i.e. the background, that variable is not set in the .dark class - and hence inherits the parent theme.

You can overrule that part by adding one line of custom css:

.dark {
     --swift-button-primary-background-color: transparent;
}

Checkout this post on how to insert custom css:

https://doc.dynamicweb.com/forum/swift/custom-font?PID=1605

BR Nicolai

Votes for this answer: 1

Daniel Hollmann

Posted on 22/09/2021 14:52:49

Thanks!

That is a good work around, but requires the content editor to add CSS, so a solution to do it thorugh the theme section would be nice!

Nicolai Pedersen

Posted on 22/09/2021 14:57:01

Agreed!

You must be logged in to post in the forum

Developer forum

Transparent background on button

Replies