• 0
Sign in to follow this  
Followers 0

Defining a CSS Class for Particular Widget

Question

Posted · Report post

Okay! So now I am getting into it thanks to all of the great advice I have received on this Forum. I would like to to do some styling on this sidebar widget only: http://cl.ly/0X0Q1w1s2t0e400X0X0X. I looked in FireBug and am stumped as to how to even define the particular widget class: http://cl.ly/0Q021l2H2T063C352U0T (challenge number 1). Once I have this figured out I am wondering how I set up a class within to define two separate font sets and styles within the widget. (problem number 2). @rangelone would tell me to "stop fiddling".

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

We really gotta get you on a piano or organ, or have you try a wind instrument. This fiddling thing is going overboard. ;-) Archaic as it sounds, can't you wrap individual components in their own custom divs or use tags around the things you want changed? Yes, I admit, I'm showing my advanced years again. Today span tags, tomorrow, a walker.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@rangelone: I did start doing that. But I would like to identify the widgets also so that @simple_mama continues to laud me for my tidy CSS skills. A musician I am not! PS or adult diapers.....

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@rangelone: If you look now, you will see that I have defined the actual classes for the first 2 items (not the image yet). But I believe that I need to go down to the actual widget level in order for my changes to take effect properly. Or I need to stop and have a glass of red wine! It's getting better!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Like Nero, who didn't know a musical note from laurel leaf. Hmmm. Okay, check out the quote I styled bottom of this page: http://epicurusconsulting.com/about/management-team I used an image. View source code. Feel free to copy the images and code. Adult diapers? Too late. Did that last year. Glass? Try liters. Don't code and drive!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@rangelone: Thanks for sharing. Here is what I ended up doing for the quote on our site. I used glyphs for the quote mark: http://paste.pagelines.com/8jl This is what it looks like: http://cl.ly/0J0h3Z0n0J1P1m2X2p3L Pretty interesting portfolio of companies. Do you sleep?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@WebWerx rangelone doesn't sleep. He dreams. (...of exactly what I do not know)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@catrina: One suspects that a souffle or other fine dish is in the mix. That and a glass of fine Chardonnay. That @rangelone is one busy fellow!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi WebWerx, Is this now resolved ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hey @Danny: This item kinda went off the proverbial rails. I was able to setup my Divs and style the items within each text widget. But I still need help identifying individual widgets as I want to limit styling to same. Am I making sense? @simple_mama will know what I am talking about.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi WebWerx, You can simply use Firebug or Chrome/Safari's web dev tool to find the Widgets ID. Each Text Widget is given a specific id which allows you to apply CSS to that particular widget. Look at the image I have linked below. http://screencast.com/t/V0SkYCju5B There are two text widgets there, the one highlighted in red has an id of 2 and the green highlight widget has an id of 3. So with that, we can then use these id's to style the each widget individually view the code below to see what I mean. [code]/* This styles the widget pad for each text widget, the id at the beginning will add the styling to the text widget with that ID */ #text-2 .widget-pad {background-color:red;padding:8px;} #text-3 .widget-pad {background-color:green;padding8px;} /* This styles the widget title, again the ID at the beginning will add the styling to only that widget's title */ #text-2 .widget-title {color:white;font-size:3em;} #text-3 .widget-title {color:lightgreen;font-size:5em;} /* This styles the widget text */ #text-2 .textwidget {color:white;font-size:1.8em;} #text-3 .textwidget {color:lightgreen;font-size:1.7em;}[/code] Adding the code above will end up giving you this: http://screencast.com/t/Vk8kq0ib61

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great explanation @Danny! I get it. So then (to dig deeper and get where I want to be)..... If I want to make a class specific to a widget on my site, I would add #text-3 (for example) to my CSS in order to ensure the changes I made were specific to one widget. So instead of adding this: [code] .widget-webfuel-client-testimonials-author{ float:left; width:300px; padding-top: 0px; font-family: Georgia, serif; font-size: 18px; font-style: italic; color: 555555; }[/code] I would add this: [code] #text-3 .widget-webfuel-client-testimonials-author{ float:left; width:300px; padding-top: 0px; font-family: Georgia, serif; font-size: 18px; font-style: italic; color: 555555; }[/code] So the first way allows the CSS outlined in the DIV to be applied anywhere while the second way restricts it o that particular widget. And I am sure that I can refine things so that the CSS only works with widgets. Do I get a gold star?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Haven't slept since 1982. My eyes have enough bags under them that I could travel for 6 months without carrying extra luggage. Its not easy running an empire.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0