We (mainly me because no-one else finds it very interesting) are cleaning up the html on this site. These are the changes made so far and some ideas. Comments welcome. The intention while fixing things is to try to avoid breaking them, and if stylesheets would break as a result of the changes, to give due notice so that authors can fix them in advance. Ideally we will get the site into a state in which a stylesheet that works for the front page will style the entire site acceptably. Some time soon I'll start documenting the resulting structure here, as well.
Change | Possible CSS response(s) | Notes |
---|
New id pagebody for, umm, the body of a page. Comes after #pageheader and before the stuff that still needs tidying up. The element it is on may vary depending on the page, but will probably always be form or div. | | So far only implemented on e2nodes and writeups and pages consisting only of a form. |
There are pop-up widgets about. They have class widget and default styling provided by basesheet. Their openers are anchors with class showwidget, and their closers are anchors with class showwidget hidewidget. If scripting is not available, these anchors are links. If it is, the openers acquire the additional class closed when they are closed and open when they are open. | | The default little triangles are matched to Kernel Blue colors. You may prefer to make your own. |
#pageheader usually includes an ul with class topic actions containing things you can do to an entire page. | You probably don't want this to look like a list... | ... so autofix will add rules to your stylesheet to make it look like the other stuff up there. |
Firmlinks, node creator, and 'is also a:' information, formerly in h2 elements with class topic is now in divs. Same class. | Waste less energy making them not look like headings. | |
New div with id pageheader after the page title. Contains any firmlinks, node creator, and 'is also a:' information. This also contains the bookmark, cool, favorite and weblog links that will be removed from the epicenter (also in a div class topic). | Whatever you want. | Make sure that the p with id weblogs currently in the epicenter has an opaque background, since it will turn into a pop-up widget when moved. |
New class action for links that do something rather than just going somewhere (bookmark, etc). | Whatever you want. | |
The div elements with class contentinfo also have class contentheader when before a content div and contentfooter when after it. | Simpler distinctions in styling in different contexts. | |
Nodelets have an id based on their name, not on their id. | | Use the autofix feature on the stylesheet edit page to adapt to this and many other changes. |
Consistent use of markup for title, type and author in Cream of the Cool, Frontpage News/Weblogs and New Writeups. | Style .title .author and .author once. | The autofix feature will cater for many of these changes. It will disable some rules in New Writeups by adding #DISABLED: you probably don't want them any more. |
New class item on div around writeups, Cream of the Cool and weblog/frontpage news items. Replaces .cotc_item, .wl_item and .writeup. | Use for consistent rendering of all content, or use .writeuppage .item, #creamofthecool .item, .weblog .item if you want them different. | Autofixed. Eventually to be applied to all wrappers around contentinfo and content. |
Replaced nodelet_xxx ids with user-friendly ids. | #nodelettitlelowercasenospaces | autofixed. |
rootbeer277 is working on a new improved chatbox with a lot of fun new markup. | Read this | |
Most single-celled tables (to confine the effects of bad mark-up) have been removed. The rest will follow. | Don't style these tables. | |
Class writeupmeta has been replaced with contentinfo in the New Writeups nodelet | .nodelet .contentinfo | |
Id newWriteupsMore removed from more link in New Writeups | .nodelet .morelink or #newwriteups .morelink | |
New div with class weblog around weblogs wherever they are. | You can style weblogs and their content differently from any other content if you really want to. | |
'Namespaced' classes on front page removed. | Replace references to .cotc_... .wl_... weblog_... | Autofix. |
morelink class applied to link(s) at bottom of frontpage news/weblogs. | Style .morelinks (or .weblog .morelinks if it really has to be different). | |
The single-cell tables in Cream of the Cool and around writeups are gone. | If you did anything with these, you'll need to do it to #creamofthecool .content or .writeup .content instead. | To style tables with no risk of breaking the leftover ones still used for layout, use '.content table', '.content td', etc. |
New class contentinfo for containers of information about content. So far added to writeup headers and footers, Cream of the Cool entries, Front Page News/weblogs, New Writeups and the 'Logs' nodelet. | In the end, this will make it possible to style all content info/headers consistently at once. | |
The #writeup_list id in New Writeups and #log_list id in the Logs nodelet have been replaced with a new class infolist | If you really want them done differently from each other, select with the nodelet id. | |
title and author classes added to titles and authors in writeup headers, Cream of the Cool and Front Page News/weblogs. | If your styling of these classes for New Writeups makes this look wrong, change it to .nodelet .title/.nodelet .author. | |
type class added to writeup types in writeups and Cream of the Cool. | (ditto)... .nodelet .type | |
New class date. So far on dates on writeups and Front Page News/weblog items. In the end on all dates/timestamps. | | |
The frontpage id has moved from a redundant div inside #mainbody to the body element of the page. | If this breaks anything on the front page, replacing #frontpage with #frontpage #mainbody will repair it. | |
The nodetype_xxx classes on the body element have been replaced by more user-friendly classes using the name of the nodetype not its number. | Use these to adjust styling for different kinds of page, as desired. | Autofix. |
The body element of superdocs has an id based on the node name. | Style different superdocs differently, as desired. | The node_idxxx classes will also be removed when the auto stylesheet fixer is available. |
New class content to mark user-submitted content. | Use it to style writeup text, cream of the cool content, weblog content, front page news content, usergroup weblogs, scratchpad content, homenode content and discussion contributions consistently without using zillions of selectors. | |
Staff Picks, Cool User Picks, Random Nodes and the list in the Personal Links nodelet are marked up as ul with class linklist. | .linklist , .linklist li { display: block ; padding 0 ; margin: 0 ; } will get rid of all bullets and indents. Adjust padding and margins to your own taste. | I intend to submit patches to turn more nodelets into lists with the same class (Personal Links; Other Users, ...). This CSS would keep them looking the same as at before. |
New editlink class on 'edit' links and similar, such as the two at the bottom of the Personal Links nodelet. | You might want these similar to morelink (below). Or you might not. | |
The Log links on the front page have the same structure as Staff Picks and Cool User Picks, including a heading. | Add #loglinks h3 , anywhere you now have #cooluserpicks h3. Do the .linklist styling mentioned above. | Maybe the front page nodelet headings and ordinary nodelet headings should all be marked up the same? |
Staff Picks has a 'more' link at the bottom, like Cool User Picks. It has the class morelink, as does the one in CUP and the one at the bottom of the New Writeups nodelet | Whatever you did to .cup_more, do it to .morelink | cup_more has now been removed.. |
The div with id zenthinoutline and class thinoutline has been removed. | It was a waste of space anyway. | |
Suggested/Pending/Possible Changes
|
Mark up the headings on front-page nodelets and other nodelets with the same tag. | | h2 or h3? |
Add a shared class box to sidebar nodelets and the front-page nodelets. | Ignore it, or use it to make them all look the same in one swell foop. | |
I suggest you take these out of your stylesheets at your convenience since they are superfluous and should be removed at some unspecified time in the future: