Jump to content


Photo
- - - - -

CSS Sections Identifier List


  • Please log in to reply
5 replies to this topic

#1 stano7

stano7

    Advanced Member

  • Members
  • 49 posts
  • Country: Country Flag

Posted 04 January 2013 - 02:47 PM

Has anyone put together a list of the CSS identifiers for the sections and layouts for pagelines?



#2 catrina

catrina

    Advocate

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

Posted 04 January 2013 - 03:53 PM

In the past, but it is now outdated because of changes in the code. The best way to find selectors would be with Firebug or Chrome development tools.



#3 stano7

stano7

    Advanced Member

  • Members
  • 49 posts
  • Country: Country Flag

Posted 04 January 2013 - 05:38 PM

Firebug or Chrome can be difficult to fine the right CSS selector with all of the different layers of style sheets involved.  I see lots of questions on here about "can't find the CSS for this or that".  Wouldn't it be easier for someone to make a sheet of the common selectors for the different sections?  I find that I waste a lot of time looking for the right one in firebug...



#4 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 January 2013 - 10:56 PM

Hi there, no nothing like that's been created as of yet.

 

It's a good idea, but the emphasis on using firebug and chrome dev tools is to help users learn how to find the selectors and declarations so it can improve their site developing skills going forward, eg: Give a man a fish and you feed him for the day. Teach him to fish, and he eats for a lifetime :-)



#5 suzyo

suzyo

    Super Member

  • Members
  • 105 posts
  • Country: Country Flag

Posted 05 January 2013 - 06:51 AM

I would very much like the instructions for baiting the hook.



#6 Rob

Rob

    One Smart Egg

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

Posted 05 January 2013 - 05:47 PM

Suzy,

 

Most people who use Firebug don't know or realize it has much more under the hood than they see.  Look at the attached file.

 

Once the site's menu is selected, for example,  You'll then see a row of CSS options that appear in the Firebug menu. Starting with a < and div.content-pad in this case (and flowing to the right), each one of the items has its own set of CSS elements that will appear in the CSS sandbox to the right.  If you don't see the correct element under one of those options, check a higher level (each item represents an increasingly higher level).

 

When dealing with a menu, the Firebug tab labelled Style v has checkable options like hover, active and focus.  Check those so you can see the CSS that's applied to those states.  Literally, nothing is hidden, but it's not openly visible. You need to look around to find exactly what you want.

 

It's the most frequently used tool among the moderators, and our key advantage is being able to look quickly to find things. You can do the same thing. I've every confidence in you!

 

As James said, a list is a good idea, but so many things affect the CSS elements, I'm not sure it's practical.  For example, each plugin may add a whole new range of unique CSS elements. Some may add a few under select circumstances, and others when different conditions apply.

 

You mentioned a hook.  Obviously, CSS doesn't go into a hook.  PHP, text, HTML or Javascript can be placed in a hook, and if those things may have a unique class or ID applied to them like <div class="leaderboard">YOUR CODE</div>. Then CSS may be applied to style the class or ID.

 

To find a list of hooks, the easiest way, and most definitive, is the Action Map Plugin, free in our Store.  This will help you to visually identify the hook based on where you want something to appear.  It can be used temporarily to show you the hook, then disabled.  I know you're using Hooker to craft hooks, and that's probably your best bet, until you're comfortable writing them directly.

Attached Files