Jump to content


Photo
- - - - -

Css selector for sidebar widget

css sidebar widget

Best Answer James B† , 10 January 2013 - 04:12 AM

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

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
10 replies to this topic

#1 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts

Posted 09 January 2013 - 12:39 AM

Hello

 

Please Login or Register to see this Hidden Content

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

 

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 09 January 2013 - 01:40 AM

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. 



#3 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts

Posted 09 January 2013 - 03:15 AM

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?



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 09 January 2013 - 04:07 AM

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:

 

Please Login or Register to see this Hidden Content

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



#5 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts

Posted 09 January 2013 - 09:51 AM

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

Please Login or Register to see this Hidden Content

):
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



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 19817 posts

Posted 09 January 2013 - 10:01 AM

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.



#7 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts

Posted 09 January 2013 - 10:02 AM

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



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 19817 posts

Posted 09 January 2013 - 11:19 AM

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



#9 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts

Posted 09 January 2013 - 08:26 PM

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



#10 James B†

James B

    Advocate

  • DMS Subscriber†
  • 5126 posts

Posted 10 January 2013 - 04:12 AM   Best Answer

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



#11 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts

Posted 11 January 2013 - 03:09 AM

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