Widget title area – Change image.

  • Jue

    (@jue)


    14 years, 3 months ago

    I want to change the title area of 2 widgets to 2 different images. I’ve searched for like, 2 days and not found how to do it yet.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Michael

    (@alchymyth)

    14 years, 3 months ago

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

    Thread Starter Jue

    (@jue)

    14 years, 3 months ago

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

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

    Michael

    (@alchymyth)

    14 years, 3 months ago

    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); }

    Thread Starter Jue

    (@jue)

    14 years, 3 months ago

    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 http://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.

    Michael

    (@alchymyth)

    14 years, 3 months ago

    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(http://magpiewatch.co.uk/wp-content/themes/redbel/images/Chorley.png); }

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

    Thread Starter Jue

    (@jue)

    14 years, 3 months ago

    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!

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

    Cheers!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Widget title area – Change image.’ is closed to new replies.