Difference between revisions of "Dream Garden layout"
From Dreamwidth Notes
(→Content and Modules: Correcting spelling.) |
|||
Line 198: | Line 198: | ||
</div><!-- END CLASS footer --> | </div><!-- END CLASS footer --> | ||
</source> | </source> | ||
+ | |||
+ | [[Category: Development]] |
Revision as of 17:46, 13 September 2008
Designing the HTML CSS ids/classes for a very customizable CSS layout.
Contents
Pseudo-HTML
List of ID classes
- header -- top of the page
- titles -- contains page titles
- journal-nav -- contains menu navigation for the journal
- body -- contains the content and sidebar(s)
- content -- contains content, whether entries or other
- content-header -- pagination before entries
- content-main -- contains all the entries
- content-footer -- pagination after entries
- modules -- contains modules, usually to the side
- content -- contains content, whether entries or other
- footer -- what goes here anyway?
Header
<div id="header"> <div id="titles"> <div id="maintitle"><h1>TITLE</h1></div><!-- journal main title --> <div id="subtitle"><h2>SUBTITLE</h2></div><!-- journal subtitle --> <div id="pagetitle"><h2>PAGETITLE</h2></div><!-- title of the page we are viewing --> </div><!-- END CLASS title --> <div id="journal-nav"> <ul> <!-- Should these be IDs or classes? Can we expect more than one? --> <li id="profile-nav">PROFILE</li> <li id="recent-nav" class="active">RECENT</li> <li id="read-nav">READING</li> <li id="archive-nav">ARCHIVE</li> <li id="tag-nav">TAG PAGE? OR SHOULD THIS BE IN SIDEBAR WITH TAGS?</li> <li id="website-nav">WEBSITE</li> <li id="bookmark-nav">BOOKMARKS</li> <li id="gallery-nav">GALLERY</li> <li id="guestbook-nav">GUESTBOOK</li> </ul> </div><!-- END CLASS journal-nav --> </div><!-- END CLASS header -->
Content and Modules
<div id="body"> <div id="content"> <!-- CONTAINS CONTENT, WHETHER ENTRIES OR OTHER --> </div><!-- END CLASS content --> <div id="modules"> <!-- SEE MODULES PSEUDOCODE --> </div><!-- END CLASS modules -->
Entries
Can be used for the recent post page, the reading page, and day views.
Possible entry classes:
- latest-entry
- guestbook-entry
<div id="content-header" class="pagination"> <ul> <li class="page-back">BACK</li> <li class="to-bottom">BOTTOM</li> <li class="page-forward">FORWARD</li> </ul> </div><!-- END CLASS top-pagination --> <div id="content-main" class="entries"> <div class="entry"> <div class="entry-label"> <div class="entry-filter"><!-- Security icons/text goes here --></div> <div class="entry-date"></div> <div class="entry-subject"></div> <div class="entry-groups"></div> </div><!-- END CLASS entry-label --> <div class="entry-poster"> <div class-"entry-poster-info"> <div class="entry-poster-icon"></div> <div class="entry-poster-name"></div> </div><!-- END CLASS entry-poster-info --> <div class="entry-comm-info"> <div class="entry-comm-icon"></div> <div class="entry-comm-name"></div> </div><!-- END CLASS entry-comm-info --> </div><!-- END CLASS entry-poster --> <div class="entry-content"> ENTRY CONTENT GOES HERE </div><!-- END CLASS entry-content --> <div class="entry-meta"> </div><!-- END CLASS entry-meta --> <div class="entry-tags"> </div><!-- END CLASS entry-tags --> <div class="entry-actions"> <!-- NOTE: Which of these actions will be relevant? --> <ul> <li class="numcomments-entry"></li> <li class="comment-entry"></li> <li class="link-entry"></li> <li class="edit-entry"></li> <li class="tag-entry"></li> <li class="bookmark-entry"></li> <li class="track-entry"></li> <li class="tell-entry"></li> <li class="flag-entry"></li> </ul> </div><!-- END CLASS entry-actions --> </div><!-- END CLASS entry --> <div class="entry-separator"></div><!-- for usefulness --> </div><!-- END CLASS entries --> <div id="content-footer" class="pagination"> <ul> <li class="page-back">BACK</li> <li class="to-top">TOP</li> <li class="page-forward">FORWARD</li> </ul> </div><!-- END CLASS bottom-pagination -->
Entry/Comments
<div class="single-entry"> <div class="entry"> <!-- see above --> </div> </div><!-- END CLASS single-entry --> <div class="entry-comments"> <div class="comment comment-toplevel"> <div class="comment-info"> <div class="comment-subject"></div> <div class="comment-date"></div> <div class="comment-poster"> <div class="comment-poster-icon"></div> <div class="comment-poster-name"></div> <div class="comment-poster-ip"></div> </div><!-- END CLASS comment-poster --> <div class="comment-status"> <!-- Contains all the screen, delete, etc. --> </div><!-- END CLASS comment-status --> </div> <div class="comment-content"> </div><!-- END CLASS comment-content --> <div class="comment-threads"> <!-- Contains reply, thread, expand --> </div><!-- END CLASS comment-threads --> <div class="comment comment-evenlevel"> ... <div class="comment comment-oddlevel"> ... </div> </div> </div> <div class="comment-select-links"></div> </div>
Archive
Tags
Modules
Possible module-box additional classes:
- calendar
- free-text
- link-list
- tag-box
- first-sidebox (since some browsers do not do selectors well)
- last-sidebox
- middle-sidebox
<div id="modules"> <div class="modbox"> <h3 class="modbox-title"></h3> <div class="modbox-contents"></div> </div><!-- END CLASS modbox --> </div><!-- END CLASS modules -->
What to put here?
- Design credits?
- Fun quote or saying?
- When the page was loaded for the viewer (like in Smooth Sailing)?
<div id="footer"> WHAT GOES HERE ANYWAY? </div><!-- END CLASS footer -->