• Yes! The Placid theme is built on top of the HTML Kickstart framework which is a responsive framework.
    Stacks Image 252
  • While the Placid 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. Adding a snippet to the sidebar

    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 can name them whatever you like but to keep things simple I suggest naming theme "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 254
    After you have added your images to the 'Resources' folder you now need to add a snippet of code to the sidebar. You can use one of the snippets that came with the theme at purchase or you can copy the snippet below and then paste it into your sidebar.
    5 Slides

    <ul id="ks-slides" class="slides ks-slideshow">
    	<li><img src="resources/slide1.jpg" /></li>
    	<li><img src="resources/slide2.jpg" /></li>
    	<li><img src="resources/slide3.jpg" /></li>
    	<li><img src="resources/slide4.jpg" /></li>
    	<li><img src="resources/slide5.jpg" /></li>
    </ul>
    
    4 Slides

    <ul id="ks-slides" class="slides ks-slideshow">
    	<li><img src="resources/slide1.jpg" /></li>
    	<li><img src="resources/slide2.jpg" /></li>
    	<li><img src="resources/slide3.jpg" /></li>
    	<li><img src="resources/slide4.jpg" /></li>
    </ul>
    
    3 Slides

    <ul id="ks-slides" class="slides ks-slideshow">
    	<li><img src="resources/slide1.jpg" /></li>
    	<li><img src="resources/slide2.jpg" /></li>
    	<li><img src="resources/slide3.jpg" /></li>
    </ul>
    
    You can add more slides to your slideshow simply by adding another
    <li><img src="resources/slide1.jpg" /></li>
    to the snippet and changing the name of the image referenced to match the name of the extra image. Example: You would change
    <li><img src="resources/slide1.jpg" /></li>
    to
    <li><img src="resources/slide6.jpg" /></li>
    or
    <li><img src="resources/slide7.jpg" /></li>
  • Using a custom banner is very easy ... maybe too easy.
    Step one:
    Name your custom banner "header1.jpg, header2.jpg, header3.jpg, header4.jpg, etc ..." then drag and drop your custom banner into the 'Resources' folder in RapidWeaver (notice the image below).

    Stacks Image 579
    Step two:
    Now go to the Page Inspector and select the custom banner. (Note the image below)
    Stacks Image 583
    That is it!
    To use a separate image for a different page just add another image to the resources (again named header2.jpg, header3.jpg, header4.jpg, etc ...) and then select that image from the Page Inspector for that page.

    See, I told you it was easy :-D
  • 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 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 258

    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 260
    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
    
  • 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.
Stacks Image 266