Archived

This topic is now archived and is closed to further replies.

  • 0

Css selector for sidebar widget


Question

Posted · Report post

Hello

 

http://janetnicol.co.nz/?page_id=23

I have spent ages trying to find the css selector for the 2nd text widget in the universal sidebar. I am wanting to customise the heading for "news and updates", and fix the left hand dotted border so that I can fill in the gap between the "testimonials" and "news and updates" text-widgets

 

Thanks so much

 

Share this post


Link to post
Share on other sites

10 answers to this question

Posted · Report post

You've got it already :-)

 

Its #text-2 and #text-4 they are the css id's you can use to affect those specific text widgets

Share this post


Link to post
Share on other sites

Posted · Report post

I don't believe there's a specific selector for each text widget.  However, you can certainly add a unique class to wrap the content you're adding to the widget.

 

Something like <div class="mywidget1">your content</div>

 

Then you can create your own CSS for it by adding

 

.mywidget1 {color:#C00000; } and so on. 

Share this post


Link to post
Share on other sites

Posted · Report post

I am using a "text" widget in a universal sideabar area and I tried adding <div class="mywidget1">your content</div> into the title section, but when I click save the html disappears. Where would I add the unique class you suggested above?

 

Also, From firebug I can see that the top sidebar widget is :
<li id="text-2" class="widget_text widget fix">

2nd widget is:
<li id="text-4" class="widget_text widget fix">

 

With text-2 and text-4, does that mean it is possible to find a unique selector for each?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, it does.  You'd add the code I provided inside the text area of the text widget. I'm sorry,  I did not realize it was the widget title.

 

I see this code in your CSS for that specific title:

 

#sb_universal .widget .widget-pad {
    background: url("
") repeat-y scroll left top transparent;
    margin-top: 40px;
    padding: 15px 20px 0 25px;
}

When I adjusted the margin-top to 2px, the dotted border above met up perfectly

Share this post


Link to post
Share on other sites

Posted · Report post

Yes I see that the 2px matches up the dotes - but that makes the heading for the first widget text "testimonials" sit to high and doesn't leave enough space between each textwidget.

 

My apologies - to be clear I am trying to find the individual css selectors for each textwidgets (as seen in the universal sidebar of this page http://janetnicol.co.nz/?page_id=23):
1- testimonials = li id="text-2"

2- news and updates = li id="text-4"

once I have this I can then change the icon next to the "news and updates" title, and should also be able to match up the dotes
if that isn't possible, is there somewhere else I can place the your suggested code - <div class="mywidget1">your content</div> this didn't work in the title section of that textwidget

Share this post


Link to post
Share on other sites

Posted · Report post

You have already answered your own question!

 

 

 

Also, From firebug I can see that the top sidebar widget is :

<li id="text-2" class="widget_text widget fix">

2nd widget is:
<li id="text-4" class="widget_text widget fix">

 

With text-2 and text-4, does that mean it is possible to find a unique selector for each?

 

Thats you answer right there, every text widget you add to your site will be given a unique ID, which can be used to add custom CSS to a particular widget.

Share this post


Link to post
Share on other sites

Posted · Report post

oh I see that the hover state on those buttons is still working........

Share this post


Link to post
Share on other sites

Posted · Report post

thanks so much you guys!! Problem solved

as usual it was simpler than what I was trying with my over complicated css.

Changed the individual text-wdget header and closed up the dotes with the correct spacing

Share this post


Link to post
Share on other sites

Posted · Report post

Not sure what you mean in your reply, what does the hover state of buttons have to do with a text widget ID ?

Share this post


Link to post
Share on other sites

Posted · Report post

Oh god sorry I am confusing myself and you getting mixed up between 2 different posts I have going - the issue with the buttons relates to the other post.

 

As for this one, can you please give me the css selector for each of the text widgets? - seems I am very close by getting the text-2 and text-4 parts, but I tried and tried for ages in my css and couldn't get anything to affect the individual text widgets

Share this post


Link to post
Share on other sites