Difference between revisions of "Dream Garden layout"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) m (→Footer) |
Foxfirefey (Talk | contribs) |
||
Line 136: | Line 136: | ||
<div class="comment-poster-ip"></div> | <div class="comment-poster-ip"></div> | ||
</div><!-- END CLASS comment-poster --> | </div><!-- END CLASS comment-poster --> | ||
+ | <div class="comment-status"> | ||
+ | <!-- Contains all the screen, delete, etc. --> | ||
+ | </div><!-- END CLASS comment-status --> | ||
</div> | </div> | ||
<div class="comment-content"> | <div class="comment-content"> | ||
</div><!-- END CLASS comment-content --> | </div><!-- END CLASS comment-content --> | ||
− | <div class="comment- | + | <div class="comment-threads"> |
− | </div><!-- END CLASS comment- | + | <!-- Contains reply, thread, expand --> |
+ | </div><!-- END CLASS comment-threads --> | ||
<div class="comment comment-evenlevel"> | <div class="comment comment-evenlevel"> | ||
... | ... | ||
Line 148: | Line 152: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <div class="comment-select-actions"></div> | ||
</div> | </div> | ||
</source> | </source> | ||
Line 184: | Line 189: | ||
* Design credits? | * Design credits? | ||
* Fun quote or saying? | * Fun quote or saying? | ||
+ | * When the page was loaded for the viewer (like in Smooth Sailing)? | ||
<source lang="html4strict"> | <source lang="html4strict"> |
Revision as of 19:56, 22 June 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
- main -- contains the content and sidebar(s)
- content -- contains content, whether entries or other
- top-pagination -- pagination before entries
- entries -- contains all the entries
- bottom-pagination -- pagination after entries
- sidebar -- sidebar...thingies
- content -- contains content, whether entries or other
- footer -- what goes here anyway?
Header
<div id="header"> <div id="titles"> <h1 id="maintitle"></h1><!-- journal main title --> <h2 id="subtitle"></h2><!-- journal subtitle --> <h2 id="pagetitle"></h2><!-- 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="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> </ul> </div><!-- END CLASS journal-nav --> </div><!-- END CLASS header -->
Content and Sidebar
<div id="main"> <div id="content"> CONTAINS CONTENT, WHETHER ENTRIES OR OTHER </div><!-- END CLASS content --> <div id="sidebar"> SEE SIDEBAR PSUEDOCODE </div><!-- END CLASS sidebar -->
Entries
Can be used for the recent post page, the reading page, and day views.
Possible entry classes:
- latest-entry
- guestbook-entry
<div id="top-pagination" 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="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="bottom-pagination" 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-actions"></div> </div>
Archive
Tags
Sidebar
NOTE: Need to rename this, this will not always be to the side.
Possible sidebar-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="sidebar"> <div class="sidebar-box"> <h3 class="sidebar-box-title"></h3> <div class="sidebar-box-contents"></div> </div><!-- END CLASS sidebar-box --> </div><!-- END CLASS sidebar -->
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 -->