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


  • Please log in to reply
10 replies to this topic

#1 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

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
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

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
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

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
  • 16504 posts
  • LocationManchester, UK
  • Country: Country Flag

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
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

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
  • 16504 posts
  • LocationManchester, UK
  • Country: Country Flag

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
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

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

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

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
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

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







Also tagged with one or more of these keywords: css, sidebar, widget