Beefy Boxes and Bandwidth Generously Provided by pair Networks
Do you know where your variables are?
 
PerlMonks  

Use node # as CSS class names?

by adrianh (Chancellor)
on Dec 30, 2002 at 01:31 UTC ( #222984=monkdiscuss: print w/ replies, xml ) Need Help??

A little idea has just popped into my head - quite possibly a foolish one since it's late and I'm just about to go to bed...

  1. Add the node number (prefixed by "node") as the CSS class for all anchors generated by [id://NNNN].
  2. Add a <div></div> with a class of the current pages node number (again prefixed by "node") around each page.

This would enable some neat tricks with user-CSS. Some examples:

  1. Feeling narcissistic? Set all the links to your home node to bold, red, 20pt text and never miss a link to your home node again...
  2. Interested in what a particular monk has to say on a subject? Add a border around links to their home node on the Newest Nodes page.
  3. Don't want to see the Most Recently Added Questions section of the Q&A page? Just stop it being displayed based on the pages node number.

Sane - or should I have got some sleep before hitting submit?

Comment on Use node # as CSS class names?
Select or Download Code
Re: Use node # as CSS class names?
by Juerd (Abbot) on Dec 30, 2002 at 01:58 UTC

    # Interested in what a particular monk has to say on a subject? Add a border around links to their home node on the Newest Nodes page.

    I like that idea.

    - Yes, I reinvent wheels.
    - Spam: Visit eurotraQ.
    

Re: (nrd) Use node # as CSS class names?
by newrisedesigns (Curate) on Dec 30, 2002 at 06:16 UTC

    I don't know about using CSS ID attributes on all the links (especially filling the ID with the node ID), but I'll second Juerd by using the users' names in links to each monk's homenode. Would be quite helpful in the chatterbox as well...

    <div id="ms_newrisedesigns"> &lt;<a href="/?node=newrisedesigns" id="lk_newrisedesigns">newrisedesi +gns</a>&gt; Hello all! </div> <div id="ms_NodeReaper"> &lt;<a href="/?node=NodeReaper" id="lk_NodeReaper">NodeReaper</a>&gt; +Quiet, you. </div>

    John J Reiser
    newrisedesigns.com

      I don't know about using CSS ID attributes on all the links (especially filling the ID with the node ID), but I'll second Juerd by using the users' names in links to each monk's homenode.

      My guess is that this would be more expensive to implement since you would have to check whether each node refers to a user node or a normal node... but knowing nothing about the PM implementation I could be wrong :-)

      Just one remark: I think you better use the CSS class rather than the id, because refs to one node can occur more than one time, and the ID attribute is supposed to be unique within one document (at least for well formed (x)html). This is also what adrianh suggested in his post.

      Also, I'm not completely sure about CSS classes consisting of only numbers being legal, so we have:

      ...posted by <a href="...?node_id=186362" class="id186362">adrianh</a>...
      And in your stylesheet:
      .id186362 { background-color: orange; }
      As for this idea being expensive at execution time, I hardly doubt so, as the node_id value should be known at page render time anyway for the href attribute; printing the same variable a second time should be rather trivial IMHO.

      --
      Cheers, Joe

        you better use the CSS class rather than the id,

        Quite correct.

        I'm not completely sure about CSS classes consisting of only numbers being legal

        Correct again :-) CSS identifiers (this covers both ID and class names) cannot start with a digit or hyphen. See the spec for the details.

        I lied. Underscores have been allowed since the 1998 errata.

        As for this idea being expensive at execution time, I hardly doubt so, as the node_id value should be known at page render time anyway for the href attribute

        I understood John's suggestion to mean that the class should only be applied to links to home nodes rather than to all links - and he was using the user name rather than the node ID. Knowing the difference between normal nodes and home nodes has got to cost something ;-)

Re: Use node # as CSS class names?
by adrianh (Chancellor) on Dec 30, 2002 at 14:14 UTC
    2. Add a <div></div> with a class of the current pages node number (again prefixed by "node") around each page.

    Now I'm awake again, I've realised that it would be better to add an id attribute to the <body> tag, rather than adding a separate <div>. Something like:

    <body id="www-perlmonks-org 1234">

    Where 1234 is the node number of the page in question.

    This kind of thing has become known as a CSS signature and allows you to do funky things with user-style sheets. See this css-discuss thread for more info.

Re: Use node # as CSS class names?
by Aristotle (Chancellor) on Dec 30, 2002 at 15:32 UTC
    No need for PerlMonks-side changes if your browser supports CSS Level 2 - such as the venerable Mozilla. Try putting this at the end of your stylesheet:
    a[HREF="/index.pl?node_id=186362"] { font-size: 2em; font-weight: bold; color: #f00; }
    Of course it will need another style definition for [adrianh] style links which end up as href="/index.pl?node=adrianh", but together that should cover 99.8% of all cases.

    Makeshifts last the longest.

      D'oh! I'm an idiot. I knew you could do that sort of thing....well spotted.

      ++ when tomorrow's votes come in!

      I still think this is a good idea tho'.

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://222984]
Approved by Juerd
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others chilling in the Monastery: (3)
As of 2014-09-17 01:14 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    How do you remember the number of days in each month?











    Results (55 votes), past polls