How to achieve and edit this css style visually using Design Panel?

Wappler General How To
#1

I initially created this style using DW CSS Panel, now I copied the style into my Wappler website and want to customize it further using Design Panel. But there’s issue I need help to achieve it:

The style:

>     .bg-custom {
>       background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0.00)),color-stop(0%, rgba(191,0,0,0.54))), url("background/04.jpg")!important;
>       background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>       background-image: -moz-linear-gradient(top,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>       background-image: -o-linear-gradient(top,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>       background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url("background/04.jpg")!important;
>     }

The issue (s):

  • There’s no option to select background image when Type: Linear Gradient is chosen
  • No code automatically generated for webkit, moz, o ~
  • Difficulty to add !important due to unavailability of auto suggest for it in code view. I think it would be much helpful to have important checkbox on Design Panel as well.
  • The desired result does’t render precisely in Wappler Design View but does as expected in browsers and DW live view.
    2019-08-10
    Rendered in Wappler Design View
    2019-08-10%20(1)
    Expected result

Thank you in advance for any clarification, assistance, and consideration.

Cheers.

#2

I copied the last line (without the !important bit) into the Styles panel and saved the CSS file.
The result is:

header.container {
background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0.00)),color-stop(0%, rgba(191,0,0,0.54))), url(“background/04.jpg”);
background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(191,0,0,0.54) 0%), url(“background/04.jpg”);
height: 200px
}

Note that only one other rule prefixed with -webkit-gradient has been created for Safari. For more see https://caniuse.com/#search=linear-gradient.

If you need to add !important to a style rule then you have not implemented the style rule properly. Have a look at https://css-tricks.com/when-using-important-is-the-right-choice/ and don’t forget to read what Stephanie Rewis has to say on the subject.

These are the views I get in Wappler and Browser Respectively:

image
image.png1520×337 23.6 KB

image
image.png1210×243 7.19 KB

#3

Thank you for your reply input @ben. I need !important because I use the class alongside default BS4’s. Without important added it wouldn’t work with certain classes combination. I would not necessarily add the important when the result is already as expected.

Note: I realised I don’t need to add important in my current usage case. It’s just Wappler’s Design View that doesn’t render the result as expected. The style displays as expected already on browsers. I previously assumed it’s needed in this case.

#4

Update: The style now rendered as expected in Wappler - After I restart the document. :face_with_monocle:

1 Like
#5

When you are in your page using Chrome, use Ctrl+Shift+I to open the developer panel. Choose the Elements tab from where you can go to the element containing the style rules. Using the same CSS-selector, you can undo/modify the Bootstrap defaults without using the unmentionable.

image
image.png850×570 51.9 KB

#6

I usually use this method to edit the style, when done then copy and overwrite it into my stylesheet. It just today just now I used Wappler’s alone to edit it since I’m still exploring its capabilities. Thanks for your reply again.

1 Like