Boxes
Updated Status Page/Item Name Utilized when... HTML/CSS NOTES
2/01/07 in progress All boxes (except dashboard)

box
as of now, this class, by iteself, is not being utilized

box-box-info

box box-usage

box box-1col
<div class="box box-1col">

box box-1col-short
<div class="box box-1col-short">

box box-2col
used to make a 2 column layout in the main content area

box box-2col-short
used to make a 2 column layout in the main content area. This appears when it is known that there will not be a lot of content

box box-3col
used to make a 3 column layout in the main content area

actions boxes

  • box box-purchase
  • box box-activate
  • box box-upgrade

 


  
9/21/06

*updated 11/27/06		  

dashboard boxes

    

Buttons
Updated Status Page/Item Name Utilized when... HTML/NOTES
   

innitate immediate action

 

 

filling out form

ex) save
update, create email address

class="button-submit"
   

starts an action or process

link followed by ellipse...

ex) edit...
create email address		  
    search-results
this class is given to inputs select buttons withing a search-results table  
   

actions table

    
   
  • preferences section gets no cancel button because the user has nowhere to go
  • spam and virus black and white for domain mailbox
  • drn register domain contact info

 

    
8/23/06   button-container
 All buttons are placed in a div

just button container

<div class="button-container ">
<input class="button-submit" value="Update Now" type="submit">
<input class="button-cancel" name="mod_Q_Q_cancel" value="Cancel and Go Back" type="submit"> </div>
</form>
</div>

 
8/23/06   button-container button-container-form-align

 buttons which will align for forms

<div class="button-container button-container-form-align">
<input class="button-submit" value="Update Now" type="submit">
<input class="button-cancel" name="mod_Q_Q_cancel" value="Cancel and Go Back" type="submit"> </div>
</form>
</div>

 
8/23/06   button-container button-container-readonly
 buttons for read only info which is laved out in a table

<div class="button-container button-container-readonly">
<input class="button-submit" value="Update Now" type="submit">
<input class="button-cancel" name="mod_Q_Q_cancel" value="Cancel and Go Back" type="submit"> </div>
</form>
</div>

 
9/20/06  

button-container button-container-box

 

 buttons which go inside of box  

Currently Managing

Updated Status Page/Item Name Utilized when... HTML/NOTES
11/22/06 in progress

Currently Managing

allows the users to select the domain or product they wish to manage <div class="currently-managing">
Currently Managing:
<select name="cseeplus_sin" class="submit-onchange-trigger">
<option value="howdy5rdI5jpObGHIJ8EBr5nXpWZzp" selected="selected">howdy5.hwng</option>
<option value="howdy5p5xTgaSVExLkuhaKEuh38FGw">howdy5-2.hwng</option>
</select>
<input class="button-submit js-totally-hidden" name="go" value="Go" type="submit" />
</div>
11/22/06 in progress

Currently Managing Readonly

 

 This appears after a user has selected a product to manage and has alreay begun an action on it.

This also serves as a secondary form of navigation		 <div class="currently-managing-readonly"> Currently Managing: bngtest8.hwng </div>

FRAMESEt
10/26/06 in progress view frameset    

FORMS
12/13/06 ready

View explanation of new forms

 

 

    
12/13/06 ready

SSL: Purchase GeoTrust Quick SSL

(for domains hosted with Hostway)  
12/13/06 ready SSL: Purchase GeoTrust Quick SSL
(for domains hosted externally)  
   

Site Control Account Information

    
   

Create Ticket

    
   

Create Streaming Media FTP Account

    
   

Edit Customer Contact (errorless)

    
   

Edit Whois Protector

    
   

Form with errors

    
    Forms with a subsection    

HELP/More Info

Updated Status Page/Item Name Utilized when... HTML/NOTES
12/15/06 in progress Contextual help
occurs on the SSL Which a user clicks on help
a <div> tag will appea and create an explanation belwow. To close this <div> the user will simply have to click on the help again.
12/15/06 in progress

Text Teasers

 occurs on the DNS Hosted section in the notes section when the user clicks "these important points". The page will display a note which requires the users to view important information. Since the the description of these poitn is so long, where are using an anchor tag to take the users to the bottom of the page, where the items can be explained further

MESSAGES
Updated Status Page/Item Name Utilized when... HTML/NOTES
2/22/07 ready

Notification Messages
(Listing of all messages)

  • Authorization (formerly called Preconfirmation)
    contains 2 examples
  • Pending
    contains 4 examples
  • Error
    displayed when something goes wrong on a page
 

 

Notes
Updated Status Page/Item Name Utilized when... HTML/NOTES
8/17/06 ready View "Note" example in Edit Whois Proctector  

<div class="note"><strong>Note:</strong> * = Required field <span class="error">*</span> = Something went wrong </p></div>

 

Deletion Process

9/27/06 ready

Preconfirmation when deleting data

 

    
9/27/06 ready

Deletion when deletion data

 

    
9/27/06 ready

Preconfirmation when deleting something that costs money

 The user should only see the Deletion PreConfirmation page if the product they are deleting has monetary value and/or they are trying to delete a product and don't have javascript enabled.  
9/27/06 ready

Deletion when deletion something which costs money

   
11/09/06 in progress

Plan Deletion
- authorization
- confirmation

   
11/09/06 in progress

Product Deletion
- authorization
- confirmation

    

Date Selector

 

in progress

 

Date Selector    

TABLES
Updated Status Page/Item Name Utilized when... HTML/NOTES
11/21/06 in progress

Listing of all tables

* when I can, I will link up all of the examples.

   
    in a box    
    default table style   table {
border-spacing: 0;
margin: 0 0 1em 0;
font-size: 1em;
empty-cells: show;
}
   

Table Container

 

Only the following tables will receive table-container tag:

  • table info
  • search results
  • transactions
 
    table.readonly
    
    table.actions   div.table-actions {
clear: both;
background: url(../images/background-table-actions.gif) top left repeat;
background-color: #a5a5a5;
margin: 0px;
padding: 7px;
}
    table.pagination  

table.pagination {}

 
    Search Results  

table.search-results {
border-bottom: 1px solid #a4a4a4;
width: 100%;
margin-bottom: .2em;
margin-top:0;
margin-bottom: .2em;
}

 
   

table info

Make sure all table-info have:

  • <DIV class="table-container">
  • <h2></h2>
  • <TABLE class="table-info">
  • <caption class="hidden"></caption>
  • First td:
    <td class="fixedwidth label"></td>
  • Second td
    <td class="value"></td>

 

  

table-info {
margin-bottom: .2em;
margin-top:0;
margin-bottom: .2em;
margin-top:1.5em;
}

 
    table.transactions

  table.transactions {
width: 100%;
margin-bottom: .2em;
margin-top:0;
margin-bottom: .2em;
margin-top:1.5em; }
11/29/06  

Plan Comparison

upgrade_downgrade/plan_comparison.html

    

Upgrade/Downgrade

12/05/06 in progress

index
this page explains various scenerios

 

 

My Account

Updated Status Page/Item Name Utilized when... HTML/NOTES
9/28/06 in progress

Edit Payment Options

View and/or set your default payment method on this page. When setting your default payment, you can either choose from "pay with an exisitng card", "paying with a new card", or pay with a check. Please select one of the options below.

 
9/7/06 in progress


Orders & Transactions

 

  

 
9/7/06 in progress

Login page