Widget title area – Change image.

please post a link to your site to illustrate the problem.

https://www.magpiewatch.co.uk/listen-live

The two title areas where the team names are, I want to change those to different images.

the widget title backgrounds are done with this image:
/wp-content/themes/redbel/images/sidebar.png

(a bit complex because it is used in several styles with different background positions)

and these styles:

for the top one in a sidebar:

.side-title-first {
	margin-left:-40px;
	margin-right:-40px;
	background:url(images/sidebar.png) left top no-repeat;
	height:41px;
	padding:17px 0 0 35px;
}

and for the others in a sidebar:

.side-title {
	margin-left:-40px;
	margin-right:-40px;
	background:url(images/sidebar.png) left -66px no-repeat;
	height:41px;
	padding:17px 0 0 35px;
}

to make any new widget specific title backgrounds, you could use the widget css ids, which are #text-4 for the top widget, and #text-3 for the second one (these might change if you move or change the widgets)

create a new background image for each of the widgets (I personally would use the sidebar.png as a template, keep the arrangement and size, and only change the minimal neccesary – different part for the two teams).

example:

#text-4 .site-title-first { background-image: url(images/sidebar-worksop.png); }
#text-3 .site-title { background-image: url(images/sidebar-chorley.png); }

I’ve used the code you’ve said. I’ve not done the images yet because I’m just testing to whether it will actually change, so the image that should be displaying is https://www.magpiewatch.co.uk/wp-content/themes/redbel/images/Chorley.png

I put

#text-4 .site-title-first { background-image: url(images/Chorley.png); }

Underneath

}
.side-contents thead th {
	font-weight:700;
}
.side-contents #next {
	text-align:right;
}

In both style1.css and style.css but nothing changed.

my mistake – a typo: instead of wronlgy .site-title it should read .side-title

also, my feeling is the .side-title-first would be using the top graphic in the image.

just tested, and this seems to be working on the Chorley (second from the top) widget title:

#text-3 .side-title { background-image: url(https://magpiewatch.co.uk/wp-content/themes/redbel/images/Chorley.png); }

you cna remove the absolute link when used in style.css…

Thanks so much! I’ve not been able to do exactly what I wanted because I’m not overly good at graphics, but what I’ve got is good!

https://www.magpiewatch.co.uk/listen-live

Cheers!