Difference between revisions of "Dream Garden layout"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) |
Foxfirefey (Talk | contribs) m (→Entries) |
||
Line 69: | Line 69: | ||
<div class="entry"> | <div class="entry"> | ||
<div class="entry-label"> | <div class="entry-label"> | ||
+ | <div class="entry-filter"><!-- Security icons/text goes here --></div> | ||
<div class="entry-title"></div> | <div class="entry-title"></div> | ||
<div class="entry-date"></div> | <div class="entry-date"></div> | ||
Line 90: | Line 91: | ||
</div><!-- END CLASS entry-tags --> | </div><!-- END CLASS entry-tags --> | ||
<div class="entry-actions"> | <div class="entry-actions"> | ||
+ | <!-- NOTE: Which of these actions will be relevant? --> | ||
<ul> | <ul> | ||
+ | <li class="numcomments-entry"></li> | ||
+ | <li class="comment-entry"></li> | ||
+ | <li class="link-entry"></li> | ||
<li class="edit-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> | </ul> | ||
</div><!-- END CLASS entry-actions --> | </div><!-- END CLASS entry-actions --> |
Revision as of 06:43, 20 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> <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-title"></div> <div class="entry-date"></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><!-- 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 -->
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"> <div class="sidebar-box-contents"></div> </div><!-- END CLASS sidebar-box --> </div><!-- END CLASS sidebar -->
<div id="footer"> WHAT GOES HERE ANYWAY? </div>