Advice on Custom HTML/CSS in Web Builder

[davidwduncan]

I have inserted a PNG logo which on the home page of the "Dusk" template has a transparent background. Unfortunately on additional pages it puts a white box behind the logo. As the logo is white, this is not helpful!

I can, using tools in Chrome set the CSS of the box to transparent. However, when I put that code:

<style type="text/css">
.x .c1-3 {
background-color: rgba(0,0,0,0);
}
</style>

into the Custom HTML it has no effect. What am I doing wrong?

You can see images of the page here.

Thanks for any help!

[PL281]

@davidwduncan 

This CSS should solve your issue

#logo-8329 {background:rgba(0,0,0,0) !important; box-shadow: rgba(0, 0, 0, 0) !important;}

[davidwduncan]

Many thanks.
I will need to investigate how you got to the div, but thanks all the same

[PL281]

@davidwduncan 

When I did the view source I saw the image itself had an ID and I was able to use that

[davidwduncan]

Good morning.

I tried the CSS as you suggested but there is a problem... the number used in the logo id keeps changing! Each refresh brings up a different four-digit number. Can wildcards (^, *) be used?

Thanks again for your help

D

[PL281 · Accepted solution]

@davidwduncan 

This is the wildcard for id starts with logo

[id^="logo"]{background:rgba(0,0,0,0) !important; box-shadow: rgba(0, 0, 0, 0) !important;}