Beefy Boxes and Bandwidth Generously Provided by pair Networks
XP is just a number
 
PerlMonks  

Restyling PerlMonks

by jdporter (Canon)
on Mar 24, 2008 at 18:34 UTC ( #675952=note: print w/ replies, xml ) Need Help??


in reply to jdporter's treehouse
in thread jdporter

This node will only be of interest to pmdev.

This node summarizes the current modes of implementing web page style on PerlMonks. Some is done with CSS (attributes class and id), while some — entirely too much — is done using "hardcoded" stylistic controls such as <font size>, color and bgcolor.

I did this research for the purpose of determining where more conversions to CSS should be done. Ultimately, we may find that not all "hardcoded" styles can be converted to CSS. For example, a few pages achieve special gradient effects by calculating and embedding color numbers. It may turn out that such color gradients will be acceptable in any user color scheme; or, perhaps, the "control" numbers (i.e. color start and end points in a gradient) can be opened up for customization in the user's Display Settings.

The task of determining what code does it which way could be approached from two ends: we could search the code nodes for occurrences of the bgcolor (etc.) strings, or we could fetch actual web pages and parse them for such things. The former approach has two problems: attributes are not inserted in code in a consistent way (for example, we might find bgcolor='$color' or bgcolor = "#ff0000" or the CGI-style { -bgcolor => $bgcolor }); and more critically, there is tons of "dead code". Not only do we not care about what dead code has, but very often it is difficult or impossible to tell which of several variants is the "good" one. Therefore, I have taken the approach of fetching web pages, and parsing them for relevant attributes.

Below is an index of all the nodes I used in this survey. (Please note — this is in no way an index of interesting posts! You will not find any PMDs or Meditations here! And for this purpose, "posts" includes pages in the PerlMonks FAQ and the Library.) Some node types (in particular, "posts" in the various sections, FAQ and Library) are guaranteed to have invariant format, so for those types we only need one example of each. Since the idea is to illustrate every displayable node format, we don't list nodes of "indirect" types, such as htmlcode.

SuperDoc:

Since every SuperDoc is unique, we list them all. (Actually, not quite all. I have excluded those to which I am not permitted access, and those which have null or broken content/functionality.) I have grouped them by functional style/role.

Postable "Sections": Settings: Interactive functions: (These present a form of some kind) Interactive results: (you would be brought here from somewhere else) Non-interactive results: (could change from one fetch to the next) Documents: (essentially static; might pull a small bit of data out of another relatively static record) Misc: In fullpage chat, called with displaytype=raw:

Mail:

FullPage:

XML generators:

SectionContainer:

SectionContainers are obsolete, but this one is interesting because it illustrates the use of the .paneled css class.

Document:

Documents do not have 'code', and the 'viewcode' displaytype does not work for them. AFAICT, there is no code (no dynamic content generation) behind any of these. In fact, most of the other displaytypes don't work for Document either. Therefore, these are listed for curiosity only; we couldn't fix them even if we found a problem. (Gods could, however.)


We take one example of each of the following nodetypes:

nodetype:example:
nodetyperestricted_superdoc
containergeneral container
htmlpagecontainer display page
nodegrouphtmlvars nodegroup
nodeletPersonal Nodelet
noteRE: RE: RE: The Rob Malda Rule:
userpaco
perlquestionObject version x.yz does not match bootstrap parameter a.bc
perlmanperlman:perlstyle
datasuperdoc title image data
perlfuncperlfunc:time
perlmeditationMerging hashes; Object version x.yz does not match bootstrap parameter a.bc
perlcraftParsing Class Paths
perlfaq nodetypeHow can I use Perl interactively?
dbtableapprovalhistory; index
maintenancenote maintenance create
settingnote settings
perltutorialBasic Objects with Overloaded Operators
perlexerciseBasic I/O Exercises
perlsolutionBasic I/O #1
monkdiscusssnippets library
CUFPDark Theme for /. through Perl
themesettingroot's default themesettings
pollWhen Y2k hits I'll be..
poemTux vs. Daemon
obfuscatedThe Perl Journal
sourcecodeTarball Cleaner
categorized questionHow do I shuffle an array?
categorized answerAnswer: How do I shuffle an array?
snippetReturn the contents of a file
rawpagestrikefear
requestFree Nodlet trouble has one reply; something borked in the display code
questThemes Design Quest
hintWhat is a hint
sitefaqletWriteup Formatting Tips
perlnews"Beginning Perl" Published
modulereviewLingua::Ispell
bookreviewBeginning Perl
wikiphantasma-wiki
devtaskpmdev task management tools
patchsnippets section - (patch)
pmmoduleCGI/Util.pm
rawdatapaco's user image these are user images
scratchpadcoreolyn's scratchpad
cssRed CSS
pmdevnoteRe: addnewform - (patch) these are replies to patches
sitedocletChoosing a username
pmdevtopicNodelet Settings and Proposed future changes to Approval System
sqlqueryget_user_locations
offtopicrootAre there PM-like sites for java, python?
scriptallocateVotes.pl
faqlistWhere can I find more information on...
alphafaqletUsing the Message Inbox
tutlistUnderstanding and Using PerlMonks
faqstringFront Page
tutstringHow to ask questions the smart way
largedoclist of words for median string problem

This list is instrumental in my ongoing work to convert the site to CSS. It serves as a test suite and a live running status of the changes made. As we make changes — often to htmlcode buried ten layers deep — we need a good way of determining that the appropriate changes are happening on the surface. At the same time, this suite tells us (or gives us a good idea, anyway) of what exactly remains to be done, with regard to replacing hard-coded stylings with CSS.

For this endeavor, we need someone who understands html and css. I've got a pretty good (though far from perfect) handle on the code; but my comprehension of the subtleties of CSS is woefully inadequate. And when it comes to having a coherent web site "design", well... I'm a geek, not an artist.

So here's how I plan to use this list. I'm going to suck down a copy of each page listed here, and grep through it for any css classes/ids used, as well as for any of the kind of markup we want to eliminate, i.e. hardcoded colors and the like (e.g. bgcolor, font). This tells us (a) what css elements we actually need to account for in the site css pages, and (b) what hardcoded stylings remain to be eliminated (replaced with css). We'll re-run this after each round of relevant patching.

From the other side, someone needs to look at all the css nodes, and make a list of all the css classes/ids defined there, and do code searches for them. This is to build our understanding of how the site's design is currently structured; plus we'll be able to identify any styles defined but unused.

Thirdly, someone needs to go to the theme nodes, and get a list of all theme "variables" defined, and find every occurrence of usage of them in (non-dead) code. This is mainly just to ensure that we don't let any fall through the cracks. Identifying which actually need to be replaced is accomplished by step 1, above.

And fourthly and most importantly, someone with some sense of design and a pretty good understanding of css should define an overarching style "architecture" for the site. Ideally, we'd like to be able to make some fairly radical changes, e.g. make much less use of tables for layout.

[Petruchio]: Back in the day, the version control system here consisted of the "back" button on a god's browser.
[Corion]: I guess it's more about the conveyed structure than about the screen real estate. The question is bigger (= more important) than the answers
[tye]: and it is also about the poor model used for selecting font size (yes, even in modern CSS, for the koolaid drinkers present)
[tye]: adding a css target as a first step is a great idea. there will be heart burn when we remove size="-1", but we should eventually do that anyway
[tye]: CSS lets you pick font size relative to inherited font size in several ways. But they all apply to font /height/, even if derived from a font /width/. The default should be to select font on something that better matches /perceived/ size...
[tye]: more like "cell volume" or "diagonal size"
[tye]: the only reason size="-1" was added was because the text font and the code font at PM were the same "size" but, especially on some systems, the code /looked/ /much/ bigger

Some relevant old PMD threads:


In the tables below, the first two list "all" occurrences of the attributes class, id, bgcolor, color, size, and style in the above list of pages. The "old" attributes (bgcolor, color, size, and style) are listed in the first table; the "new" attributes (class and id) are in the second.

It's not really all, because I've excluded certain nodes which make heavy or obsequious use of color (e.g. color gradients) and other silliness which would be troublesome to reimplement in static CSS. These pages were completely excluded: notes tree, Modular Pascal's Triangle, user variables, User Settings2, Recently Active Threads Faqlet. As it is, not every node listed here really matters. For example, you can completely ignore root's default themesettings and note settings, as they are not used anywhere. Similarly, I've excluded certain CSS classes and IDs used by certain pages, such as the huge family of nnt-* classes/IDs used by Recently Active Threads, and (nearly) all generated classes/IDs, such as the node-from-* classes stuck on entries in Newest Nodes. This excluded content is shown in the tables at the very bottom.


The first table shows what is still being implemented the old way. This represents work still ahead of us:

attributevalueelement tagpages where used, and count
size-1fontEX.poll-1; EX.perlfunc-1; EX.perlman-8; Offering Plate-1;
size1fontPerl Monks Discussion-4; The Monastery Gates-1; Perl Poetry-1; EX.CatQ-1; review reviews-1; Inner Scriptorium-6; Meditations-1; Craft-3; EX.note-1;
size2fontmany
size2ptfontEX.nodelet-16; EX.patch-11; Patch Lister-151; Pmdev Settings-1; EX.container-30; EX.maintenance-7; EX.htmlpage-6;
sizesmallerfontPersonal Nodelet Settings-2;
attributevalueelement tagpages where used, and count
stylecolor: bluespanEX.patch-1;
stylecolor: redspanEX.patch-2;
styledisplay:blockformUser Settings-1; Signature Settings-1; Pmdev Settings-1; Display Settings-1; RAT Style Settings-1; Free Nodelet Settings-1; Newest Nodes Settings-1; Message Settings-1;
styledisplay:nonedivEX.CUFP-3; Perl Monks Discussion-3; Cool Uses for Perl-2; EX.nodelet-1; Scratch Pad Viewer-1; Login-1; EX.patch-1; The Monastery Gates-1; hintlaunchsetting-1; Search internal code-1; Perl Poetry-3; EX.poem-3; Obfuscated code-3; EX.poll-1; ignored users-2; Patch Lister-1; just_chat-1; Recently Updated Home Nodes-1; Add your code-1; EX.quest-1; EX.CatQ-2; EX.container-1; EX.CatA-1; Timezone Settings-1; EX.monkdiscuss-3; Snippets Section-1; EX.bookreview-3; review reviews-3; Perl News-1; EX.perlnews-3; Nodelet Orderer-1; Nodelet Settings-1; EX.sourcecode-3; EX.snippet-3; Nodes to consider-1; ad_and_talk-1; EX.modulereview-3; EX.pmdevnote-1; Newest Nodes-2; Personal Nodelet Settings-1; Type Tree-1; Inner Scriptorium-2; EX.pmdevtopic-1; Recently Active Threads-1; Super Search-1; EX.offtopicroot-2; EX.sqlquery-1; Recent janitorial edits-1; Call for a Recount-1; Seekers of Perl Wisdom-3; Meditations-2; User Settings Statistics-1; Snippet Size Viewer-1; Theme Settings-1; privatemessages-1; EX.note-3; Big Pretty Nodelist-1; EX.maintenance-1; Thread Management Page-1; EX.htmlpage-1; add entries to vroom's book list-1; EX.largedoc-1; Perl Monks User Search-1; cpan module search-1; EX.perlcraft-3; EX.perlmeditation-6; EX.perltutorial-3; EX.obfuscated-3; Tutorials-1; EX.perlsolution-1;
styletext-align:righttdNew Perl Monks User Search-6;
stylewidth:100%selectPatch Lister-2;

This table shows what's already been implemented with CSS. In some sense, it represents the part of our job already done:

attributevalueelement tagpages where used, and count
classNN-highlighttrNewest Nodes-131;
classNN-link-sepspanNewest Nodes-6; Recently Active Threads-8;
classQAapprovepEX.CatQ-2;
classadd-root-blurbtrPerl Monks Discussion-1; Cool Uses for Perl-1; Perl Poetry-1; Obfuscated code-1; review reviews-1; Perl News-1; Inner Scriptorium-1; Seekers of Perl Wisdom-1; Meditations-1; Tutorials-1;
classadd-textspanPerl Monks Discussion-1; Cool Uses for Perl-1; Perl Poetry-1; Obfuscated code-1; review reviews-1; Perl News-1; Inner Scriptorium-1; Seekers of Perl Wisdom-1; Meditations-1; Tutorials-1;
classadd-titlespanPerl Monks Discussion-1; Cool Uses for Perl-1; Perl Poetry-1; Obfuscated code-1; review reviews-1; Perl News-1; Inner Scriptorium-1; Seekers of Perl Wisdom-1; Meditations-1; Tutorials-1;
classaddlinksspanmany
classaddnewformtablePerl Monks Discussion-1; Cool Uses for Perl-1; Perl Poetry-1; Obfuscated code-1; review reviews-1; Perl News-1; Inner Scriptorium-1; Seekers of Perl Wisdom-1; Meditations-1; Tutorials-1;
classattributionspanmany
classattribution-titlespanEX.CUFP-1; EX.devtask-1; EX.patch-1; EX.nodetype-1; EX.hint-1; EX.poem-1; EX.poll-1; EX.quest-1; EX.bookreview-1; EX.pmmodule-1; EX.perlnews-1; Password Mail-1; EX.sourcecode-1; EX.snippet-1; EX.modulereview-1; EX.pmdevnote-1; EX.scratchpad-1; We've missed you at Perl Monks-1; EX.pmdevtopic-1; EX.offtopicroot-1; EX.sqlquery-1; EX.dbtable-1; EX.note-1; EX.tutstring-1; EX.perlfaq-1; EX.largedoc-1; EX.perlcraft-1; EX.perltutorial-1; EX.nodegroup-1; EX.data-1; EX.user-1; Perl Monks: Sorry for the wait!!-1; EX.obfuscated-1;
classauth-108447divEX.pmdevnote-1;
classauth-113divEX.note-1;
classbannerrowtrmany
classboldtdVisit Reaped Nodes-5;
classcategorized_answerh3EX.CatA-1;
classcategorized_questionh3EX.CatQ-1;
classcb_more_messagesspanprivatemessages-1;
classchatboxinputad_and_talk-1;
classchatrowtrad_and_talk-1;
classchatsubmitinputad_and_talk-2;
classchatter-filterdivignored users-1;
classdiff_deletedspanEX.patch-2;
classdiff_insertedspanEX.patch-1;
classdiff_matchspanEX.patch-1;
classdiff_stringsdivEX.patch-1;
classdifferenttrEX.nodelet-6; EX.patch-3; Patch Lister-26; EX.container-9; EX.maintenance-2; EX.htmlpage-1;
classeven-rowspanshowotherusers-13;
classeven-rowtrSelected Best Nodes-25; Best Nodes-25; Worst Nodes-25;
classexpandedulRecently Active Threads-111;
classfaqlist-itemtypespanEX.faqlist-8;
classframetalkbartablead_and_talk-1;
classgroupdisplaytableEX.nodegroup-1;
classgroupdisplaythEX.nodegroup-2;
classhighlighttablePerl Monks Discussion-1; Cool Uses for Perl-1; pmdev task lister-1; Perl Poetry-1; Obfuscated code-1; Code Catacombs-2; Categorized Questions and Answers-1; Snippets Section-1; review reviews-1; Perl News-1; Nodes to consider-1; Selected Best Nodes-1; Inner Scriptorium-1; Seekers of Perl Wisdom-1; Meditations-1; Craft-1; SQLQuery List-1; Quests-1; Best Nodes-4; Worst Nodes-4;
classhighlighttdNode lister-100;
classhighlighttrPerl Monks Discussion-1; EX.nodelet-1; pmdev task lister-5; EX.patch-1; The St. Larry Wall Shrine-1; Perl Poetry-1; Obfuscated code-5; Patch Lister-24; Code Catacombs-10; EX.container-1; Snippets Section-15; review reviews-15; Uncategorized Questions-1; Perl News-15; Most Visited Nodes-100; EX.sourcecode-3; EX.snippet-1; Nodes to consider-15; Our Best Users-25; Saints in our Book-274; Seekers of Perl Wisdom-3; Visit Reaped Nodes-1; EX.maintenance-1; EX.htmlpage-1; Quests-5;
classinlinecodettPerl Monks Discussion-31; Cool Uses for Perl-11; pmdev task lister-1; The Monastery Gates-12; Perl Poetry-2; Obfuscated code-5; EX.sitefaqlet-31; Add your code-2; EX.CatQ-3; Snippets Section-3; EX.bookreview-2; review reviews-28; Perl News-6; PerlMonks Approved Chatter HTML Tags-10; Perl Monks Approved HTML tags-26; Inner Scriptorium-15; Display Settings-4; Seekers of Perl Wisdom-7; Meditations-22; Voting/Experience System-16; EX.perlmeditation-2; What XML generators are currently available on PerlMonks?-9; EX.perltutorial-1; Tutorials-2; Site How To-2;
classlink-sepspanmany
classlistcodedivEX.nodelet-1; EX.container-1; EX.maintenance-1; EX.htmlpage-1;
classmailheadtrPassword Mail-2; We've missed you at Perl Monks-2; Perl Monks: Sorry for the wait!!-2; new user mail-2;
classmain_contentdivmany
classmonkquiptdmany
classmonkquiptrmany
classmonktitlebartdmany
classmsgspanprivatemessages-3;
classmsg_usertrEX.user-1;
classmsgfromiprivatemessages-3;
classnavmenu-link-sepspanmany
classnnSummarypNewest Nodes-1;
classnnSummaryspanRecently Active Threads-1;
classnodeletdivmany
classnodelet-link-sepspanmany
classnodelet_bodydivmany
classnodelet_containerdivmany
classnodelet_headdivmany
classnodeletsdivmany
classnotetextdivEX.pmdevnote-1; EX.note-1;
classodd-rowspanshowotherusers-13;
classodd-rowtrSelected Best Nodes-25; Best Nodes-25; Worst Nodes-25;
classotherh3EX.CUFP-1; EX.nodelet-1; EX.devtask-1; EX.patch-1; EX.nodetype-1; EX.hint-1; EX.sitedoclet-1; EX.poem-1; EX.poll-1; EX.sitefaqlet-1; EX.quest-1; EX.perlfunc-1; EX.container-1; EX.monkdiscuss-1; EX.bookreview-1; EX.pmmodule-1; EX.perlnews-1; Password Mail-1; EX.sourcecode-1; EX.snippet-1; EX.modulereview-1; EX.pmdevnote-1; EX.scratchpad-1; EX.perlman-1; We've missed you at Perl Monks-1; EX.pmdevtopic-1; EX.offtopicroot-1; EX.sqlquery-1; EX.faqlist-1; EX.dbtable-1; EX.alphafaqlet-1; EX.note-1; EX.tutlist-1; EX.tutstring-1; EX.perlfaq-1; EX.maintenance-1; EX.htmlpage-1; EX.largedoc-1; EX.faqstring-1; EX.perlcraft-1; EX.perlmeditation-2; EX.perltutorial-1; EX.nodegroup-1; EX.data-1; EX.user-1; Perl Monks: Sorry for the wait!!-1; EX.obfuscated-1; new user mail-1; EX.perlexercise-1; EX.perlsolution-1;
classother-users-blurbspanshowotherusers-1;
classother-users-textspanshowotherusers-1;
classpaneleddivEX.CatQ-1;
classpaneledtableEX.CatQ-1;
classpatch-edit-formformEX.nodelet-1; EX.container-1; EX.maintenance-1; EX.htmlpage-1;
classpersonal-clockpmany
classpm-user-infotableEX.user-1;
classpolltableEX.poll-1;
classpost_bodytrPerl Monks Discussion-15; Cool Uses for Perl-15; The Monastery Gates-11; Perl Poetry-10; Obfuscated code-10; review reviews-15; Inner Scriptorium-10; Seekers of Perl Wisdom-10; Meditations-15; Craft-10; SQLQuery List-28;
classpost_headtrPerl Monks Discussion-15; Cool Uses for Perl-15; The Monastery Gates-11; Perl Poetry-10; Obfuscated code-10; review reviews-15; Inner Scriptorium-10; Seekers of Perl Wisdom-10; Meditations-15; Craft-10; SQLQuery List-28;
classquest-timetdEX.quest-2;
classreadmore-linkdivPerl Monks Discussion-7; Cool Uses for Perl-5; The Monastery Gates-2; Perl News-3; Inner Scriptorium-1; Seekers of Perl Wisdom-2; Meditations-4;
classreadmore-sizespanPerl Monks Discussion-7; Cool Uses for Perl-5; The Monastery Gates-2; Perl News-3; Inner Scriptorium-1; Seekers of Perl Wisdom-2; Meditations-4;
classreputationdivPerl Monks Discussion-4; The Monastery Gates-1; Perl Poetry-1; review reviews-1; Inner Scriptorium-6; Meditations-1; Craft-3; EX.note-1;
classsection_titletdPerl Monks Discussion-1; Cool Uses for Perl-1; pmdev task lister-1; The Monastery Gates-2; Perl Poetry-1; Obfuscated code-1; Code Catacombs-1; Snippets Section-1; review reviews-1; Perl News-1; Nodes to consider-1; Inner Scriptorium-1; Seekers of Perl Wisdom-1; Meditations-1; Craft-1; SQLQuery List-1; Quests-1;
classsection_titletrPerl Monks Discussion-1; Cool Uses for Perl-1; pmdev task lister-1; The Monastery Gates-2; Perl Poetry-1; Obfuscated code-1; Code Catacombs-1; Snippets Section-1; review reviews-1; Perl News-1; Nodes to consider-1; Inner Scriptorium-1; Seekers of Perl Wisdom-1; Meditations-1; Craft-1; SQLQuery List-1; Quests-1;
classsee-alsospanUser Settings-1; Signature Settings-1; Pmdev Settings-1; Timezone Settings-1; Nodelet Settings-1; Personal Nodelet Settings-1; Display Settings-1; RAT Style Settings-1; Free Nodelet Settings-1; Newest Nodes Settings-1; Message Settings-1;
classsplinkstableEX.scratchpad-1;
classspoilertdPerl Poetry-1;
classsuperdoch3many
classthis-patchtrEX.patch-1;
classtitlebaramany
classtitlebarinputmany
classtitlebartdmany
classtitlebartrmany
classtitlechoosertdmany
classtoggleaRecently Active Threads-112;
classtopnavmenufontmany
classtough-beansdivPermission Denied-1;
classtutlist-islistspanTutorials-27;
classtutlist-itemauthorspanEX.tutlist-7; Tutorials-249;
classtutlist-itemtypespanEX.tutlist-9; Tutorials-290;
classtutlist-seenspanTutorials-5;
classtutstringspanEX.tutlist-2;
classupdate-timespanSelected Best Nodes-1; showotherusers-1; Best Nodes-4; Worst Nodes-4;
classuser-pmdevtablePmdev Settings-1;
classuser-settingsdivPmdev Settings-1; Display Settings-1; RAT Style Settings-1; Free Nodelet Settings-1; Newest Nodes Settings-1; Message Settings-1;
classuser-settingstableUser Settings-2; Signature Settings-1; Display Settings-7; RAT Style Settings-1; Free Nodelet Settings-1; Newest Nodes Settings-1; Message Settings-2;
classvotedivEX.CUFP-1; Perl Monks Discussion-11; Cool Uses for Perl-15; EX.patch-1; The Monastery Gates-10; Perl Poetry-9; EX.poem-1; Obfuscated code-10; EX.poll-1; EX.CatQ-3; EX.CatA-1; EX.monkdiscuss-1; EX.bookreview-1; review reviews-14; EX.perlnews-1; EX.sourcecode-1; EX.snippet-1; EX.modulereview-1; EX.pmdevnote-1; Inner Scriptorium-4; EX.pmdevtopic-1; EX.offtopicroot-1; Seekers of Perl Wisdom-10; Meditations-14; Craft-7; SQLQuery List-28; EX.largedoc-1; EX.perlcraft-1; EX.perlmeditation-2; EX.perltutorial-1; EX.obfuscated-1;
classvotereptdPerl Monks Discussion-15; Cool Uses for Perl-15; The Monastery Gates-11; Perl Poetry-10; Obfuscated code-10; review reviews-15; Inner Scriptorium-10; Seekers of Perl Wisdom-10; Meditations-15; Craft-10; SQLQuery List-28;
classwarningh3You need a title, sucka!-1;
classwarningpDuplicate Post Warning-1;
classwikiupdatespanmany
attributevalueelement tagpages where used, and count
idApproval_NodeletdivEX.CUFP-1; EX.poem-1; EX.monkdiscuss-1; EX.bookreview-1; EX.perlnews-1; EX.sourcecode-1; EX.snippet-1; EX.modulereview-1; EX.offtopicroot-1; EX.note-1; EX.perlcraft-1; EX.perlmeditation-2; EX.perltutorial-1; EX.obfuscated-1;
idCabalists'_Nodeletdivmany
idFree_Nodeletdivmany
idMini_Super_Searchdivmany
idModeration_NodeletdivEX.CUFP-1; EX.poem-1; EX.monkdiscuss-1; EX.bookreview-1; EX.perlnews-1; EX.sourcecode-1; EX.snippet-1; EX.modulereview-1; EX.note-1; EX.perlcraft-1; EX.perlmeditation-2; EX.perltutorial-1; EX.obfuscated-1;
idPedagogues_Nodeletdivmany
idPmDev_Nodeletdivmany
idQandAEditors_Nodeletdivmany
idRTCBdivmany
idSearchdivmany
idSiteDocClan_nodeletdivmany
idThis_Nodedivmany
idUseful_Linksdivmany
idXP_Nodeletdivmany
idad_and_talkhtmlad_and_talk-1;
idcabal-link-000spanmany
idcabal-link-001spanmany
idcabal-link-002spanmany
idcabal-link-003spanmany
idcabal-link-004spanmany
idcabal-link-005spanmany
idcabal-link-006spanmany
idcodesearchinputmany
idcomplaintsdeptformRetrieving a forgotten username or password-1;
idconsideritinputEX.CUFP-1; EX.poem-1; EX.monkdiscuss-1; EX.bookreview-1; EX.perlnews-1; EX.sourcecode-1; EX.snippet-1; EX.modulereview-1; EX.offtopicroot-1; EX.note-1; EX.perlcraft-1; EX.perlmeditation-2; EX.perltutorial-1; EX.obfuscated-1;
idfooterdivmany
idhide_old_repliesinputmany
idmb2001titlebartdmany
idmonkbartablemany
idnodelet_containerdivmany
idnodethreadsdivRecently Active Threads-1;
idnodethreads-footdivRecently Active Threads-1;
idnodethreads-headdivRecently Active Threads-1;
idpage_urlamany
idpatchlisttableEX.nodelet-1; EX.patch-1; Patch Lister-1; EX.container-1; EX.maintenance-1; EX.htmlpage-1;
idsearch_textinputmany
idshowotherusershtmlshowotherusers-1;
idtitlebar-bottomtablemany
idtitlebar-toptablemany

Here's all the stuff that was skipped:

attributevalueelement tagpages where used, and count
size1selectUser Settings Statistics-1;
size10inputUser Settings-12; Login-1; Display Settings-3; Message Settings-2;
size100]inputignored users-1;
size12inputPerlmonks Newlinks-1;
size14selectNewest Nodes Settings-1;
size2inputmany
size20inputmany
size25inputcpan module search-1;
size3inputNew Perl Monks User Search-2; Keyword Search-2; Perl Monks User Search-2;
size3selectPatch Lister-3;
size30inputScratch Pad Viewer-1; Display Settings-2; Message Settings-8;
size32inputNot found-1; RAT Style Settings-1;
size4inputPersonal Nodelet Settings-1; Display Settings-1;
size40inputmany
size5inputNodelet Settings-66;
size50inputPmdev Settings-5; Display Settings-2; Theme Settings-1; add entries to vroom's book list-1;
size50]inputPmdev Settings-1;
size6inputPersonal Nodelet Settings-18; Snippet Size Viewer-1;
size60inputSuper Search-4;
size64inputPersonal Nodelet Settings-18;
size8inputThread Management Page-2;
size80inputSearch internal code-1; Retrieving a forgotten username or password-1; add entries to vroom's book list-1;
size9inputDump node fields-1; Call for a Recount-2;
size90inputmany
attributevalueelement tagpages where used, and count
stylecolor: white; background-color: gradienttdNode lister-many;
attributevalueelement tagpages where used, and count
classauth-NtrSelected Best Nodes-50; Best Nodes-50; Worst Nodes-50;
classitem-Nspanshowotherusers-26;
classitem-NtrSelected Best Nodes-50; Best Nodes-50; Worst Nodes-50;
classmsgfrom_Nspanprivatemessages-3;
classnnt-a div hr li p spanRecently Active Threads-many;
classnode-from-NtdNewest Nodes-516;
classnodetype-NaBig Pretty Nodelist-127;
classuser-NspanSaints in our Book-548; showotherusers-26;
classuser-level-Nspanshowotherusers-26;
attributevalueelement tagpages where used, and count
idconsider-row-idNtrNodes to consider-15;
idid-Nbodymany
idliNliRecently Active Threads-263;
idnnt-divRecently Active Threads-10;
idnnt-tableRecently Active Threads-1;
idpost-head-idNaPerl Monks Discussion-15; Cool Uses for Perl-15; The Monastery Gates-11; Perl Poetry-10; Obfuscated code-10; review reviews-15; Inner Scriptorium-10; Seekers of Perl Wisdom-10; Meditations-15; Craft-10; SQLQuery List-28;
idtitlebar-link-Nspanmany
idu-s-tableUser Settings-2; Signature Settings-1; Pmdev Settings-1; Display Settings-7; RAT Style Settings-1; Free Nodelet Settings-1; Newest Nodes Settings-1; Message Settings-1;
idul-ulRecently Active Threads-10;
idulNulRecently Active Threads-102;
PageReason
user variables brings in the content of Free Nodelet, etc.
Monastery Goats fullpage
User Settings2 brings in the content of Free Nodelet, etc.
note settings settings
Land of Monks and Honey fullpage
root's default themesettings themesettings
Awards document
strikefear rawpage
Red CSS css
fullpage chat fullpage
Editor Requests lists er's
All About Perl Quests document
chatterbox xml ticker xml generator
other users xml ticker xml generator
blankpage fullpage
Perl Monk's Best Users Has bgcolor gradient. Superseded by SIOB.
What section should I put this in? document
editor tools status document
phantasma-wiki contains user-entered arbitrary styles
paco's user image rawdata
notes tree notes tree. default page has some pre-standard sigs with hard-coded colors
Modular Pascal's Triangle Pascal's Triangle. Interactive; hard-coded colors.
New Chatterbox XML Ticker xml generator
Resource Index xml generator
send chatter fullpage
Yesterday's most-visited nodes error msg has hard-coded color from Ev/HTML
minipage chat fullpage
All Mouth and No Ears fullpage
Recently Active Threads Faqlet RAT Faqlet
chatterbox sidebar fullpage
Free Nodlet trouble one er. The ER Hobbit inserts his updates in red.
chatterbox sidebar upper fullpage
chatterbox sidebar lower fullpage
allocateVotes.pl script
cpan module feed xml generator
section_rss xml generator

"many" means more than 70, which is about a third of the approx. 210 total nodes.


settings from Themes:

These are image file names:
  • perlMonksTitleImg
  • pollImage
  • searchButtonImg
  • talkButtonImg

These are colors:

  • bodyBgColor
  • bodyLinkColor
  • bodyTextColor
  • bodyVlinkColor
  • titleBgColor

Note: clr_highlight is still being used in colorblend (which is used in RAT by way of handle_threaded_nodes and in Big Pretty Nodelist)... but it's harmless because colorblend generates a <style> section assigning color rules to classes; it does not hard-code colors.

Settings used in shownote:

  • shownoteTextBgColor - still used for background of main body of notes. Default is #FFF.
  • shownoteEndcolor - probably can't be elimated.
  • shownoteStartcolor - probably can't be elimated.
Patches for this already exist.
To add the rule to the relevant CSS files, apply: (Recall that CSS patches require manual sync to static files.)
Dark CSS already has the change.
Once those are done, patch shownote to remove the use of $textbgcolor.

In addition, shownote brings in the following from shownote settings:

  • startcolor
  • endcolor
  • textbgcolor
These are fallback defaults if the Theme doesn't set these settings (which of course No Theme doesn't).

vote settings has a bunch of html snippet crap:

upLabel <tt>++</tt> downLabel <tt>--</tt> nullLabel <tt>+=0</tt> showRepHeader <div class="reputation"><center><font size="1"> showRepFooter </font></center></div> voteHeader <div class="vote"><center> voteFooter </center></div>
These are all used in voteit, which is used in a lot of places.

Update: The above has been patched away. No more literal HTML in settings!


Other useful info:

ar0n's homenode

Petruchio's secret world

...as demerphq called it, because it's largely his creation, and he's been living in this view almost exclusively ever since.

He was hoping that it would be the basis for a new, cleaner Perlmonks.

How does it work?

The different look is achieved not simply through a different set of stylings.

When the PerlMonks engine renders a node, it does so through a set of templates (specifically, htmlpages and containers). Petruchio created a new set of such templates. Then he inserted a run-time check in certain key places, so that whenever the domain name in the URL begins with "css", the engine uses his new templates to generate the HTML rather than the standard templates.

No changes to index.pl (or any of the site's static engine code) were necessary.

Thread: Re: Hilighting Newest Nodes

1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567 1234567


Comment on Restyling PerlMonks
Select or Download Code

Log In?
Username:
Password:

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

How do I use this? | Other CB clients
Other Users?
Others romping around the Monastery: (15)
As of 2014-10-23 14:35 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    For retirement, I am banking on:










    Results (125 votes), past polls