Knowledge Base

Answers to Common liveSite Questions

Back to Knowledge Base

 
Site Design

Creating Responsive Design Themes for liveSite v9

In liveSite v9, we have added fully responsive design capabilities while maintaining the mobile design capabilities found in liveSite v8.

There are two approaches to web design in liveSite. You can either create a "System" Theme (using liveSite's built-in Theme Designer and Style Designer) to build your responsive site, or you can implement any other responsive design framework (Bootstrap, Foundation, Skel, etc.) using the "Custom" Theme approach where you add your own HTML/CSS/JS files to the mix.

Working examples of both of these approaches can be found in the v9 sandbox (which is included in each site installation of v9.):

http://sandbox.livesitehost.com/start.html

The Custom Themes are Halcyonic and Verti, implemented with the Skel framework, and the remaining 12 themes are System Themes.

This video on Theme Preview Mode will walk you through the included Themes in more detail and how to select and edit them.

Examining this Theme files (CSS) and their associated Page Styles (HTML) will help the experienced Web Designer figure out what include files are necessary and where the media queries are located in case they wish to tune them for their specific design:

 

Custom Themes

For example, all responsive Custom Page Styles should include a viewport definition, activated theme, and the liveSite responsive handler:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<stylesheet></stylesheet>
<link rel="stylesheet" href="/livesite/responsive.min.css" />

Be sure to replace "livesite" with the path to your liveSite software directory (if different). The stylesheet tag is important and tells liveSite what .css file is the "Theme" file that will include the other important software styling for liveSite's own Page Types & System Regions.

If you are using a Custom Theme (your own CSS Theme file / not using the Theme Designer), you will also need to include liveSite's front-end css file at the very top of your Custom Theme CSS file:

/* ALWAYS load the frontend styling first which normalizes browsers and defines basic elements to make liveSite work */
@import url(/livesite/frontend.min.css);

Be sure to replace "livesite" with the path to your liveSite software directory (if different).

Optionally, but a good idea, is take a look at the Custom Themes halcyonic.css and verti.css that are installed with liveSite. They includes a section of styling to make the built-in Custom Formats used in the default site content responsive. You can customize the styling to your liking or add to it but it is a good baseline for styling your responsive site content.

 

System Themes

If you are using the Theme Designer to create your responsive theme, then you will need to include the viewport defintion and responsive handler to the <head> area of your System Page Styles:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/livesite/responsive.min.css" />

Be sure to replace "livesite" with the path to your liveSite software directory (if different). The stylesheet tag is important and tells liveSite what .css file is the "Theme" file that will include the other important software styling for liveSite's own Page Types & System Regions.

You don't need to include the frontend.min.css in your System Theme, the Theme Designer will include that styling for you.

Optionally, but a good idea is to include the following CSS to your Advanced Styling area of your System Theme (within the Theme Designer). This will make the built-in Custom Formats that come with the default System Themes responsive. You can customize the styling to your liking or add to it but it is a good baseline for styling your responsive site content.

/*   Custom Formats for responsive desktop/mobile hides and responsive tables for the Rich-Text Editor. */

/* <add_custom_formats> */
a.link-mobile-fill{}
a.link-desktop-hide{}
a.link-mobile-hide{}
img.image-mobile-fill{}
img.image-desktop-hide{}
img.image-mobile-hide{}
p.paragraph-desktop-hide{}
p.paragraph-mobile-hide{}
span.text-desktop-hide{}
span.text-mobile-hide{}
table.table-desktop-hide{}
table.table-mobile-hide{}
td.table-cell-mobile-hide{}
td.table-cell-desktop-hide{}
td.table-cell-mobile-fill{}
td.table-cell-mobile-wrap{}
td.table-cell-width10{}
td.table-cell-width15{}
td.table-cell-width20{}
td.table-cell-width25{}
td.table-cell-width33{}
td.table-cell-width40{}
td.table-cell-width50{}
td.table-cell-width75{}
td.table-cell-width80{}
td.table-cell-width90{}
.video-mobile-fill{}
.video-desktop-hide{}
.video-mobile-hide{}
/* </add_custom_formats> */

/* Make ad region tablet adjustments (should match call to responsive_ad_region("home-ad-region",959,x); */

@media only screen and (max-width: 959px) {

    /* scale ad region images to full width */
    #software_ad_region_home-ad-region .item img,
    #software_ad_region_home-ad-region .item object,
    #software_ad_region_home-ad-region .item video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    #software_ad_region_home-ad-region .caption,
    #software_ad_region_home-ad-region .caption a,
    #software_ad_region_home-ad-region .caption h1,
    #software_ad_region_home-ad-region .caption h2,
    #software_ad_region_home-ad-region .caption h3,
    #software_ad_region_home-ad-region .caption h4,
    #software_ad_region_home-ad-region .caption h5,
    #software_ad_region_home-ad-region .caption h6 {
        font-size: 12px;
    }
    #software_ad_region_home-ad-region .caption h1 {
        font-size: 28px;
        margin-bottom: 8px;
    }
    #software_ad_region_home-ad-region .caption h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
}
/* pocket size mobile adjustments */
@media only screen and (max-width: 480px) {

    #software_ad_region_home-ad-region .caption,
    #software_ad_region_home-ad-region .caption a,
    #software_ad_region_home-ad-region .caption h1,
    #software_ad_region_home-ad-region .caption h2,
    #software_ad_region_home-ad-region .caption h3,
    #software_ad_region_home-ad-region .caption h4,
    #software_ad_region_home-ad-region .caption h5,
    #software_ad_region_home-ad-region .caption h6 {
        font-size: 8px;
    }
    #software_ad_region_home-ad-region .caption h1 {
        font-size: 18px;
        margin-bottom: 0px;
    }
    #software_ad_region_home-ad-region .caption h2 {
        font-size: 12px;
        margin-bottom: 4px;
    }
}


/*  Make default system page styles responsive */

@media only screen and (max-width:959px) {

    #site_top .wrap,
    #site_header .wrap,
    #area_header .wrap,
    #page_wrapper,
    #site_footer .rwrap {
        width: auto !important;
        padding: 0 .5em !important;
    }

    #software_menu_main-menu.software_menu li a {
        padding: 0.6em 1em !important;
    }

    #sidebar {
        padding-right: .5em;
    }

}

@media only screen and (max-width:830px) {

    #software_menu_main-menu.software_menu li a {
        padding: 0.6em .75em !important;
        font-size: 95%;
    }
}

@media only screen and (max-width:767px) {

    #site_top .cregion_site-tools,
    #site_top .cregion_site-search {
        display: none;
    }
    #site_top .login_site-login {
        width: 49% !important;
    }
    #site_top .cart {
        float: right !important;
        width: auto !important;
        text-align: right;
    }
    #sidebar {
        padding-right: 0em;
    }
}

@media only screen and (max-width:699px) {
    #email_border {
        width: auto !important;
    }
    #email_border #site_top .cregion_email-tools {
        display: none;
    }
    .one_column_email #site_top .wrap,
    .one_column_email #site_header .wrap,
    .one_column_email #area_header .wrap,
    .one_column_email #page_wrapper,
    .one_column_email #site_footer .rwrap {
        width: auto !important;
    }
}

/* this should be the same px as responsive-menu-region call */
@media only screen and (max-width:620px) {
    .menu_main-menu {
        padding: 0 !important;
        margin-top: -55px !important;
        width: 100% !important;
    }
    #software_menu_main-menu.software_menu li ul {
        border: none;
    }
    #software_menu_main-menu.software_menu li a {
        padding: 0.6em 1em !important;
        font-size: 150%;
    }
    #software_menu_main-menu.software_menu li li a {
        font-size: 125%;
    }
    .three_column_sidebar_left #sidebar {
        display: none; /* hide sidebar for thres column on mobile for fit */
    }
    .three_column_sidebar_left #page_content {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #page_content {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #sidebar {
        width: 100% !important;
        float: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: none;
        margin-top: 2em;
    }
}

@media only screen and (max-width:480px) {

    .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8
    {
        width: 100% !important;
        float: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .three_column_sidebar_left #page_content_right {
        width: 100% !important;
        float: right !important;
    }
    .three_column_sidebar_left #page_content_left {
        width: 100% !important;
    }

    #software_ad_region_home-ad-region .caption_content {
        width: auto !important;
    }
}

/******** ALL THEME-SPECIFIC RESPONSIVE UPDATES ARE ABOVE THIS LINE *******/

 

Responsive Menu Regions

No matter whether you are using Custom or System Page Styles/Themes, if a drop down Menu Region is included in the Page Style, then the responsive handler for that menu region should also be included:

<link rel="stylesheet" href="/responsive-menu-region.css" />
<script src="/responsive-menu-region.js"></script>
<script>
    software_$(document).ready(function() {

            // specify the pop up menu region name 
            // specify the mobile pocket size "breakpoint" when the pop up menu morphs into an accordion menu (typically 767).

        responsive_menu_region("main-menu", 620);
    });
</script>

You can get these files from the sandbox site in case you don't have them uploaded into your Design Files area already.

 

Responsive Ad Regions

No matter whether you are using Custom or System Page Styles/Themes, if an Ad Region is added to a Page Style, then the responsive handler is needed to make it responsive (you can get this file from the sandbox site in case you don't have it in your Design Files area):

<script src="/responsive-ad-region.js"></script>
<script>
     // When the page is fully loaded, display the ad region dynamically based on the screen size.
        software_$(document).ready(function() {
           // specify dynamic ad region name (based on the ad region name)
           // specify the breakpoint pixel width when your ad region should begin to shrink to fit the screen width (based on your design)
           // specify the pixel "margin" to apply to each side of the ad region (to match any padding wrapping the ad region itself)
           responsive_ad_region("home-ad-region",960,8);
       });
</script>

You can get this file from the sandbox site in case you don't have it uploaded into your Design Files area already.

 

Need Help?

If you need help implementing your responsive design, please contact us.  Our Web Architects can implement any responsive design into your liveSite.

 


 
Add Feedback:
Was this page helpful? Please let us know how we can improve it.
Please login or register to add your feedback.