• Yes! The Inceptive theme is built on top of the HTML Kickstart framework which is a responsive framework.
    Stacks Image 420
  • While the Inceptive theme was created with RapidWeaver 6 in mind it is fully compatible with RapidWeaver 5.
  • Adding a slideshow is very easy and consists of two (2) main steps:
    1. Adding images to the 'Resources' folder in RapidWeaver and
    2. Select a slideshow setting from the Inspector

    Your slideshow images will look best when they measure 1700px wide by 550px tall. If you try to use different dimensions then your images will look distorted.

    Once you have prepared your images in an image editor (Photoshop, Acorn, Affinity Designer, etc ...) you will want to save them as a jpg so that they have a .jpg file extension. You should use the following naming scheme "slide1.jpg, slide2.jog, slide3.jpg, etc ..."

    After you have saved the images you will need to drag them into the 'Resources' folder in the left hand side of the RapidWeaver window. (Note the image below)
    Stacks Image 422
    After you have added your images to the 'Resources' folder you select an option from the Inspector.
    Stacks Image 424
  • Using a custom banner is very easy ... maybe too easy.
    Step one:

    Depending on which banner style you have selected will determine the naming scheme you should use for your banner images.

    For Banner Style 1 you would use the following naming scheme:
    Banner style 1  = st1-header.jpg
    Banner style 1 - Alternate 1 =  st1-header1.jpg
    Banner style 1 - Alternate 2 =  st1-header2.jpg
    Banner style 1 - Alternate 3 =  st1-header3.jpg
    Banner style 1 - Alternate 4 =  st1-header4.jpg
    Banner style 1 - Alternate 5 =  st1-header5.jpg
    


    Stacks Image 426
    For Banner Style 2 you would use the following naming scheme:
    Banner style 2  = st2-header.jpg
    Banner style 2 - Alternate 1 =  st2-header1.jpg
    Banner style 2 - Alternate 2 =  st2-header2.jpg
    Banner style 2 - Alternate 3 =  st2-header3.jpg
    Banner style 2 - Alternate 4 =  st2-header4.jpg
    Banner style 2 - Alternate 5 =  st2-header5.jpg
    Banner style 2 - Alternate 6 =  st2-header6.jpg
    Banner style 2 - Alternate 7 =  st2-header7.jpg
    Banner style 2 - Alternate 8 =  st2-header8.jpg
    Banner style 2 - Alternate 9 =  st2-header9.jpg
    Banner style 2 - Alternate 10 =  st2-header10.jpg
    
    Stacks Image 432
    Step two:
    Now go to the Page Inspector and select the custom banner. (Note the image below)
    Stacks Image 436
    Stacks Image 434
  • For Banner Style 1
    Your banner images should measure the same as you slideshow images 700px wide by 480px tall.

    For Banner Style 2
    Your banner images should measure the same as you slideshow images 1700px wide by 550px tall.
  • The stock banner images were taken from
    https://unsplash.com
    http://www.splitshire.com
    https://www.pexels.com
    and are within the usage rights.

    Each banner image has been cropped from the original image and saved at 20-30% resolution (to reduce file size).
  • If you are familiar with using snippets then adding social icons to your footer area will be pretty easy. If you are new to RapidWeaver then it might feel intimidating at first but once you get the hang of it you will agree that it is very easy.

    Step one:

    The first thing you will want to do is decide on which social icons you want in your footer (Twitter, Facebook, Google+, Linked in, etc ... )

    Step Two:

    After you have decided which social icons you want in your footer area then you can select those snippets and drag and drop them into your sidebar (via the Page Inspector) and the will magically appear in your footer area.
    Stacks Image 487

    Step Three:
    After you drag and drop the snippets to your sidebar (via the Page Inspector) you will need to highlight the snippet and then select "Ignore Formatting" from the "Format" menu in the toolbar. (Note the images below)
    Stacks Image 489
    Stacks Image 268

    Step Four:
    After you drag and drop the snippets to your sidebar (via the Page Inspector) you will need to edit the snippet to insert the url link for your social site. Notice in the image below I have changed the
    href="#"
    to
    href="https://twitter.com/kulersolutions"

    Stacks Image 272
    Step Five - Adding Color:
    By default the icons will be colored white but you can change them by adding a class name to the icon element. For example, if I wanted to make the icon blue I could add the class name of "icon-blue" and my icon would turn blue.
    <li class="social-icon">
    	<a href="#"><i class="fa fa-twitter fa-2 icon-blue"></i></a>
    </li>
    
    I have taken the time to add many color choices for these icons ... Just change the class name to a color that you want.
    Basic Colors
    icon-blue
    icon-red
    icon-gray
    icon-black
    icon-white
    icon-green
    icon-orange
    icon-purple
    icon-pink
    
    Brand Colors
    twitter-blue
    youtube-red
    vimeo-blue
    dribble-gray
    slack-red
    dropbox-blue
    flickr-pink
    digg-black
    github-blue
    google-plus-red
    jsfiddle-blue
    vine-green
    tumblr-gray
    reddit-orange
    linkedin-blue
    

    Alternative method

    If you prefer to not use a snippet you can copy and paste one of the snippets of code below into the sidebar of your RapidWeaver project.

    Digg
    <li class="social-icon">
    	<a href="#"><i class="fa fa-digg"></i></a>
    </li>
    Dribble
    <li class="social-icon">
    	<a href="#"><i class="fa fa-dribbble"></i></a>
    </li>
    Dropbox
    <li class="social-icon">
    	<a href="#"><i class="fa fa-dropbox"></i></a>
    </li>
    Facebook
    <li class="social-icon">
    	<a href="#"><i class="fa fa-facebook-square"></i></a>
    </i>
    Flickr
    <li class="social-icon">
    	<a href="#"><i class="fa fa-flickr"></i></a>
    </li>
    Git
    <li class="social-icon">
    	<a href="#"><i class="fa fa-github"></i></a>
    </li>
    Google+
    <li class="social-icon">
    	<a href="#"><i class="fa fa-google-plus-square"></i></a>
    </li>
    Instagram
    <li class="social-icon">
    	<a href="#"><i class="fa fa-instagram"></i></a>
    </li>
    jsFiddle
    <li class="social-icon">
    	<a href="#"><i class="fa fa-jsfiddle"></i></a>
    </li>
    Linkedin
    <li class="social-icon">
    	<a href="#"><i class="fa fa-linkedin-square"></i></a>
    </li>
    Pinterest
    <li class="social-icon">
    	<a href="#"><i class="fa fa-pinterest"></i></a>
    </li>
    Reddit
    <li class="social-icon">
    	<a href="#"><i class="fa fa-reddit"></i></a>
    </li>
    Slack
    <li class="social-icon">
    	<a href="#"><i class="fa fa-slack"></i></a>
    </li>
    Tumblr
    <li class="social-icon">
    	<a href="#"><i class="fa tumblr-square"></i></a>
    </li>
    Twitter
    <li class="social-icon">
    	<a href="#"><i class="fa fa-twitter"></i></a>
    </li>
    Vimeo
    <li class="social-icon">
    	<a href="#"><i class="fa fa-vimeo-square"></i></a>
    </li>
    Vine
    <li class="social-icon">
    	<a href="#"><i class="fa fa-vine"></i></a>
    </li>
    Youtube
    <li class="social-icon">
    	<a href="#"><i class="fa fa-fa-youtube-square"></i></a>
    </li>
  • If you are using RapidWeaver 6 then definitely "Yes"! As a matter of fact, this demo site was built with Consolidate CSS turned on.

    If you are using RW5 then you might try with Consolidate CSS turned on and off ... As far as I know RW5 and RW6 handle css consolidation a bit differently. You should be able to, but you may find that you have better success by turning it off in RW5.
  • The logo on this demo site measures 280px × 68px but you can use slightly large dimension if you want. However, it is important to note that using a logo image with exaggerated dimensions will produce really horrible results.
    I wouldn’t go higher than about 300px x 90px.

    Making the Logo "non-responsive"

    Perhaps your logo doesn’t look good when it is scaled down or up (the normal behavior in responsive themes) and you would like for your logo to remain the same size regardless of the screen size.

    You can achieve this by adding some custom javascript to the Site Inspector "Javascript" box. Just copy and paste the following code into the "Javascript" box via the Inspector.


    $kuler(document).ready(function () {
    $kuler("a#logo img").removeClass( "logo-img img-responsive" );
    });