CODEWITHSUNDEEP
htmlcsswordpresswidgettransparent
Erik
Erik

Reputation: 5119

WordPress transparent HTML widget background

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

enter image description here

Upvotes: 0

Views: 1707

Answers (1)

Samvel Aleqsanyan
Samvel Aleqsanyan

Reputation: 2964

Here are 2 solutions to get transparent background:

  1. 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;
}

  2. 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.

Upvotes: 1

Related Questions