RETRACT MANUAL

A. Go to your Rapidweaver preferences, and ensure that the option Consolidate CSS files is enabled. With RW7 this option is already enabled by default (please check this in the Advanced section). This makes exports of your project and uploading of your website faster and gives an improved Internet Explorer support too.

B. IMPORTANT: RETRACT is made for RW7. Easily drop in your custom site banners to the new RapidWeaver 7 Inspector Pane. But when you hide the Banner Image in the Theme Variations you can use the ExtraContent6 area for static banner images, slideshows or videos (Chapter 14).

C. When you have questions about this theme feel free to post them on the RapidWeaver Forums (preferable), or drop me an email.
When you have questions about or issues with stacks or plugins (so not theme-related questions) please post them on the RW forums or send their developers an email.

D. This theme works fine in all modern browsers and on your iPhone/Android and iPad/tablet.

E. This theme is responsive Users no longer just browse the web with desktop computers.
Users now use mobile phones, small notebooks, tablet devices such as iPad to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices.
Narrow for example your browser with this page, or check it on with iPhone/iPad (portrait mode)/Android device. Or have a look here.

WHAT'S IN THE MANUAL
1.    How to install a theme
2.    Automatic Updates with Waterfall
3.    Logo
4.    ExtraContent
5.    Banner Image Option with Rapidweaver 7
6.    Menu Options
7.    Font Awesome Icons
8.    More CSS
9.    Searchbox
10.  TextTime script
11.  Date (US and European) script
12.  Mail a Friend script
13.  Replace the words Category, Archives, Feeds (so the sidebar content) links
14.  Responsive Banner, Slideshow or Video in ExtraContent6 (instead of the RW7 banner)


1. How to install a theme
Double-click on the theme file you received when you downloaded your purchase. The theme file will end with a “.rwtheme” extension. Once you double-click the theme file RapidWeaver will launch, if it wasn’t running already, and install the theme for you.
After installation you’ll want to make sure you quit, and then restart RapidWeaver. This ensures that the app, and other plugins, all know you’ve installed a new theme and it will be visible to you in your theme drawer to choose for your project. In the theme drawer the theme show up with the name RETRACT.

2. Automatic Updates with Waterfall
Easy, Automatic Theme Updating with the plugin Waterfall for RapidWeaver®.
The hassle of manually updating themes is a pain point every RapidWeaver user has run into as some point. Waterfall is your effortless theme management tool, specifically designed to help save you time and prevent the headaches all too often associated with theme updating.
With the Waterfall plugin you've always the latest version of a theme. I strongly recommend to use this plugin for updating themes!!

3. Logo
The Title and Logo have a link with the index.html page of your website. Whatever base url is inserted in Rapidweaver > General > Web Address (with RW7) will be the link.
Drag your Logo into the Site Logo area.
By default the logo is hidden. Now go to the Theme Variations > Logo section and enable the option to display the logo (center, left or right above the Title).

By default the logo is 40px all. For a larger logo paste this in the Custom CSS (80px is just an example, any height is possible):

#logo img {height: 80px;}


Another option is to put your logo in for example in an ExtraContent area. For example in the ExtraContent4 or ExtraContent5 area in the sidemenu panel. Now your logo has no link to the index.html, so you have to make a link manually.

4. ExtraContent
This theme is enabled with a very special feature called ExtraContent. ExtraContent allows you to add more content then RapidWeaver typically allows.

This theme has 6 ExtraContent areas:
EC1 is at the top left (by default). Optionally you can put it on the right side with the menu icon left (Theme Styles > …). Great for social media icons with the built-in Font-Awesome icons, a text-line, a searchfield (for example with Rapidsearch) a date-time script (read the manual) or whatever.
EC2 is on the bottom of the banner image, always centered. Great for social media icons with the built-in Font-Awesome icons, a text-line, a searchfield (for example with Rapidsearch) a date-time script (read the manual) or whatever.
Go to the Theme Styles > Miscellaneous section of the theme to add a black or white translucent background to the EC2.
EC3 is between the content and the footer.
EC4 is at the top of the Menu Side Panel (click on the Menu icon to show it). Great for social media icons with the built-in Font-Awesome icons, a text-line, a searchfield (for example with Rapidsearch) a date-time script (read the manual) or whatever.
EC5 is below the menu in the Menu Side Panel (click on the Menu icon to show it).
EC6 can only be used for a responsive slideshow or video instead of the RW7 banner image. Go to Chapter 14: Responsive Banner, Slideshow or Video in ExtraContent6.

You can add ExtraContent in two ways:
1. With these free stacks: ExtraContent stack or the ExtraContent Plus stack.
2. Or paste this in the Sidebar or Content area as plain text (RW > Edit > Paste as Plain Text) to show both EC areas* (and now - IMPORTANT -select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”):

<div id="myExtraContent1">This is the ExtraContent 1 container</div>
<div id="myExtraContent2">This is the ExtraContent 2 container</div>
<div id="myExtraContent3">This is the ExtraContent 3 container</div>
<div id="myExtraContent4">This is the ExtraContent 4 container</div>
<div id="myExtraContent5">This is the ExtraContent 5 container</div>


There is an EC snippet in the download file with a Plain Text lay-out for use in not-Stacks pages (Blog, Contact, Styled Text, etc).

5. Banner Image Option with Rapidweaver 7

The RETRACT theme takes advantage of the new Banner Image option in RW7.
A slideshow or Video instead of a static Banner Image is possible too. Weer going to use the ExtraContent6 area for this. Go to CHAPTER 14: Responsive Banner, Slideshow or Video in ExtraContent6 how to do this.
The theme comes with one banner photo (a red tulip), but you can replace it with your own image. How to use this image as a Banner Image?

a. Drag your image into the ‘Override Site Banner’ area in the Page-Inspector > General Settings. See image below.

banner-image

EXTRA 1: In preview your own image shows up. You can hide it or choose a height in the Theme Variations > RW7 Banner Height.
EXTRA 3: When the Title or Slogan are less readable, add a overlay (gradient) to the banner image:

overlay

The Black Gradient is really a very nice one. Just try it.
Check the checkbox Theme Styles > Miscellaneous > Add Text-Shadow for a text-shadow (white or black) to the Title, Slogan and ExtraContent2.

EXTRA 3: There’s an option in the Miscellaneous section to Hide the Banner, Title, Slogan and Logo (see this example). Great when you want to keep the side menu with menu-icon only, and design your own website with stacks.

EXTRA 4: A slideshow or Video instead of a static Banner Image is possible too. Weer going to use the ExtraContent6 area for this. Go to CHAPTER 14: Responsive Banner, Slideshow or Video in ExtraContent6 how to do this.

When you want to side the Footer too, check the box "Hide Footer" in the Miscellaneous section too.

6. Menu Options
Menu and Menu Icon at the Left Side.
By default the menu icon and the menu are on the right side.
In the Theme Styles you can position both on the left side. To do this:
1. Select the option Theme Styles > Menu Position > Left.
2. Paste the code below in the Custom Body section in the Page-Inspector of your webpage, or (for all pages) in the RW > Settings > Code > Body field:

<script type="text/javascript">var jQ=jQuery.noConflict();jQ(function(){var a=jQ("#menu").mmenu({extensions:["shadow-page","effect-listitems-slide"],offCanvas:{position:"left"},counters:!0}),b=jQ("#my-icon"),c=a.data("mmenu");b.on("click",function(){c.open()}),c.bind("opened",function(){setTimeout(function(){b.addClass("is-active")},100)}),c.bind("closed",function(){setTimeout(function(){b.removeClass("is-active")},100)})});
</script>


Instead of adding this code, you can also install the RetractMenuLeft snippet (in the download file). Drag it into the Custom Body section in the Page-Inspector of your webpage, or (for all pages) in the RW > Settings > Code > Body.

Menu Top and Bottom Padding
To increase the top and bottom padding of the menu, check the checkbox "Increase SideMenu Top and Bottom Padding" in the Theme Styles > Miscellaneous. Example.

Background Pattern to the Menu
By default you can choose a background color to the Menu Panel in the Theme Styles > Colours.
When you like a pattern, drag the paters image into the Resources, and paste this in the Custom CSS:

.mm-menu {background-image: url(resources/pattern1.jpg);}

(don’t forget the dot before mm-menu!). Replace the name pattern1.jpg with the name of your own pattern image (example).
Download paters here:
https://subtlepatterns.com and other websites.

Text-Shadow to the Menu, ExtraContent4 and ExtraContent5 (all in the Menu Panel)
Add a text-shadow with this in the Custom CSS (don’t forget the dot before mm-menu):

.mm-menu {text-shadow: 1px 1px 1px rgba(0,0,0,0.35);}

Example.

7. Font Awesome Icons
The build-in Font Awesome Icons are really fast and easy to use it anywhere in your website!
Make sure you have got CSS Consolidation turned on in RapidWeaver preferences. If you see squares instead of icons, this is a sure-sign that you've not turned on consolidation, and therefore the links to the icons are broken.
Please visit the this website to view a list of all FontAwesome icons available.

A.Click on an icon of your choosing from the list. For example the Facebook Official icon:

<i class="fa fa-facebook-official"></i>


B. Simply copy and paste the code for the icon that has generated on the page next to the content where you would like the icon to appear. Never remove the quotation marks! You can paste this anywhere: in the content or sidebar, in the ExtraContent or footer, before a blog or filesharing title or wherever.

C. Once placed in your project file, highlight the entire code and click Clear Formatting under Format at the top left of your screen. The font icon will now display in preview.

D. In the Theme Styles you can change the color of the icons in the content, sidebar and ExtraContent.
Other color? Paste this in the Custom CSS:

.fa {color:#ff0000 !important;}

#ff0000 is the HTML color for red. Other HTML colors.

E. Add a bit space behind an icon with this character entity after each code &nbsp; , once or a few times. So for example:

<i class="fa fa-facebook-official"></i>&nbsp;&nbsp;


Or before the icon:

&nbsp;&nbsp;&nbsp;<i class="fa fa-facebook-official"></i>


Add a bit space between two icons with this character entity between each code &nbsp; , once or a few times. So for example:

<i class="fa fa-facebook-official"></i>&nbsp;&nbsp;<i class="fa fa-twitter-square"></i>


F. By default the font-size of these icons is the same as the selected font-size of Content and ExtraContent. You like them bigger? There are two options to increase the size of these icons:

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes. So for example:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x


Or increase the size of an icon with this in the Custom CSS (Page-Inspector > Header > CSS), any font-size is possible, for example 32px:

.fa {font-size: 32px;}


G. add a link to your FontAwesome icon (for example to your Facebook page):

<a href="#"><i class="fa fa-facebook-official"></i></a>


Replace the # in this code with the page URL of your icon and the website will open in the same window. When you replace the # with http://www.facebook.com/jjohnson" target="_blank (so add only target="_blank) the website opens in a new window, so:

<a href="http://www.facebook.com/jjohnson" TARGET="_blank"><i class="fa fa-camera-retro fa-lg"></i></a>


An email-address is possible too. Replace the # in the code with this: mailto:johndoe@mac.com
This is an example with an envelope icon:

<a href="mailto:johndoe@mac.co"><i class="fa fa-envelope"></i></a>


Don’t remove the quotation marks!

H. When you put a FontAwesome icon in a not-Stacks page in an ExtraContent area, for example the EC1 area, paste this in the Sidebar or Content as plain text (RW > Edit > Paste as Plain Text):

<div id ="myExtraContent1"><i class="fa fa-facebook-official"></i></div>


In Preview your icon shows up in the ExtraContent1 area, above the Menu. Be sure always to end with the </div> tag!!!
Another option with a Stacks page is to paste the icon code in the free ExtraContent stack and select EC1 in the settings of the stack.
Replace myExtraContent1 with another EC area (2 or 3) in the code above when you prefer it in another EC area.

Important: Be sure that when you start with a </div...> tag you always have to end with the </div> tag!

• YOUR OWN ICONS (IMAGES)
It’s not needed to use these font awesome icons. You can also add real images (jpg, gif, png) as icons in your webpages and make a link to a page.

8. More CSS
You can put all css-codes below in the Custom CSS:
Line-Height Content and Sidebar
Increase or decrease the line-height (default 1.5):

#contentContainer #content, #sidebarContainer #sidebar {line-height: 1.2;}

Font-Size Content (not the sidebar)
You can choose a font-size of the sidebar and content in the Theme Styles. When you want a different font-size to the content, paste this in the Custom CSS:

#contentContainer #content {font-size: 12px;}

Font-Weight Title
With this in the Custom CSS you’ll get thicker characters of the Title:

#title h1 {font-weight: bold;}

Letter-Spacing Title
With this in the Custom CSS you can add some letter-spacing to the Title (12px is an example):

#title h1 {letter-spacing: 12px;}

Font-Size Blog Entry
With this in the Custom CSS you’ll get a larger font-size of the blog-entry title (30px is an example):

.blog-entry-title {font-size: 30px;}


Font-Weight Blog Entry
With this in the Custum CSS you’ll het a bold Blog Title Font:

.blog-entry-title {font-weigat: bold;}

Blog Categories, Archives, Clouds inline
Paste this in the Custom CSS of a Blog Page to display the Blog Categories, Archives an Clouds from block to inline (with this you get more than one category on a line):

#blog-categories br,#blog-archives br {display: none;}

Font-Weight Headings
And with this in the Custom CSS the headings (h1, h2, h3, etc) will be bold, for example h3:

h3 {font-weight: bold;}

Or add some letter-spading to the headings:

h3 {letter-spacing: 3px;}

Center thumbnails and text in the built-in Photo Album Page
With this you can center the text and the thumbnails wrap in a built-in Photo Album Page:

.album-description,.album-wrapper,.album-title {text-align: center;}
.thumbnail-wrap {display: inline-block;float: none;}

Hide text-shadow only in ExtraContent2
With this in the Custos CSS you can heide the text-shadow in the EC1 when you’ve added a textshadow to the Title and Slogan in the Miscellaneous section of the theme styles:

#myExtraContent2 {text-shadow:none;}


9. Searchbox
Example
You can add a searchbox in the sidebar, content or in any ExtraContent area (EC1, EC2 or EC3), How to do this, for example in the EC1 (on the banner image)?

A. Add a RapidSearch Page to your project. Read the Rapidsearch Users Guide.

B. Name the RapidSearch page folder for example "search". And then, paste this code as plain text (RW > Edit > Paste as Plain Text) in the content or sidebar:

<!-- Replace the url below with the url of your RapidSearch page--> <!-- When you prefer another word for Search replace it by your own word or by a FontAwesome icon. -->
<form action="http://www.url-of-your-website.com/search" method="get"> <fieldset> <input type="text" name="q" value=""/> <input type="submit" value="Search"/>
</fieldset> </form>


C. When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area at the bottom of your banner image. When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area on the banner image. Replace myExtraContent1 with myExtraContent2, myExtraContent3, myExtraContent4 or myExtraContent5 when you want to show it in another ExtraContent area.
Choose the font-size and colors in the Theme Variations.

Another option is to put the code in the free ExtraContent stack and enable 1 in the settings of this stack.
Notes:
• Do not add index.html or index.php because for some reasons RapidSearch won't work with the absolute url.
• When you add the tag <br> at the end of the line <input type="text" name="query" value=""/> the word ‘Search’ goes to the next line.

So it will be this:

<!-- Replace the url below with the url of your RapidSearch page--> <!-- When you prefer another word for Search replace it by your own word or by a FontAwesome icon -->
<form action="http://www.url-of-your-website.com/search" method="get"> <fieldset> <input type="text" name="q" value=""/>
<br> <input type="submit" value="Search"/>
</fieldset> </form>


• Important: Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. That pinkish hue means that portion has been marked as “Ignore formatting”.

Paste this in the Custos CSS to hide the border round the Search text or icon:

fieldset input[type="submit"], fieldset input[type="submit"]:hover {
border-style:none;padding-left:5px;}


D. When you would like to replace the word 'Search' with a FontAwesome icon (see image below), first replace the word Search with this &#xf002;

search_icon

So it will be this:

<form action="http://www.url-of-your-website.com/search" method="get"> <fieldset> <input type="text" name="query" value=""/> <input type="submit" value="&#xf002;"/>
</fieldset> </form>


• Important: Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. That pinkish hue means that portion has been marked as “Ignore formatting”.

Select a color in the Theme Styles > Colours > SearchBox …

And now paste this in the Custom CSS for a bigger font-size (16px is an example):

fieldset input[type="submit"] {font-size: 16px !important;}


10. TextTime script
Example
Paste the code below as plain text (RW > Edit > Paste as Plain Text) in the Sidebar or Content. You can replace the names of the months and the days in your own language. Do not remove the quotation marks!

<script language="JavaScript">

function number(x) {
if (x==1) return "one"; if (x==2) return "two"; if (x==3) return "three";
if (x==4) return "four"; if (x==5) return "five"; if (x==6) return "six";
if (x==7) return "seven"; if (x==8) return "eight"; if (x==9) return "nine";
if (x==10) return "ten"; if (x==11) return "eleven"; if (x==12) return "twelve";
return x; //default
}
function ishtime(h,m) {
h = number(h)

<!-- Below you can translate the text in your own language -->
if (m<=3 || m>57) return h+" o'clock";
if (m<=7) return "five past "+h;
if (m<=12) return "ten past "+h;
if (m<=17) return "quarter past "+h;
if (m<=23) return "twenty past "+h;
if (m<=28) return "twenty-five past "+h;
if (m<=33) return "half past "+h;
if (m<=38) return "twenty-five to "+h;
if (m<=43) return "twenty to "+h;
if (m<=48) return "quarter to "+h;
if (m<=53) return "ten to "+h;
if (m<=58) return "five to "+h;
return "h:m";
}
function daytime(h) {

<!-- Below you can translate the text in your own language -->
if (!h || h>21) return " at night"
if (h<12) return " in the morning";
if (h<=17) return " in the afternoon";
return " in the evening"; // default
}
function ish(h,m) {
if (!h && !m) {
time = new Date()
h = time.getHours()
m = time.getMinutes()
}
z = daytime(h);
h = h % 12 // fix to 12 hour clock
if (m>57 && time.getSeconds()>30) m++;
if (m>60) m=0
if (m>33) h++
if (h>12) h = 1
if (h==0) h = 12

<!-- Below you can translate the text in your own language -->
return "It's now about "+ishtime(h,m)+z+"."
}document.writeln(ish().fontcolor(""),"<P>")

</script>


Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area on the banner image. When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area on the banner image. Replace myExtraContent1 with myExtraContent2, myExtraContent3, myExtraContent4 or myExtraContent5 when you want to show it in another ExtraContent area.

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack.

11. Date (US and European) script
Example

Paste the code below as plain text (RW > Edit > Paste as Plain Text) in the Sidebar or Content when you prefer a US Date:

<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym


<!-- Replace the name of the Months and Days below in your own language -->
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(""+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"")
</script>


• Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
The code explains which parts can be changed.

This is the code when you prefer a European Date:

<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym

<!-- Replace the name of the Months and Days below in your own language -->
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(""+dayarray[day]+ " "+daym+" "+montharray[month]+", "+year+"")
</script>


• Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
The code explains which parts can be changed.

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area on the banner image. When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area on the banner image. Replace myExtraContent1 with myExtraContent2, myExtraContent3, myExtraContent4 or myExtraContent5 when you want to show it in another ExtraContent area.

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack.

12. Mail a Friend script
Paste the code below as plain text in the Sidebar or Content. The code explains which parts can be changed:

<!-- Replace the text "Click here to email this page to a friend" in your own text. In this example the word 'here' is a link -->
Click <A href="javascript:mailpage()">here</A> to email this page to a friend
<script language="javascript">
function mailpage()
{
<!-- Replace the text "Check out ". -->
mail_str = "mailto:?subject=Check out " + document.title;

<!-- Replace the text "I thought you might be interested in this page" and ". You can view it at" -->
mail_str += "&body=
I thought you might be interested in this page " + document.title;
mail_str += ".
You can view it at " + location.href;
location.href = mail_str;
}
</script>


You can replace the red and green parts in the code above in your own text. The word in green is the linktext.
Do not remove the quotation marks!

Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area on the banner image. Replace myExtraContent1 with myExtraContent2, myExtraContent3, myExtraContent4 or myExtraContent5 when you want to show it in another ExtraContent area.

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack.

13. Replace the words Category, Archives, Feeds (so the sidebar content) links
By default the sidebar contents in the built-in Blog page shows the English names (CATEGORIES, ARCHIVES, etc, see screenshot below):

blog

With this in the Custom CSS section you can replace those names with another word in your own language:

#blog-categories:before {content:"Categories";}
#blog-archives:before {content:"Archives";}
#blog-rss-feeds:before {content:"Feeds";}
ul.blog-tag-cloud:before{content:"Tag cloud";}


Only replace the words, don't remove the quotation marks!
Select a color of these words in the Theme Variations > Colours > Blog Categories/Archives/Feeds/Tag text.

14. Responsive Banner, Slideshow or Video in ExtraContent6 (instead of the RW7 banner)
Any width or height is possible, but preferable the same width or wider than the selected Container Width in the Theme Styles.
I’ve added a RW7 example file in the download file with a leafs.jpg image.
More images:
https://www.pexels.com
https://unsplash.com

This chapter explains how to use the ExtraContent6 area for a responsive image or slideshow.

IMAGE:
Step 1 (important). Go to the Theme Variations > RW7 Banner Image or ExtraContent6 and select the option Display ExtraContent6 • Hide RW7 Banner… (see image below):

ec66

Step 2. With a Stacks page: drag an ExtraContent stack (it’s in the download file) into a stacks page and select ExtraContent6 in the settings of the stack, see green arrow in image below.
Step 3. Now drag your own image (any width or height is possible, but preferable the same width or wider as the selected Container Width) into this stack, see image below:

ec6

In preview your image shows up above of the Content in the Banner area.

SLIDE SHOW:
Step 1. Go to the Theme Variations > RW7 Banner Image or ExtraContent6 and select the option Display ExtraContent6 • Hide RW7 Banner… (see image below):

ec66

Step 2. Drag an ExtraContent stack (it’s in the download file) into a stacks page and select ExtraContent6 in the settings of the stack (see green arrow in image above).
Step 3. Now drag your slide-show stack in this ExtraContent stack and add your images as described in the tutorial of the slide-show stack. When the slide-show stack has an option for showing thumbnails I would hide that option.
A great stack for this is the (free) Freestyle stack (images, videos, and more), but there are different other stacks for this, have a look at rapidweavercentral.info

IMPORTANT: when your enable the Logo (Theme Variations > Logo Position > …), paste this in the Custom CSS:

#title {margin-top: 20px;}

20px is an example, you can increase or decrease it.

VIDEO (with a Stacks page):
Step 1. Go to the Theme Variations > RW7 Banner Image or ExtraContent6 and select the option Display ExtraContent6 • Hide RW7 Banner… .
Step 2. Drag an ExtraContent stack (it’s in the download file) into a stacks page and select ExtraContent6 in the settings of the stack (see green arrow in image above).
Step 3. Drag a video stack into the ExtraContent stack:
With the Freestyle2 stack you can add videos (HTML5, Vimeo, YouTube, etc.). There are more video stacks, such as the HTML5 Video stack.
About the YouTube option in the Freestyle stack: a box marked Custom Para’s is provided in the stack settings. When you put ?autoplay=1 in this area, the video starts playing automatically as the page loods.
When you put this in the area ?autoplay=1&modestbranding=1&showinfo=0&controls=0 all controls and info are hidden and the video starts automatically.
In some other YouTube or video stacks you can hide these options in the stacks settings.
Read the tutorial of the HTML5 and Vimeo stacks how to hide controls, start autoplay or loop.

YOUTUBE VIDEO (with a Stacks or a not-Stacks page):
With a not-stacks page (Blog, Styled Text, Contact, Sitemap, etc) you can add a YouTube video in the ExtraContent4 too.
Step 1. Go to the Theme Variations > RW7 Banner Image or ExtraContent6 and select the option Display ExtraContent6 • Hide RW7 Banner…
Step 2. Paste this as Plain Text in the Sidebar or Content of a page:

<div id="myExtraContent6"><div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/SWv3ungRSBY?rel=0&modestbranding=1&autoplay=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen"></iframe></div></div>

Or paste only this code in a ExtraContent stack with EC6 selected:

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/SWv3ungRSBY?rel=0&modestbranding=1&autoplay=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen"></iframe></div>


Step 3
. Select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
in Preview a YouTube video shows up.

Step 4: Replace the video above with your own YouTube video:
a. Go to the YouTube video you want to add.
b. Under the video, click Share .
c. Click Embed.
d. From the box that appears, copy only the VideoID in the HTML code below (arrow):
yt-video
e. Replace the new VideoID in the code above (so SWv3ungRSBY) with the new VideoID (don’t remove the ? in the code!).
So the code must be behind the text …/embed/ and before ?rel=0…
In preview your YouTube video starts automatically. If not you’ve copy/paste the wrong code. Try again.

Step 5: By default all controls are hidden, and the video starts automatically.
• The “autoplay” function allows for a video to immediately start when a page loads: the value 1 enables this. Replace it with 0 when you prefer to start the video manually.
• The “controls” function allows you to hide (the value 1 enables hide) or show the video controls. To show the controls, replace it with 0 .
• The “showinfo” code shows and hides (the value 1 enables hide) the YouTube header bar. To hide the info bar, replace it with 0 .
• The “modestbranding” code shows and hides (the value 1 enables hide) the YouTube logo. To show the logo, replace it with 0 .
• Finally, in order to show related videos from the end of the video replace 0 in rel=0 in the code above with 1 .

VIMEO VIDEO (with a Stacks or a not-Stacks page):
With a not-stacks page (Blog, Styled Text, Contact, Sitemap, etc) you can add a vimeo video in the ExtraContent4 too.
Step 1. Go to the Theme Variations > Miscellaneous and select the option Hide Banner Image • Display ExtraContent6 … .
Step 2. Paste this as Plain Text in the Sidebar or Content of a page:

<div id="myExtraContent6"><div class="video-container"><iframe src="http://player.vimeo.com/video/136920442?autoplay=1&loop=1&" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div></div>

Or paste only this code in a ExtraContent stack with EC4 selected:

<div class="video-container"><iframe src="http://player.vimeo.com/video/136920442?autoplay=1&loop=1&" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Step 3. Select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
in Preview a YouTube video shows up.
Now replace the VIMEO ID (in this example 136920442) with your own. So the code must be behind the text …/video/ and before ?autoplay=1…
In preview your YouTube video starts automatically. If not you’ve copy/paste the wrong code. Try again.
Step 4: By default all controls are hidden, and the video starts automatically.
• The “autoplay” function allows for a video to immediately start when a page loads: the value 1 enables this. Replace it with 0 when you prefer to start the video manually.
• The “loop” function allows to play the video again when it reaches the end. Defaults to 0. With the value 1 it plays again after rechtig the end.

Some videos have black bars at the top and bottom. You can remover them by changing the Aspect Ratio of the video. Paste this in the Custom CSS and change 43% until you don’t see the bars anymore:

.video-container { padding-bottom: 43%; }

(this css does not work with the Freestyle2 stack)

EXTRA: when you prefer a less taller video or slideshow on your desktop (not on your mobile), paste this in the Custom CSS (-120px is an example, adjust it until you’re satisfied about the height):

@media screen and (min-width:768px) {
#myExtraContent6,#breadcrumbcontainer { top: -120px;}
#content-wrapper { margin-top: -120px;}}


Videos won't AutoPlay on iPad and iPhone.

• ADD YOUR BANNER WITH A NOT-STACKS PAGE
With a not-stacks page (Contact, Blog, Styled Text, Sitemap, etc.) or Stacks page:
Step 1. Go to the Theme Variations > RW7 Banner Image or ExtraContent6 and select the option Display ExtraContent6 • Hide RW7 Banner… .
Step 2. Drag your image into the Resources.
Step 3. Copy the code below and paste it into a RW page as Plain text (RW > Edit > Paste as Plain Text) (in the content or in the sidebar):

<div id="myExtraContent6"><img src="%resource(image1.jpg)%" ></div>

Replace the name image1.jpg in the code above with the name of your own image in the Resources. Be sure that the image name is exactly the same as in the one in the Resources! Names are case-sensitive. Please don't use spaces in a name.
When you put your image in a folder (for example the folder images) in the Resources, paste this:

<div id="myExtraContent6"><img src="%resource(images/image1.jpg)%" ></div>

In preview your image shows up.

Images can be located in your Resources (see above) or on a server (e.g. http://www.domain.com/images/img1.jpg). So when you choose to add an image on your server replace resources/img1.jpg in the code above with http://www.domain.com/images/image1.jpg (don't remove the quotation marks!). So:

<div id="myExtraContent6"><img src="http://www.domain.com/images/image1.jpg" ></div>

Try this working example:

<div id="myExtraContent6"><img src="https://static.pexels.com/photos/48796/carnival-woman-costume-orange-48796.jpeg" ></div>




-------------------------------------------------------------------------------------------
The Retract theme may not be resold or redistributed without the express written permission of Henk Vrieselaar:
2016