Difference between revisions of "Dream Garden layout"

From Dreamwidth Notes
Jump to: navigation, search
m (→‎Entry/Comments)
Line 13: Line 13:
 
*** content-main -- contains all the entries
 
*** content-main -- contains all the entries
 
*** content-footer -- pagination after entries
 
*** content-footer -- pagination after entries
−
** sidebar -- sidebar...thingies
+
** modules -- contains modules, usually to the side
 
* footer -- what goes here anyway?
 
* footer -- what goes here anyway?
  
Line 43: Line 43:
 
<div id="main">
 
<div id="main">
 
   <div id="content">
 
   <div id="content">
−
     CONTAINS CONTENT, WHETHER ENTRIES OR OTHER
+
     <!-- CONTAINS CONTENT, WHETHER ENTRIES OR OTHER -->
 
   </div><!-- END CLASS content -->
 
   </div><!-- END CLASS content -->
−
   <div id="sidebar">
+
   <div id="modules">
−
     SEE SIDEBAR PSUEDOCODE
+
     <!-- SEE MODULES PSUEDOCODE -->
−
   </div><!-- END CLASS sidebar -->
+
   </div><!-- END CLASS modules -->
 
</source>
 
</source>
  
Line 160: Line 160:
 
=== Tags ===
 
=== Tags ===
  
−
=== Sidebar ===
+
=== Modules ===
  
−
NOTE: Need to rename this, this will not always be to the side.
+
Possible module-box additional classes:  
−
 
+
−
Possible sidebar-box additional classes:  
+
  
 
* calendar
 
* calendar
Line 175: Line 173:
  
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<div id="sidebar">
+
<div id="modules">
−
   <div class="sidebar-box">
+
   <div class="modbox">
−
     <h3 class="sidebar-box-title"></h3>
+
     <h3 class="modbox-title"></h3>
−
     <div class="sidebar-box-contents"></div>
+
     <div class="modbox-contents"></div>
−
   </div><!-- END CLASS sidebar-box -->
+
   </div><!-- END CLASS modbox -->
−
</div><!-- END CLASS sidebar -->
+
</div><!-- END CLASS modules -->
 
</source>
 
</source>
  

Revision as of 22:16, 22 June 2008

Designing the HTML CSS ids/classes for a very customizable CSS layout.

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
      • content-header -- pagination before entries
      • content-main -- contains all the entries
      • content-footer -- pagination after entries
    • modules -- contains modules, usually to the side
  • 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="modules">
     <!-- SEE MODULES PSUEDOCODE -->
  </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 -->

Footer

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 -->
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=Dream_Garden_layout&oldid=34"