WordPress transparent HTML widget background

Question

Having a wordpress BoldGrid theme and setting the Custom JS & CSS like below. I like to see a transparent background now but it´s not.

Custom JS & CSS:

.boldgrid-css{ background: white; } (This is not my code line)  
.opci{background: rgba(0, 0, 0, 0); }

Then I use the CSS in a HTML widget like:

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
         text-align: left;
         color: green;
         font-family: Arial, Helvetica, sans-serif;
         }
      </style>
   </head>
   <body>
      <div class="opci">
         <h1>Work in progress...</h1>
         <p>Alpha released.</p>
         <p>april 4 2018.</p>
      </div>
   </body>
</html>

This does not make the background transparent, the background is white.

What am I missing?

It looks like the .boldgrid-css CSS (color white) is dominant somehow painting my Widget background white always

Here´s a screenshot of editor. The box saying "Work in progress..." I would like to have transparent background but it´s white

where is html tag with `boldgrid-css` class in the example you provided? — Samvel Aleqsanyan, Apr 04 '18 at 21:46
I see, but which tag contain that class? if you think, that the issue is with `.boldgrid-css` class, then wrote your own rules, like: `.boldgrid-css{ background: rgba(0, 0, 0, 0); }`, or `.boldgrid-css{ background: rgba(0, 0, 0, 0) !important; }` — Samvel Aleqsanyan, Apr 04 '18 at 22:43
I only use the .opci class, the .boldgrid-css class is used by the theme. If I remove it I get an error. If I change it as you suggest then some other part of my site that uses the .boldgrid-css class, will change — Erik, Apr 05 '18 at 16:38
sorry, but your update don't provide any more information, which may be helpfull. if you're far from html/css, then provide the url of the page. I can't suggest something other without looking at the full markup with all related css rules of that part — Samvel Aleqsanyan, Apr 05 '18 at 19:53

Samvel Aleqsanyan · Accepted Answer · 2018-04-05T20:20:13.860

Here are 2 solutions to get transparent background:

We are using id of your tag. ID must not be repeated at the page( sometimes that rule breakes because of bad coding ). Use this rule:
```
#custom_html-3{
  background: transparent;
  border: none;
}
```
or if will not help, you can use !important, which will override all other rules, even if they are loaded later( exception may be other rules, which are using !important, too ):
```
#custom_html-3{
  background: transparent !important;
  border: none !important;
}
```

If id repeating on other pages, but you don't want to have transparent background on other pages, too, then we can be more specific, like:

.page-id-12 #custom_html-3{
  background: transparent !important;
  border: none;
}

or

.page-id-12 #custom_html-3{
  background: transparent;
  border: none;
}

Note: on other hand we can use background: rgba(0,0,0,0);. Difference good explained here.

P.S. You can use this html markup:

  <style>
     body {
     text-align: left;
     color: green;
     font-family: Arial, Helvetica, sans-serif;
     }
  </style>
  <div class="opci">
     <h1>Work in progress...</h1>
     <p>Alpha released.</p>
     <p>april 4 2018.</p>
  </div>

You don't need to render full html inside of another one( <doctype>,<html>,<head>,<body> ). Also, your style rules you can add into Customize -> Additional CSS.

Answering to your question. Even without setting up to your div.opci background rules, it will be transparent, it's inheritance. More you can find here.

Thanks, I must read up on this dont understand much., when I add the nr:1 in the Custom Theme CSS section where I already had the `.opci{background: rgba(0, 0, 0, 0); }` the "box" is transparent THANKS. I dont change the `
` in the HTML (picture in my Q) strange it´s working must learn more.. — Erik, Apr 05 '18 at 20:14
There´s stil a line box visible do you see? Is it possible to remove that? I know that´s a new Q — Erik, Apr 05 '18 at 20:18
updated. you can use `#custom_html-3{ background: transparent; border: none; } ` — Samvel Aleqsanyan, Apr 05 '18 at 20:22

WordPress transparent HTML widget background

1 Answers1