Jump to content


Photo
- - - - -

Defining a CSS Class for Particular Widget


  • Please log in to reply
12 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 09:07 PM

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:

Please Login or Register to see this Hidden Content

I looked in FireBug and am stumped as to how to even define the particular widget class:

Please Login or Register to see this Hidden Content

(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".

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 May 2012 - 09:47 PM

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.

#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 10:13 PM

@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.....

#4 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 10:22 PM

@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!

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 May 2012 - 12:04 AM

Like Nero, who didn't know a musical note from laurel leaf. Hmmm. Okay, check out the quote I styled bottom of this page:

Please Login or Register to see this Hidden Content

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!

#6 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 30 May 2012 - 02:06 AM

@rangelone: Thanks for sharing. Here is what I ended up doing for the quote on our site. I used glyphs for the quote mark:

Please Login or Register to see this Hidden Content

This is what it looks like:

Please Login or Register to see this Hidden Content

Pretty interesting portfolio of companies. Do you sleep?

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 May 2012 - 02:45 AM

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

#8 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 30 May 2012 - 09:56 AM

@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!

#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 17636 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 May 2012 - 10:13 AM

Hi WebWerx, Is this now resolved ?

#10 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 30 May 2012 - 10:22 AM

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.

#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 17636 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 May 2012 - 11:07 AM

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.

Please Login or Register to see this Hidden Content



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.

Please Login or Register to see this Hidden Content


Adding the code above will end up giving you this:

Please Login or Register to see this Hidden Content



#12 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 30 May 2012 - 01:03 PM

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:

Please Login or Register to see this Hidden Content


I would add this:

Please Login or Register to see this Hidden Content


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?

#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 May 2012 - 09:27 PM

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.