Re^2: color crazyness and CSS

Ok, this was actually mostly done when you posted this, you didn't check silly hacker :-) Anyway, I added the top and bottom sections today and heres a list of what you can use:

CSS Node/Class-Id Breakdown

Nodes	Item
handle_threaded_nodes	class	$class
		expanded
		link-sep
		NN-link-sep
		nnSummary
		nnt-approval
		nnt-asof
		nnt-author
		nnt-colorkey
		nnt-considerlink
		nnt-fplink
		nnt-incidental
		nnt-kidstuff
		nnt-link
		nnt-marktime
		nnt-nodeattribs
		nnt-noderep
		nnt-p
		nnt-p-title
		nnt-parentlink
		nnt-reputation
		nnt-rootlink
		nnt-section
		nnt-section-break
		nnt-speciallinks
		nnt-time
		nnt-timesince
		nnt-title
		nnt-toggle
		nnt-unapproved
		nnt-viewlinks
		time-text
		toggle
	id	li$node->{node_id}
		nnt-as-of-links
		nnt-section-$anchor
		nodethreads
		nodethreads-foot
		nodethreads-head
		ul$node->{node_id}
		ul-$anchor

$class would be one of the color classes (which are dynamically generated and cannot be seen here, but can be seen in the bottom of your User Settings). $anchor is the anchor name for sections, and the other vars used should be self explanatory. Any of the above is subject to change at 0 notice, but especially any CSS using classes not starting with nnt should assume that they will be renamed to "ntt-$name" at a future date. Likewise for id's not starting with nodethreads or nnt, which will be smilarly renamed. (Sorry about that.)

Im open to specific requests to change or enhance things if people can provide that. For instance I'm hoping that what I've done for the codes meets your requirements.

---
demerphq

_{First they ignore you, then they laugh at you, then they fight you, then you win.

-- Gandhi

Flux8}

Comment on Re^2: color crazyness and CSS

Replies are listed 'Best First'.
Re^3: color crazyness and CSS by hossman (Prior) on Oct 27, 2004 at 07:08 UTC
this was actually mostly done when you posted this, you didn't check silly hacker I checked, i just didn't check very closely. :) nodethreads-head and nodethreads-foot are extremely appreciated. The classes you've added are also very cool for tweaking the way the individual elements look (I've started using a few, but i'm sure i'll find ways to use/tweak the others over time), but there was one part of my initial suggestion that I think you missed (and looking at it now, would probably be the most usefull)... It would also be handy if the information about your vote, front paged, and approved was used in making class names for a span tag arround the whole line -- so that people can highlight nodes that have cetain properties. For example, someone might want all nodes that they have down voted to be striken, all nodes that have been front paged to be in a bigger font size, all nodes that are not approved to be blinking, the number of descendents of each node in italics, and the number of nodes in the selected set to be shown in plain font (instead of bloded as it is now) For example, given the list of classes that exist the individual pieces of data, imagine a corrisponding version of (most of) them that includes "-line-" for use on the whole "p" of the line (I orriginally thought it would make sense on the "li", but you don't want it to apply to the subtree)... <!-- suppose this node is unapproved, and i downvoted it --> <li id='li999999' class='nnt-depth-1 nnt-auth-123291'> <p class='nnt-p-title nnt-p nnt-line-unapproved nnt-line-minusminus' align='left'> ... <!-- all of the existing stuff per node --> ... </p> ... <!-- the subtree of the node (if any) --> ... </li> <!-- suppose this node is frontpaged, and i upvoted it --> <li id='li888' class='nnt-depth-1 nnt-auth-123291'> <p class='nnt-p-title nnt-p nnt-line-approved nnt-line-fplink nnt-line-plusplus' align='left'> ... <!-- all of the existing stuff per node --> </p> <!-- the subtree of the node (if any) --> </li> [download] And then people can setup CSS like this... `.nnt-noderep { font-style: normal; font-weight: bold; color: red; } .nnt-line-minusminus { text-decoration: line-through; } .nnt-line-unapproved { text-decoration: blink; } .nnt-line-fplink { font-size: larger; }` [download]	[reply] [d/l] [select]
Re^4: color crazyness and CSS by demerphq (Chancellor) on Oct 27, 2004 at 22:28 UTC
See what you think now. For some reason the extra div has altered the whitespace behaviour of root nodes (at least on IE). I haven't worked out why yet. Anway,im not sure if I hate it or not so it might change a bit, but I think it is pretty much what you had in mind no?	[reply]
Re^5: color crazyness and CSS by hossman (Prior) on Oct 28, 2004 at 06:52 UTC
Boo-Ya!!!!! that kicks ass dude, totally configurable. I'm also seeing the extra blank lines, i think it's the interaction between the new div tag and the `<br class="nnt-br">` that's just before the `</li>` of each top level node. When I added `br.nnt-br { display: none; }` to my CSS, the blank lines went away. For those that are curious, here's the CSS I'm allready using, I'm sure i'll be adding more.... `div#nodethreads-head { display: none; } div#nodethreads-foot { display: none; } hr.nnt-section-break { display: none; } br.nnt-br { display: none; } .nnt-line-minusminus { text-decoration: line-through; } .nnt-line-fp { font-size: larger; font-variant: small-caps } .nnt-noderep { font-style: normal; font-weight: bold; color: red; }` [download]	[reply] [d/l] [select]