Support :: Skinning Sites

Skinning Checklist

If you need to skin a web design that will be added to Lunasoft's selection of themes, you need to complete each item on this list prior to submission.

For the sake of simplicity, all references to "a color complimentary to the site", or highlight color, will be referred to as the "site color"

All of these items must be completed by coders prior to uploading a new skin to the skin manager:

Content

  • create a wide layout and a "wide full" layout
  • remove all video/text/image references to 3rd parties
  • ensure the skin uses the platform's version of jQuery and not an uploaded version
  • if a design has a form on it, ensure the form launches an email app by default (instead of doing nothing)
    • <form action="mailto:no-reply@somedomain.com" enctype="text/plain" method="post">
    • <button type="submit">Submit</button>
  • parallax or other background images must be editable through the admin
  • dynamic dropdowns work properly
  • use Twig format/upgrade skins to Twig
  • top of leftnav lines up with first item in content area
  • no left padding on leftnav ul's
  • login/logout links in the upper right corner
  • the logo image must link to the homepage (use token)
  • no map below the footer, the footer must always be the bottom of the site
  • social media icons are font awesome and not images
    • $(document).ready(function() {
                      $('.fa').each(function(){
                          var c = $(this).text();
                          $(this).html('');
                          $(this).addClass('fa-'+ c);
                      });
                  });
  • all content in the header and footer must be editable and within components (no content in the skin)
  • code must be semantic, with correct usage of headings

HTML/CSS

  • links (<a> tags) must be the site color and underlined on hover
  • list item bullets must be the site color and have proper spacing
  • <h1> must be a dark color complimentary to the site and not black
    • all other heading colors (h2,h3,h4,etc.) must be a shade of h1
  • class="responsive" must be added to the body tag
  • the "powered by luna" html in the footer must not display until the site is live.
    • {% if cms_twig.is_live() %} The luna link HTML {% endif %}
  • set region names
  • javascript is written so it allows for widgets to be duplicated without breaking
  • remove data id's from homepage widgets
  • search forms must function properly
    • Correct Form attributes: action="{{ site_root_proto() }}site-search.php" method="post"
    • Correct Input attributes: type="text" name="search"
    • When in doubt, you can inspect the form that is on the actual search page
  • header border shadow on any layout where the subpage doesnt have a separation
    • place an empty div at the top of the subpage skin segment
    • apply this css to the div: background: url("/uploads/site/1/skin/bgheadershadow.png") repeat-x left top; height: 7px; left: 0; position: absolute; right: 0; top: 190px; z-index: 99;

Styler Colors (not in this order, but rather in order from top to bottom of the homepage, with subpage items at the end):

  • Site (Highlight)
  • Banner
  • Text
  • Text Font
  • Links
  • Nav Text
  • Nav Active, Hover
  • Header and Footer Text
  • Bullets/Lines
  • H1
  • H2
  • Subpage Lefnav

Styler Palette (only one palette):

  • All Backgrounds
  • All Nav Items
  • Banner
  • Highlight
  • Text

Styler Options (for each item):

  • default color
  • #ffffff (white)
  • #000000 (black)
  • #666666 (charcoal)
  • #e4e4e4 (light gray)
  • primary logo color
  • secondary logo color

Creating a Demo

  • for the subpage demo, use one of the subpage templates we received from our designers
  • use images included in the design for the demo

Uploading a Completed Skin

The process for setting one of our skins in mhub is as follows:

  1. select"is skinned" to yes
  2. select the skin zip file in the "skin zip" upload field
  3. check the box for "detach from remote"
  4. download the thumb image and large image using the template monster urls, and then set the "Image Types" for those to "Uploaded" and then upload the respective ones there
  5. select demo type to "uploaded"
  6. set list date to today's date
  7. click save
  8. create a static demo using the final version skinned and then go back to the skin and upload it
  9. verify everything is correct

After that has been done, if you need to set one to advanced instead of premium, then these are the steps:

  1. change skin type to "Advanced"
  2. then change the price to $500, this may not always be the case, but for now this is what we are doing
  3. click save

Categories