Forums

madsrh

Hi
It seems that whenever I add a widget to the wordpress sidebar, it adds a number (of how many times this widget has been in the sidebar) to the ID. A bit hard to explain, but try this...

I have a calendar widget in the sidebar and it's ID is events-list-widget-1.
If I remove the calendar widget and then add it again, it's now called events-list-widget-2.

Is there a way for me to select the events-list-widget regardless of the number? like events-list-widget-*

best regards and thanks for reading this far :-D
MadsRH

SgtLegend

You can do this by using a CSS attribute selector which won't work in IE8 and below but it's dead simple to write up some jQuery code for IE, see the examples below.

See the below post

madsrh

SgtLegend -> Exactly what I was looking for. However I can't get it working on my site. I think it has something to do with the ID being inside a class. This is the css for changing the background color:

.widgetcontainer#events-list-widget-4 {background: #6495b5;}

SgtLegend

Sorry got the selector wrong, try the below.

CSS

div[id^=events-list-widget],
.events-widget-ie {
    color: red;
}

See the below post

madsrh

Thanks for the fast reply SgtLegend. It's still not showing CSS changes :-(

SgtLegend

Is there a live view of your website as it's hard to debug without looking at it.

madsrh

Sure, www.madsrosendahl.dk

SgtLegend

I searched through your site and couldn't find the CSS but found the jQuery and an error i made with it, see the fixed jQuery code below. If you have or are using a cache like W3 cache make sure to clear it as the changes won't appear until then.

jQuery for IE

jQuery(function($) {
    if ($.browser.msie && $.browser.version < '9.0') {
        $('div[id^=events-list-widget]').each(function() {
            $(this).addClass('events-widget-ie');
        });
    }
});

madsrh

Ah, I see. You couldn't know that the code was inside another css file: http://madsrosendahl.dk/wp-content/plugins/arras-tweak/style.css

I've added directly into the head now, but I still don't see the change reflected on the site.

SgtLegend

Alright i see why it's still not working, the elements are LI tags not DIV tags so all you simply need to do is swap out the tag names.

madsrh

Awesome! It's working now. I would never have figured that out by myself :-D

Thanks you very very much for all your help. You've improved my site tremendously.

best regards
//MadsRH

SgtLegend

No problem, glad i could be of assistance.

treehouse : what would you like to learn today?

Forums

CSS Selector wildcard for Wordpress widget

CSS

jQuery for IE