Custom Page widget background?

[Water Crystals]

I'm having trouble with my custom page. I have two widgets and for one of them I'd like to have a unique background. I've searched for ages, but the only code I've found that helps (and for widgets only, not the entire page) is this one:

<style type="text/css">
.pbcpe-widgets .pbcpe-widget .widget-content {
background-image: none;
background-color: #000000;
}
</style>
Except, it applies that to all widgets on the page. I only want it to work for one widget - can someone help me?

[Water Crystals]

Bump?

[Water Crystals]

Bump. Anyone?

[adminabp]

I'd need to know the div id for the specific widget. To get that I need to see the source code for the custom page, either through a link or you copy/pasting it here.

That and the title of the widget so I know what I am looking for in the code.

If you're copy/pasting, I don't need the whole page, just what is below


<div id="content" role="main">

should be fine.

[Water Crystals]

Nov 14, 2017 23:51:56 GMT -8 adminabp said:

I'd need to know the div id for the specific widget. To get that I need to see the source code for the custom page, either through a link or you copy/pasting it here.

That and the title of the widget so I know what I am looking for in the code.

If you're copy/pasting, I don't need the whole page, just what is below


<div id="content" role="main">

should be fine.

If I'm understanding correctly, that would be

<div><div id="zone_1" class="pbcpe-zone"><div class="title-bar"><h2 class="pbcpe-zone-title"></h2></div><div class="pbcpe-widgets content"><div id="ccBHplPRVl" class="pbcpe-widget container widget-html_box"><div class="title-bar"><h2 class="pbcpe-widget-title">Zyver Region Pokedex</h2></div><div class="widget-content content"><font size="3"><b>NO content on this page can be displayed, reproduced, or used anywhere outside this site without permission of the admin. Please be respectful of the time and effort put into this project.</b></font></div></div></div> </div></div>

<div style="padding: 10px 0;"><div id="zone_2" class="pbcpe-zone"><div class="title-bar"><h2 class="pbcpe-zone-title"></h2></div><div class="pbcpe-widgets content"><div id="SvOiAoDNAm" class="pbcpe-widget widget-html_box"><div class="title-bar"><h2 class="pbcpe-widget-title"></h2></div><div class="widget-content content">

After that is the html for the second widget content, but I figured what I put above was likely what you're asking for. Zone 2 is the one I want to give a unique background colour to (without any impact on zone 1), but I didn't give it a title or put it into a visible container because it looks bad with what I'm using it for so I'm hoping that won't be an issue.

[adminabp]

Nov 15, 2017 1:52:56 GMT -8 Water Crystals said:

Nov 14, 2017 23:51:56 GMT -8 adminabp said:

I'd need to know the div id for the specific widget. To get that I need to see the source code for the custom page, either through a link or you copy/pasting it here.

That and the title of the widget so I know what I am looking for in the code.

If you're copy/pasting, I don't need the whole page, just what is below


<div id="content" role="main">

should be fine.

If I'm understanding correctly, that would be

<div><div id="zone_1" class="pbcpe-zone"><div class="title-bar"><h2 class="pbcpe-zone-title"></h2></div><div class="pbcpe-widgets content"><div id="ccBHplPRVl" class="pbcpe-widget container widget-html_box"><div class="title-bar"><h2 class="pbcpe-widget-title">Zyver Region Pokedex</h2></div><div class="widget-content content"><font size="3"><b>NO content on this page can be displayed, reproduced, or used anywhere outside this site without permission of the admin. Please be respectful of the time and effort put into this project.</b></font></div></div></div> </div></div>

<div style="padding: 10px 0;"><div id="zone_2" class="pbcpe-zone"><div class="title-bar"><h2 class="pbcpe-zone-title"></h2></div><div class="pbcpe-widgets content"><div id="SvOiAoDNAm" class="pbcpe-widget widget-html_box"><div class="title-bar"><h2 class="pbcpe-widget-title"></h2></div><div class="widget-content content">

After that is the html for the second widget content, but I figured what I put above was likely what you're asking for. Zone 2 is the one I want to give a unique background colour to (without any impact on zone 1), but I didn't give it a title or put it into a visible container because it looks bad with what I'm using it for so I'm hoping that won't be an issue.

We will see...

If I'd know you wanted to target an entire zone instead of just an individual widget, I probably wouldn't have needed all of that.



I'm going to give you three options.

Go to the edit for the custom page and where you see the three tabs at the top...

Go to the HTML tab, and then on that page add this to the top to target the content of zone 2

<style type="text/css">
   #zone_2 > .content { background-color: #000000; }
</style>
or for just the individual widget use

<style type="text/css">
   #SvOiAoDNAm { background-color: #000000; }
</style>
Or this for just the specific content of it

<style type="text/css">
   #SvOiAoDNAm > .content { background-color: #000000; }
</style>

That way if you want to tweak something later, that should give you some information to go by.

(I used the color from your example in the first post, but you can of course change it to whatever you like.)

[Water Crystals]

Thank you adminabp ! It works perfectly. I went with the first option, which also helped me learn where to put other things (I gave it a border too). This will def help in the future too, as I think I have it figured out now. I didn't realise a zone and widget were technically two different thing though; I thought they were interchangeable, may bad

My issue is solved. Thanks for all your help.