Hudson, Ink
Tuesday, December 10, 2019

Style Guide and Other Info

Table of Contents:
 
 
---- Helpful Links ----
Portal site order form:
 
Login page for managing reseller site (57068 - where design is managed including CSS file and all template images):
/Validate.asp  (use lissa@hudsonink.com as username)
 
Login page for managing portal sites:
https://control.websrvcs.com (use hudsonink as username)
- 57727 is the Hudson Ink demo portal site (where all of the content panels and article images are managed) – can be viewed at http://portal.hudsonink.com
 
 
 
---- Other Info ----
Maximum image dimensions:
  • Company logo - can be up to 240px (w) by 130px (h) (should be named logo.jpg and uploaded to the customer's portal site My Files area in order to automatically populate appropriate places)
  • Home page columns (content top, content bottom, and right column panel placement areas) - 452px (w)
  • Home & Organizing page content header - 932px (w)
  • Home & Organizing left column - 541px (w)
  • Home & Organizing right column - 355px (w)
  • Money-Saving Tips left column - 355px (w)
  • Money-Saving Tips right column - 541px (w)
  • Health & Food left column - 355px (w)
  • Health & Food right column -  541px (w)
 
 
---- Setup Steps For New Portal Sites ----
  1. Gather customer details, logo.jpg and qr.jpg files and any other custom content needed
  2. Order customer portal site using form at /Order.asp?id=57068&pkg=269
  3. Login to portal site management area at https://control.websrvcs.com (use hudsonink as username)
    • Enter portal demo site ID number (57727) into box and search
    • Click on site ID number in search results
    • Click on Control Panel tab to log in to portal demo site
      1. Click the Panels manager icon to open it
        • Click the Add New Panel icon
          1. Create Customer Info panel
          2. Click the Save icon in the upper right corner
          3. Close the browser/tab window and return to the main Reseller Control Panel client search area from step 3
    • Enter new customer portal site ID number into box and search
    • Click on site ID number in search results
    • Click on Control Panel tab to log in to portal site
  4. ***If the customer is an Electrical or Plumbing customer, click the Design manager icon to open it, select the Default Design tab, click Search, click the title of the Electrical & Plumbing design, click the Save icon in the upper right corner, confirm the change, hover over the design icon in the upper left corner, continue to Panels manager.
  5. ***If the customer needs any custom panels (rare), click the Panels manager icon to open it
    • Click the Add New Panel icon
      1. Create appropriate custom panel
      2. Click the Save icon in the upper right corner
      3. Click the Add Record icon (green plus sign) to the right of the Title box
      4. Repeat steps 1-3 for remaining custom panels
  6. Click the Pages manager icon to open it
  7. Click the My Files icon in the upper right corner
    • Click Upload Files
    • Select the appropriate logo.jpg and qr.jpg files from your computer and click "Open"
    • Click the Exit icon in the upper right corner of the My Files window
  8. Click the Home Page Settings tab
    • Fill in the appropriate details and delete the default content below the editor toolbar
    • Click the Panels tab
      1. Click the Search Community Content button
      2. Select the appropriate home panel by clicking its title
      3. Click "Add to Site"
      4. Locate Panels window (may have gone behind main browser window)
      5. Select Display Position (noted in panel title)
      6. Click Save icon in upper right corner of Panels window
      7. Click Panel name to change order if necessary
      8. Repeat steps 1-7 for remaining panels
        • For custom panels, select the panel name from the top drop-down in place of steps 1-4, then repeat steps 5-7
      9. Click Exit icon in upper right corner of Panels window
    • Click Exit icon in upper right corner of Home page to exit back to Pages manager
  9. Click the Default Panels tab
    1. Click the Search Community Content button
    2. Select the appropriate default panel by clicking its title
    3. Click "Add to Site"
    4. Locate Panels window (may have gone behind main browser window)
    5. Select Display Position (noted in panel title)
    6. Click Save icon in upper right corner of Default Panels window
    7. Click Panel name to change display order if necessary
    8. Repeat steps 1-7 for remaining panels
      • For custom panels, select the panel name from the top drop-down in place of steps 1-4, then repeat steps 5-7
    9. Click Exit icon in upper right corner of Default Panels window
  10. Click the SEO Settings tab
    • Fill in the appropriate details in the Search Description box
    • Click the Save icon in the upper right corner
    • Click the Exit icon in the upper right corner to exit back to Pages manager
  11. Click the first page in the Page list to open it
    • Click the Panels tab
      1. Click the Search Community Content button
      2. Select the appropriate page panel by clicking its title
      3. Click "Add to Site"
      4. Locate Panels window (may have gone behind main browser window)
      5. Select "Content-Top" Display Position
      6. Click Save icon in upper right corner of Panels window
      7. Click Exit icon in upper right corner of Panels window
    • Click Save icon in upper right corner
    • Click Exit icon in upper right corner to exit back to Pages manager
  12. Repeat step 11 for remaining pages
  13. You're done, whew!
 
 
---- Style Guide ----

---- Misc. Classes ----

.medAccent
 
.ltAccent - (displayed here on dark background for easier reading)
 
.dkAccent
 
.bgSeasonal
 
.white, .bgDark
 
.double - Double spaced text line height (1.7em)
Nam ipsum dui, fringilla vel luctus eget, consequat eget est. Phasellus non blandit risus. Nullam pulvinar laoreet velit, vitae blandit diam facilisis eget.
 
.dropShadow - adds a dark gray box shadow offset to the bottom right corner (can be used on anything - textboxes, images, tables, etc.)
 
.right - floats the item to the right with a left margin of 16px
.left - floats the item to the left with a right margin of 16px
.clear - clears all floats
 
.hidden - hides an element
 
.pad - adds padding of: 4px (top and bottom) and 16px (left and right)
 
.pad10 - adds padding of 10px
 
.pad20 - adds padding of 20px
 
.mBottom - adds bottom margin of 20px
 
.lJustify - sets text justification to left
 
.noPad - removes all padding from an item
 
.noMargin - removes all margin from an item
 
.smallText - sets text size to 11px
 

---- Content Box Styles ----

All boxes have initial padding  of 20px and a bottom margin of 20px

.whiteBox
.dkAccentBox
.ltAccentBox
.dkNeutralBox
.ltNeutralBox
.narrow - sets padding values to 16px

---- Other Styles ----

h1

h2

h3

h4

h5
h6