- This topic is empty.
-
AuthorPosts
-
September 26, 2011 at 3:52 pm #34518madsrhMember
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
MadsRHSeptember 27, 2011 at 2:02 am #88057SgtLegendMemberYou 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.
September 27, 2011 at 3:08 am #88060madsrhMemberSgtLegend -> 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;}
September 27, 2011 at 4:38 am #88062SgtLegendMemberSorry got the selector wrong, try the below.
CSS
div[id^=events-list-widget],
.events-widget-ie {
color: red;
}September 27, 2011 at 5:54 am #88068madsrhMemberThanks for the fast reply SgtLegend. It’s still not showing CSS changes :-(
September 27, 2011 at 8:30 am #88070SgtLegendMemberIs there a live view of your website as it’s hard to debug without looking at it.
September 27, 2011 at 4:05 pm #88117madsrhMemberSeptember 28, 2011 at 2:36 am #88135SgtLegendMemberI 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');
});
}
});September 28, 2011 at 5:58 am #88139madsrhMemberAh, 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.
September 28, 2011 at 7:33 pm #88182SgtLegendMemberAlright 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.
September 29, 2011 at 3:32 pm #88243madsrhMemberAwesome! 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
//MadsRHSeptember 29, 2011 at 8:59 pm #88259SgtLegendMemberNo problem, glad i could be of assistance.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.