Beefy Boxes and Bandwidth Generously Provided by pair Networks
There's more than one way to do things

Desired maintenance for Perlmonks CSS

by dfaure (Chaplain)
on Aug 10, 2004 at 01:35 UTC ( [id://381428] : monkdiscuss . print w/replies, xml ) Need Help??

As xdg and several others stated here (the node reputation speaks for itself), I'd like to have things happening concerning CSS at Perlmonks.

I fully agree that this kind of task is quite long and not trivial but IMHO, This could really makes Perlmonks better for the end user as for the devils. In the interim, I would love to have more id/class specified to avoid tricky CSS as you can find in my current one below.

Precisely, I'll need class/id for table elements involved in thread replies categorizing the global reply header, and the different parts of each replies. I managed to make it run partially under Firefox or IE6 with the code below (unable to adjust main reply backgound-color):

#monkbar { display: none; } h3.other, h3.superdoc, h3.categorized_answer, h3.categorized_question +{ font-size: 200%; font-style: italic; font-family: Georgia, serif; padding: 10px; } pre, tt { font-family: "Bitstream Vera Sans Mono", monospace; } .topnavmenu, #replies_table font { font-size: 100%; } textarea { width: 100%; height: 25em; } body { color: black; background-color: rgb(240,240,240); } a { color: rgb(39,78,144); } a:link { text-decoration: underline; } a:hover, a.titlebar:hover { text-decoration: underline; } a:visited, a.titlebar:visited { text-decoration: none; } td { color: black; } tr.titlebar { background-color: rgb(100,135,220); } td.titlebar { color: white; } tr.section_title { color: white; background-color: rgb(0,51,153); } td.section_title { color: white; background-color: rgb(0,51,153); } tr.post_head, tr.highlight { background-color: /*rgb(140,170,230)*/ rgb(212,208,200); } .code { border: 1px solid #666; padding: 10px; color: rgb(39,78,144); background-color: white; display: block; } table.nodelet_container { background-color: rgb(0,51,153); } tbody.nodelet th, th.nodehead { color: white; background-color: rgb(0,51,153); /* color: rgb(39,78,144); background-color: rgb(140,170,230);*/ } tbody.nodelet td, td.nodebody { color: rgb(39,78,144); background-color: rgb(240,240,240); } table#replies_table { background-color: /*rgb(240,240,240)*/transparent; } table#reply_tables th a { background-color: rgb(0,51,153); } table#replies_table th font { color: rgb(253,160,91); } table#replies_table td[colspan="2"] { background-color: rgb(212,208,200); } table#replies_table td { background-color: transparent; } #approval_nodelet input[type="text"] { background-color: rgb(255,200,200); } a[href=""] { display: none; }

You may refer to the quite amazing Zen Garden to see what could be done with CSS.

HTH, Dominique
My two favorites:
If the only tool you have is a hammer, you will see every problem as a nail. --Abraham Maslow
Bien faire, et le faire savoir...

Replies are listed 'Best First'.
Re: Desired maintenance for Perlmonks CSS
by demerphq (Chancellor) on Aug 10, 2004 at 12:47 UTC

    To the best of my knowledge there is no single place that stores all of the currently used CSS class'es.

    Producing such a list as an SDC node would probably be the best place to start a project like this.


      First they ignore you, then they laugh at you, then they fight you, then you win.
      -- Gandhi

Re: Desired maintenance for Perlmonks CSS
by Anonymous Monk on Aug 11, 2004 at 19:38 UTC
    textarea {
      width: 100%;
      height: 25em;

    This is not cross-browser friendly (one amongst many parts of your CSS that is so)

      Which browsers are you refering to? Safari? Mozilla? Lynx? A cellphone?

      The issues invoved with creating a truly cross-browser compatible CSS layout are pretty hairy. But they are not insurmountable. It just takes a bunch of patience and testing.

      I am all for a rewrite to do this. However if the HTML is scattered throughout the code there are larger issues to contend with. Maybe cleaning the codebase up first to get all the presentational markup together into one place and taking a more template oriented approach would be the logical first step here? I have never looked at the code so please correct me if this has already been done.