"Asking questions is important, because that's when intuition gets converted into inspiration."

So I changed my email signature recently and trimmed out some of the quotes in it.
I got an email from a friend of mine who noticed, and happened to ask about who the author of the quotes were.

The answer is: Me!

"Asking questions is important, because that's when intuition gets converted into inspiration."

Let me give you an example, I call it:


"How to learn CSS in 40 minutes."

Many thanks to wraith of Lytedev.com for his assistance!

[15:20:46] [Kamilion] cause you scrolled my CSS question off the screen when wraith came back
[15:20:56] [wraith] sorry
[15:21:02] [wraith] little brother has a play - about to leave
[15:21:09] [Kamilion] wraith: ah, no worries then
[15:21:09] [wraith] what's the Q, Kami?
[15:21:16] [wraith] I got ~20 mins
[15:21:16] [Kamilion] oh okay
[15:21:32] [Kamilion] I have a "CSS" field here in drupal
[15:21:43] [Kamilion] and I'm trying to figure out what to stuff in it
[15:22:11] [wraith] pic/
[15:22:13] [wraith] ?
[15:22:20] [wraith] I need a context...
[15:22:38] [wraith] it's probably the class that it's identified as by the CSS
[15:22:45] [wraith] but I dunno
[15:23:29] [Kamilion] Styles for regions
[15:23:29] [Kamilion]  
[15:23:29] [Kamilion] Configure styles which you can add to regions on the "manage display" screens. Add multiple styles line per line.
[15:23:29] [Kamilion] If you want to have a friendly name, separate class and friendly name by |, but this is not required. eg:
[15:23:29] [Kamilion] class_name_1
[15:23:29] [Kamilion] class_name_2|Friendly name
[15:23:29] [Kamilion] class_name_3
[15:23:54] [Kamilion] so it's asking for a CSS class
[15:24:10] [wraith] yeah - classes basically say how an element can be referenced or get'd
[15:24:14] [Kamilion] http://files.sllabs.com/files/theme/style.css
[15:24:19] [Kamilion] there's the existing classes
[15:24:31] [Kamilion] and I'm trying to figure out how to call one, ANY of them
[15:24:32] [wraith] well you give it classes based on what styles you want it to inherit
[15:25:08] [Kamilion] I got that part
[15:25:12] [Kamilion] but like
[15:25:16] [wraith] so if there are styles for the ".green-button" class that you want your element to inherit, you would give it the "green-button" class
[15:25:36] [Kamilion] ah after the dot is the class?
[15:25:41] [wraith] yep
[15:25:43] [Kamilion] what's the #thisthingcalled
[15:25:46] [wraith] . identifies classes
[15:25:49] [wraith] # identifies ids
[15:25:53] [Kamilion] ids
[15:25:55] [Kamilion] okay
[15:26:00] [Kamilion] so that's a CSS ID
[15:26:03] [wraith] and no symbol prefix means an html element
[15:26:06] [Kamilion] and the . below is the classes
[15:26:10] [Kamilion] yeah
[15:26:13] [Kamilion] I saw those at the top
[15:26:21] [wraith] yep - they're generally declared first
[15:26:26] [Kamilion] figured that was 'do this for any html element you see by default'
[15:26:32] [wraith] yup
[15:26:37] [Kamilion] then clearfix
[15:26:40] [Kamilion] which i read up on
[15:26:51] [Kamilion] fixes z order for things like colorboxes
[15:27:12] [wraith] and helps re-heighten blocks which contain floated elements
[15:27:13] [wraith] yep
[15:27:14] [Kamilion] cause it's definied at the top after the html elements
[15:27:25] [wraith] yeah - it's an important helper class to have 
[15:27:36] [Kamilion] but then I'm kinda lost
[15:27:42] [Kamilion] it starts defining IDs
[15:27:50] [wraith] yeah - stylesheets get pretty big pretty fast
[15:27:57] [wraith] so what you wanna do is this:
[15:28:02] [wraith] find other elements on the page
[15:28:12] [wraith] that have the style you want for your new element
[15:28:15] [wraith] see which classes it's got
[15:28:21] [wraith] and give your element the same classes
[15:28:28] [wraith] it will therefore inherit the same styles
[15:28:39] [wraith] and if everything is done right, you will have successfully imitated the element
[15:28:45] [wraith] if you're wanting to make something new
[15:29:02] [wraith] you'll have to find different elements that seem to have bits and pieces of the styles you want to inherit
[15:29:03] [Kamilion] .footer-gallery-block { width: 260px; } 
[15:29:03] [Kamilion] .footer-gallery-block img { background-color: #191F2F; border: 1px solid #252C3E; float: left; margin-bottom: 10px; margin-right: 9px; padding: 5px; }
[15:29:03] [Kamilion] #footer ul.twitter { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: url("images/tweetbg.png") repeat scroll 0 0 transparent;
[15:29:03] [Kamilion] list-style-type: none; padding: 10px; width: 280px; margin-left:0; }
[15:29:24] [Kamilion] that appears in the middle of a bunch of #footer stuff above it
[15:29:32] [Kamilion] but the gallery block doesn't have the ID defined
[15:29:42] [wraith] Kamilion: is this still lensipedia?
[15:29:43] [Kamilion] and then they pick up with the same ID after the gallery block
[15:29:44] [Kamilion] yeah
[15:29:54] [Kamilion] bout halfway down that style.css
[15:30:02] [Kamilion] http://files.sllabs.com/files/theme/style.css
[15:30:26] [wraith] got it
[15:30:35] [Kamilion] I think I want to be dealing in the node area, which is just below that
[15:30:46] [Kamilion] since that's where most of my 'content' is displayed
[15:30:52] [Kamilion] but there's no id there
[15:30:57] [wraith] so what kind of elements are you trying to create here?
[15:31:04] [wraith] what's it supposed to do and be?
[15:31:19] [Kamilion] Well, I've got a couple things I want to do
[15:31:34] [Kamilion] first, I want to define a non-repeating background image for some of these articles
[15:31:43] [Kamilion] but only on some *types* of articles
[15:31:52] [wraith] gotcha
[15:31:52] [Kamilion] eg, canon_lenses but not nikon_lenses, for now
[15:32:03] [wraith] so then you want to make a class
[15:32:10] [Kamilion] so I need to figure out what both of those have in common
[15:32:37] [wraith] yep
[15:32:39] [Kamilion] and then choose a specific image based on, eg, the article's content type
[15:32:40] [wraith] node-canon-lens
[15:32:43] [wraith] that's the class
[15:32:54] [Kamilion] it's making some?
[15:32:57] [wraith] yeah
[15:33:05] [Kamilion] and there's just nothing attached to that in the css
[15:33:17] [wraith] so then you need to put in what you want
[15:33:23] [wraith] that is, a non-repeating background-image
[15:33:42] [Kamilion] okay, second task;
[15:34:04] [Kamilion] http://lensapedia.com/tags/canon-lens?page=6
[15:34:06] [Bottien] Title: Canon Lens | lensapedia.com (at lensapedia.com)
[15:34:13] [Kamilion] this is a 3-column layout
[15:34:20] [Kamilion] I can add a css class to each column
[15:34:33] [Kamilion] i want to add this to the 'right' column
[15:34:51] [Kamilion] where the retail price and stuff is
[15:34:56] [Kamilion] then style those elements
[15:35:14] [wraith] that's class "group-right"
[15:35:14] [Kamilion] what is my workflow for finding these elements and styling them?
[15:35:18] [wraith] so in the stylesheet
[15:35:21] [wraith] you'll wanna reference
[15:35:35] [wraith] .ds-3col-stacked .group right { /* CSS */ }
[15:35:48] [wraith] you using chrome?
[15:35:50] [Kamilion] yeah
[15:35:52] [Kamilion] chromium 17
[15:36:04] [wraith] right click the element, inspect element
[15:36:09] [wraith] be sure it's really your element
[15:36:18] [Kamilion] k, I think I see it
[15:36:22] [Kamilion] yeah
[15:36:24] [wraith] if not, hover around until you find the box that encompasses your element
[15:36:24] [Kamilion] class grou-right
[15:36:24] [wraith] then
[15:36:29] [wraith] just look at the classes
[15:36:29] [Kamilion] then a bunch of fields
[15:36:31] [Kamilion] okay
[15:36:32] [wraith] space-separated
[15:36:48] [Kamilion] right, so field effects them all, field-name-field-msrp
[15:36:56] [wraith] right
[15:37:11] [Kamilion] that will tag only that field
[15:37:11] [wraith] elements can have multiple classes
[15:37:13] [wraith] any of which
[15:37:18] [wraith] can select that element
[15:37:20] [wraith] right
[15:37:21] [wraith] you got it
[15:37:44] [Kamilion] so this is #group-right .field-name-field { do-it-here:stuff }
[15:37:44] [wraith] it's kinda like OOP
[15:37:50] [wraith] nope
[15:37:55] [wraith] .group-right
[15:37:58] [wraith] not #group-right
[15:38:03] [wraith] since it's a class
[15:38:05] [wraith] not an id
[15:38:19] [wraith] 'class="group-right"' not 'id="group-right"'
[15:38:27] [Kamilion] okay so if I wanted to dick with field-name-field-msrp
[15:38:37] [Kamilion] which is under group-right
[15:38:39] [Kamilion] in the html
[15:38:50] [wraith] .group-right .field-name-field-msrp { /* CSS */ }
[15:38:56] [Kamilion] AH.
[15:39:00] [wraith] . selects classes, # selects ids
[15:39:06] [wraith] so you'll generally use .
[15:39:15] [Kamilion] Oh I see, so I'm doing the selectors inside the CSS itself
[15:39:20] [wraith] yep
[15:39:29] [Kamilion] see, this is why I needed a people
[15:39:37] [wraith] I understand =D
[15:39:41] [Kamilion] all the books and all the kings blog posts couldn't put humpty dumpty together
[15:39:50] [Kamilion] rightyo
[15:40:04] [Kamilion] so lemme syntax this one
[15:40:40] [Kamilion] .group-right .field-name-field-msrp { background: url("images/tweetbg.png") repeat scroll 0 0 transparent; }
[15:41:03] [Kamilion] that would ONLY affect MSRP if it was in that right handed box
[15:41:04] [wraith] sounds good
[15:41:08] [wraith] yep
[15:41:12] [Kamilion] if I moved the field to the left handed box
[15:41:15] [wraith] or in AN right-handed box
[15:41:18] [wraith] ANY*
[15:41:18] [Kamilion] say inside the actual clicky article
[15:41:27] [Kamilion] then I could style it totally differently
[15:41:29] [wraith] then it won't style it that specific way, right
[15:41:31] [wraith] yep
[15:41:40] [wraith] it has to meet all the selectors in the html and in that order
[15:41:50] [Kamilion] ... All of them?
[15:41:55] [wraith] yep

[15:42:55] [Kamilion] so if field-type-number-float is never defined
[15:43:03] [Kamilion] then it's just ignored in the html until I go and define it
[15:43:18] [wraith] right
[15:43:26] [wraith] because the CSS will never go look for it
[15:43:45] [Kamilion] okay, so where in this style.css would I put that?
[15:43:49] [wraith] anywhere
[15:43:50] [wraith] but, keep it organized, so
[15:44:02] [wraith] preferrably with similar selections
[15:44:08] [Kamilion] .group-right .field-name-field-msrp { background: url("images/tweetbg.png") repeat scroll 0 0 transparent; }
[15:44:16] [Kamilion] should I put that under the node comment?
[15:44:29] [Kamilion] since that's where in my mind, I'm wanting it applied?
[15:44:51] [wraith] yep
[15:44:54] [Kamilion] then go into defining links and search blocks under there
[15:44:54] [wraith] however it works in your mind
[15:45:02] [wraith] my personal way, is to go from top to bottom
[15:45:10] Kamilion nods
[15:45:12] [wraith] so I start with the body, (and any other html elements)
[15:45:14] [wraith] then move down
[15:45:15] [wraith] header,
[15:45:16] [wraith] content
[15:45:18] [wraith] sidebar
[15:45:21] [wraith] footer
[15:45:30] [wraith] and put everything kind of in order that way
[15:45:32] [wraith] however
[15:45:39] [wraith] that's not how most people do it, but do it how you see fit
[15:45:48] [Kamilion] well, under the searchblock they define specific behavior for, the front page image slideshow, and some other minor html 'extras'
[15:45:59] [Kamilion] tr.even and tr.odd
[15:46:06] [wraith] yeah
[15:46:17] [wraith] what you could also do
[15:46:22] [Kamilion] when the credits were referenced, they were also at the bottom of the page
[15:46:25] [wraith] is just keep user-defines stuff at the VERY bottom
[15:46:25] [Kamilion] but
[15:46:29] [Kamilion] Ahh
[15:46:30] [Kamilion] okay
[15:46:36] [Kamilion] there's already a few of those
[15:46:45] [wraith] well there ya go - that'll work just fine too
[15:46:47] [Kamilion] but like
[15:46:56] [Kamilion] just above the credits section is the 'top social network icons'
[15:46:56] [wraith] that way if you every change templates, you know which stuff is yours
[15:47:03] [Kamilion] meaning the social network icons in the top bar of the site
[15:47:06] [Kamilion] above even the header
[15:47:10] [Kamilion] where the search box is
[15:47:16] [wraith] yeah, like I said, most people don't do it the way I do
[15:47:20] Kamilion nods
[15:47:24] [Kamilion] anyway
[15:47:31] [Kamilion] thanks for the help man, go support your little brother
[15:47:37] [wraith] np - cya later =)
[15:47:39] [Kamilion] Much appreciated.
[15:47:43] Kamilion save-logs
[15:47:46] [wraith] absolutely
[15:48:09] Kamilion holds CSS over his head
[15:48:11] [wraith] lol
[15:48:12] [wraith] ok
[15:48:14] [Kamilion] Da na na NAAA
[15:48:15] [wraith] bbl
[15:48:18] Kamilion waves