Support :: Skinning Sites

Skin a site to the Lunasoft Platform

Developer's Manual & Videos: D:\Dropbox (Lunawebs)\developers\skinning-manual
Skinning Checklist (QC) here
Other important info here
Customizing a skin - here
Create a favicon - here

Code requirements to skin

  1. Semantic Code
    The code should be semantic, meaning that if there needs to be a heading display it should not use <span class="heading"> it should use a <h2> or <h1> ( likewise if something is a list, it should be a <ul> or <ol> and not a set of <div> ). This is important primarily for the areas that the client will be able to edit. The client edits their pages using the wysiwyg editor ( tinymce ). The client is not html savvy, however they are trained how to use the tinymce features for lists, headings, paragraphs, etc. The client must not be forced into html mode to edit their content. If we used <span class="heading">, the client would not be able to reproduce that style without going into html mode.
  2. Jquery/js framework usage
    We only allow jquery ( or libraries compatible with loading alongside jquery ) for the javascript framework. The skin/code must use the version provided from the platform. The platform uses jquery for many software functions and will include it automatically when needed/not included already. So if you were to load your own version of jquery, it would directly conflict with what the platform loads ( see FAQ below for information on how to load jquery correctly when you skin ).
  3. CSS Resets
    It is recommended that you do not use css resets with your code. If you must use a reset, load it before the global stylesheet is loaded in your skin. You will also need to make sure that you have added styles for the common elements that the user will create from the editor ( tags like ul, ol, li, h1, h2, h3, h4, p, strong, a, td, th, table, etc ). For example, if you reset the padding of all paragraphs to zero, and the client then puts in two paragraphs right next to each other in the editor, they will snug up against each other ( which would not look correct ). Or if you force all table cells to zero padding, areas that use tables ( such as the shopping cart checkout ) will not look correct. If you have to use a reset, be very mindful of what you are doing and the potential ramifications.

General Information

Skins are compartmentalized into skin segments ( header, footer, home, sub, and primary stylesheet ). Any additional files ( js, fonts, images, etc ) are uploaded to skin files in a flat folder ( no sub directories, for platform management purposes ).

To access the skin editor, go into the admin of the website, then go to Pages -> Settings -> Skin Editor. For any references to location in the following steps, they will all originate from this area.

Steps to skinning a site

  1. Upload images, js files ( but not jquery ), and any other relevant files to Skin Files -> Upload Files. There are no sub directories for skin files ( for platform management purposes ), so all files are uploaded to one place.

    1.png

  2. Copy the code from your stylesheet into the stylesheet skin segment. Change all paths that should reference a file under the uploaded skin files to #cms{skinfoIder}#filename , for example if you have a css rule with a background url('some/path/image.jpg'), change it to url('#cms{skinfoIder}#image.jpg')

    2.png

  3. Put the header code into the header skin segment. Look at the current contents of the default header skin segment and configure your header in the same way. There are tokens there to output page title, description and keywords. There are also tokens for including the global stylesheet for the platform and the stylesheet skin segment. There are a couple other tokens that must be placed at the end of the head area and at the beginning of the body area ( please observe those from the default header skin segment ). The main navigation uses tokens to signify the individual menu items and tokens within those to output the links. If you need to include any assets from the uploaded files ( images, stylesheets, javascript ) remember to use {{ skin_web_path() }} for the path.
  4. Add the footer html to the footer skin segment. The footer skin segment works very similarly to the header skin segment, observe the similar tokens and use them in your footer similar to how they are used in the header.
  5. Add the homepage html ( not header or footer ) to the home skin segment. Please note that there are tokens here to output the different regions from the content management system. Obeserve how they are laid out in the default home, and use them to replace content areas where users can edit. Take the content that the token replaces and insert it into the corresponding homepage region ( under Pages, edit the homepage and put in the html to the appropriate region )
  6. Add the sub page html ( without header or footer ) to the sub_page skin segment. Follow the same rules and procedures as the home skin segment concerning tokens. Take note that on sub pages, region_1 will automatically include the sub page navigation. If you do not want the sub page navigation, use a different region.
  7. Any elements on the site that should be user editable, but are not suitable for a region need to be created as a component ( under Pages -> Components ). These are used for global elements such as copyright in the footer, logo in the header, or an additional navigation for the header. To include a component in any skin segment use {{ cms_twig.component_body_html('component_name')|raw }}
  8. Set region names ( under Pages -> Settings -> Region Names ). Enable or disable regions as they are used or unused, name them something that a client would recognize. For example, if you put a region on the homepage near the top, an appropriate name might simply be "Top". Or if you have 3 columns on the homepage ( separated into 1 region per column ), appropriate names might be Column 1, Column 2, etc

Categories