SureFire Studios, Inc.

mojoPortal Admin Styles

I find keeping the design consistent on the admin pages challenging because of the variations in the code structure across the various admin pages.

Below, I've highlighted the 4 different layouts found. Each example has screenshots and corresponding HTML to help explain the differences. My preference would be that all the Site Settings Admin pages would use theis the structure depicted in Layout A.

 Layout A

 I find this structure the most useful and intuitive. The Admin breadcrumb is outside of the PanelWrapper DIV which contains a fieldset, legend, and fields.

<div class="breadcrumbs">
    Admininistration Menu > Site List 
       > Site Settings
</div>

<div class="panelwrapper">
   <div class="modulecontent">
      <fieldset>
         <legend>
             ABC Company Site Settings
         </legend>
            ... fields / content ...
      </fieldset>
   </div>
</div> 
 Site Settings

 Layout B

 This layout is similar, but the module title is an h2 (or h3) tag instead of a legend, since a fieldset is not used. It would be possible, to re-create the look of Layout A without the fieldset and legend, but there would need to be a class to access the div that encloses the h2 tag.

<div class="breadcrumbs">
Administration Menu
 </div>
<div class="panelwrapper">
      <div class="modulecontent">
         <h2 class=" moduletitle ">
           Member List
         </h2>
         <div> ... content ...</div>
      </div>
</div> 

 File Manager

Member List

Newsletters 

Layout C

This layout uses a fieldset, but the breadcrumbs have replaced the title tag.

<div class="panelwrapper">
   <div class="modulecontent">
      <fieldset class="moduleadmin">
          <legend> ... breadcrumbs </legend>
           <div class="settingrow"> ... </div>
           <div class="settingrow"> ... </div>
      </fieldset>
   </div>
</div> 

 Feature Installation

Role Administration

Add/Edit Pages

Layout D

This layout is similar to Layout B, but there is no css class available to wrap the title and content to replicate Layout A.

<div class="breadcrumbs">
   Administration Menu > Site List 
       > Permissions
 </div>

<div class="panelwrapper">
        <h2 class="moduletitle">
               Permissions
        </h2>
        <div>
               ... content ...
        </div>
</div> 
 

 Permissions

Site List

 

Rate this Content 1 Votes