Colour Confusion

I’ve opened the image in photoshop but it’s totally blank – not even a single pixel.

It’s not blank. It’s a semi-transparent image (with gradient) that adds a “shade” to your background color.
What exactly would you like to do with the sidebar ?

Thanks Media X! – that explains it ?? I just want to add a little custom title, which I’ve now done by using a transparent image, but now I have a further issue. The background image won’t display unless I enter a title…as you can see :

https://www.centrepiecedesign.com

I want to remove the text and just show the image.

Any ideas?

What about leaving the widget title blank and adding the image (with some padding) before the list items?

Ah thanks again. Nice idea ?? I’ll try it…

Err…apologies for my ignorance – I’m gonna reveal myself yet again as relative a newbie ?? I thought you meant add some padding to the .widget .widget-title element, but I think I know what you mean. You mean skip that element altogether and add the image below it. Not sure which file to edit to do this? Will I need to make a copy in my child theme so it doesn’t get overwritten by any future updates. I use a custom style.css file for tweaking…but not sure how I add this image in before the list items??

How exactly did you add the list items? In the text widget as links?
<a href="https://www.centrepiecedesign.com/">Welcome</a>
I see the border-bottom, the margins and paddings are added to your CSS file.
You can add the image by adding
<img src="https://www.centrepiecedesign.com/wp-content/uploads/your_image.png" > before the list items.

I just used the Pages widget to generate the list. Not sure where to add the code. I’ve only got style.css and footer.php in my child theme. Do I need to copy another file in to my child theme and edit that?

In order to not make things more complicated, let’s try this:
drag&drop a text widget right before the Pages widget in your sidebar. Leave the title empty and add the code for the image i already posted (update the link to the image).
I mean, there are dozens of possibilities how we can handle this. Let’s try this one,huh?

Nice idea again! ?? …but if I leave the title field for my widget blank, it automatically inserts the title “Pages” :-/ …if I just use a blank space, obviously it leaves a huge gap between the new widget containing the image, and the list items. I’ll carry on tweaking but if you’ve got any other ideas please let me know…BIG thanks for your help so far ??

Just thought, maybe I can reduce the title line height to zero…I’ll try it…

That’s nearly there…would be nice to get it just little closer though. Negative margins maybe??

Or reduce the bottom margin for the widget(s)

.widget {
width: 300px;
margin: 0 0 30px 0;
}

@line 876.

Perfect!! Thanks again. That was a little more involved than I thought it would be. Nice simple solution though, using another widget for the image. Cheers Media X …

I’m not satisfied with the fact that we changed the margins for the widget(s) though ??
You can also try adding this to a text widget. The result will be the same and it won’t affect other widgets.

<img style="padding-bottom:20px; src="https://www.centrepiecedesign.com/wp-content/uploads/txt_quick.png">
<ul>
<li><a href="https://www.centrepiecedesign.com/">Welcome</a></li>
<li><a href="https://www.centrepiecedesign.com/coffee-table/">Coffee Table</a></li>
<li><a href="https://www.centrepiecedesign.com/products/">Mirror Table</a></li>
<li><a href="https://www.centrepiecedesign.com/bespoke-tables/">Bespoke Tables</a></li>
<li><a href="https://www.centrepiecedesign.com/hardwoods/">Hardwoods</a></li>
<li><a href="https://www.centrepiecedesign.com/gemstones/">Gemstones</a></li>
<li><a href="https://www.centrepiecedesign.com/sizes/">Sizes</a></li>
<li><a href="https://www.centrepiecedesign.com/contact/">Contact</a></li>
</ul>