The project is available in two versions Basic and Total
While in the Basic version only the front pages are included, the Total version also includes the admin side for content management, based on Total CMS.

The Total version consists of two separate project files:

• 1 project file for the front-side.
  
• 1 project file for the admin-side.
  

In this way the project management in RapidWeaver becomes more agile, being able to put side by side the windows of the two projects and having everything at hand.

Where it is not specifically stated "Total version only", it means that the documentation is also valid for the Basic version of the project.

BASIC version

• All the front-side pages you see in this demo: the Overview, all the Main pages, all the Utility pages and all the Extra pages.

In the Basic version, since there is no Total CMS, the Blog pages are normal pages that simply reproduce the layout of a blog.

TOTAL version

• All the front-side pages you see in this demo: the Overview, all the Main pages, all the Utility pages and all the Extra pages.
  
• All the admin-side pages you see in this demo.

TOTAL version only

From the admin-side you can manage, via Total CMS, the contents of the following front-side pages:

• All the Main pages
  
• All the Utility pages.

Only the pages listed above are already set to be manageable via the admin side on this project.

If you are going to add new contents on an existing page or on a new page, you will then need:

• on the front-side, set up the stacks as you need and enter the TCMS macros;
• on the admin-side, set up the TCMS stacks to manage the content. To speed up the work, you can 1) copy an entire section of stacks that manage other contents; 2) paste them where you need them; 3) replace the existing macros with the new ones set on the content page.

This project is for RapidWeaver 8. And it's based on Stacks plugin and Foundation 6 stacks.

In order to use the Basic version you also need:

• Pen stack FREE STACK
• Swatch Pack stacks
• Chroma stack FREE STACK

In order to use the Total version you also need:

• Pen stack FREE STACK
• Swatch Pack stacks
• Chroma stack FREE STACK
• Total CMS stacks

• MovingBox stack OPTIONAL STACK
• Photo Pro stack OPTIONAL STACK

The demo site you are viewing uses optional stacks.

MovingBox

MovingBox stack is not necessary, but if you have it you will certainly enjoy the advanced layouts and synchronised slideshows it can offer.

If you don't have MovingBox, disable the Pen stack in which it is contained and enable the one just below to fall back on a simple slideshow created with the F6 Slider stack.
The slideshow created with the F6 Slider stack obviously cannot reproduce the same advanced layouts and animations as those created with the MovingBox stack.

Photo Pro

Photo Pro stack is not necessary, but it certainly offer a superior visual experience. It is used for the photo gallery on the post page.

If you don't have Photo Pro stacks, disable the Pen Stacks containing them. No gallery will be displayed.

• PageSafe stack OPTIONAL STACK
• MovingBox stack OPTIONAL STACK
• Photo Pro stack OPTIONAL STACK

The demo site you are viewing uses optional stacks.

PageSafe

PageSafe stack is not necessary, but if you have it you can certainly protect your pages even more securely and you will be able to manage the password with Total CMS directly via the User Profile page.

If you don't have PageSafe, If you don't have PageSafe stack you can disable it on the admin side to fall back on the TCMS Protect stack.

MovingBox

MovingBox stack is not necessary, but if you have it you will certainly enjoy the advanced layouts and synchronised slideshows it can offer.

If you don't have MovingBox you can disable it on the admin side to fall back on the simple slideshows created with the F6 Slider stack.
The slideshow created with the F6 Slider stack obviously cannot reproduce the same advanced layouts and animations as those created with the MovingBox stack and it is neither possible to integrate the Total CMS blog, so you will therefore have to insert your content manually and set up the links to the pages.

Photo Pro

Photo Pro stack is not necessary, it they certainly offer a superior visual experience. It is used for the photo gallery on the post page.

If you don't have Photo Pro stack you can disable it on the admin side to fall back on the gallery created with the TCMS Gallery stack.

• Enter the Web Address data in the General settings.

• Enter the domain data in the Publishing settings (you will need the FTP information of your server).

• Publish the project file.

Getting started

• Upload the cms-data folder (you will find it in the downloaded ZIP file) to your server in the same directory where you will publish the site.
• For both project files (admin-side and front-side) enter the Web Address data in the RW General settings (the web address must be exactly the same in both project files).

• For both project files (admin-side and front-side) enter your domain data in the RW Publishing, of course you will need the FTP information of your server (the data must be exactly the same in both project files).

Total CMS license

• Admin Side project file: open the Admin Core & CMS Core partial and enter the Total CMS license in both Total CMS core stacks.
• Front Side project file: open the CMS Core partial and enter the Total CMS license in CMS Core stack.
• Publish the project file.

Blog setup

• Open the font side project file and go to the blog post page, for example the Blog One page.
• Select the Blog Post stack and enable the Pretty URL and the Show htaccess Rules as shown in the screenshot below.

• Preview the page.
• The Total CMS lightbox will be shown to confirm the path of the blog posts.

• Before confirming the path, select and copy the code (starts with the # symbol) shown at the bottom of the lightbox.
• Once copied, click the Submit button to confirm.
• You can now disable the Show htaccess Rules button from the Blog Post settings.
• Now go to the RW Publishing settings and click the Edit .htaccess File button.

• Paste the code you copied earlier into the text area and click the Save and Upload button.

Just published the project

• Log in to the admin side, and since this will be the first time you log in, you'll need to manually add the text /admin right after your domain URL in your browser's address bar.
• Enter the demo password and you will be on the Dashboard page of the admin side.
• For the first time only, you will need to visit each page of the Things to do first section and fill out all the information.
  It is very important to fill out this data because it is used by multiple elements throughout the website. Some are essential for the proper functioning of the website itself, so I RECOMMEND FILLING THEM ALL OUT.

Once you've entered and saved the data of these pages, to access the admin side again, just click on the padlock symbol in the footer of the front side.

Now you're ready to start entering your content!

BASIC and TOTAL versions

The structure of the pre-built pages on the front-side looks like this:

• Green Pen stacks represent everything related to styles (included the Site Styles stack) and the CMS Core stack (for the Total version project).
• Yellow Pen stacks represent everything that has to do with the interface of the page.
• White Pen stacks represent the real content of the page.

TOTAL version only

With the same concept as the front pages, the structure of the pre-built pages on the admin-side looks like this:

• Green Pen stacks represent everything related to styles (included the Site Styles stack) and the Total CMS stacks (Admin Core, CMS Core and Protect stacks).
• Yellow Pen stacks represent everything that has to do with the interface of the page.
• White Pen stacks represent the real content of the page.

The project core is the partial STYLES COMMON TO ALL PAGES, it contains the Site Styles stack and all other styles.

The styles, within the partial STYLES COMMON TO ALL PAGES, are organized within other Pen stacks based on type.

To quickly show/hide the Pen stack content just select it and then press Shift+H.

Exists also a faster and awesome way to show/hide the contents of Pen stacks (or any other stack), just with double click a stack title: find out how to activate this feature.

At the end of each section of this page there is a box with a dashed green border indicating where to find the styles related to the topics covered in that section.

This section explains how the STYLES COMMON TO ALL PAGES partial is structured so as to understand its logic and be able to better manage all styles. When you open the partial you will find the following Pen stacks inside it which represent the main types of styles of the project:

• SITE STYLES Pen stack, contains the Site Styles stack.

• COLOR SETTINGS Pen stack, contains all styles about colors.

• ELEMENTS Pen stack, contains all styles (except the color styles).

• EFFECTS Pen stack, contains the effects styles (eg. hover effects).

This Pen stack contains the Site Styles stack. Make any changes you want but completely ignore the following style settings:

• Site Colors
  
• Text Colors
  
• Text Sizing

The styles listed above need to be editet inside the COLOR SETTINGS and ELEMENTS Pen stacks.

This Pen stack contains all styles about colors.

• COLOR PALETTE Pen stack is where we need to set all the colors of the project.
  These colors are global, so when you set/change a color, all elements that have that color will be changed globally across the entire project.
  If you are looking to set/change a color, this is where you need to do it.

• ELEMENTS COLORS Pen stack is where we assign the colors (set in the COLOR PALETTE Pen stack) to all elements (eg. text, buttons, tabs, etc.).

In practice, in the first Pen stack (COLOR PALETTE) we create the colors and in the second Pen stack (ELEMENTS COLORS) we assign that colors to the various elements of the project.

This Pen stack contains contains all styles (except the color styles) of each project element. The styles are organized by type of element in additional Pen stacks.

This Pen stack contains the effects styles (eg. hover effects).

Let's say we want to add a yellow background color to a 1 Column stack, here's how:

• Create a new style, simply adding the desired swatch (based on your need) into the Swatches stack.

• Set the background color and enter a class name to the style in the stack settings panel.

• Select the stack you want add the new style, in this case the 1 Column stack.

• Enter the class name in the Custom Classes textarea in the HTML section in the stack settings panel.
  Remember that the class name cannot have blank spaces and start with a number. Use the dash to separate words.

• After adding the class name in the stack settings panel the stack will be displayed with the new style applied.

There is only one type of form in the project, with the following fields to fill: Name, Email and Message.

You can choose the version of the template to use: basic or enhanced.

To use the forms in the Basic version project file you will have to set up each form, specifically enter your data in each Email Action child stacks of each form.

In the Basic version of the project file all forms are set up with basic templates. If you want to use the enhanced version you will have to:

• Open the Enhanced Email Templates project file (you will need the Email stacks).
• Select the page (Admin or User) of the form type (Contact or Subscription) you want to modify.

• Customize the template to your liking, inserting your logo and data.
• Run the RW preview to generate the HTML code to copy.
• Then switch to the Basic version project file and select a page with the form you want to edit.
• In the Form stack, select the Email Action child stack (Admin or User depending on what you customized) and paste the code into the Custom Email text area.

In the Total version of the project file, you will have to fill in all the data on the Forms & Templates page of the admin side before you can use the forms.

If you want to use and edit the enhanced template you will have to:

• Open the Enhanced Email Templates project file (you will need the Email stacks).
• Select the page (Admin or User) you want to modify.

• Customize the template to your liking with your text and graphics.
• Not edit or change the logo URL, it' already set to work in conjunction with Total CMS (you can upload the logo email directly on the Forms & Templates admin side page).
• Run the RW preview to generate the HTML code to copy.
• Then switch to the Total version project file, navigate to the Forms & Templates page and paste the code into the correspondent text area of the form type you want to edit.
• To finish, enable the Enhanced Template by clicking on the toggle button and then click the Save button.

Tag Title:
Select General Settings in the Inspector panel and enter the page title in the Browser Title field.

Meta Description:
Select Meta Tags in the Inspector panel and enter the page description in the Description text area.

Social Tags:
The social tags were not created by directly inserting the code in the text area of the Head section in the HTML Code tab of the Inspector panel.
The following tags have been inserted:

• title
• description
• type
• url
• image.

To edit these tags simply replace the red text (screenshot below) with your own, specifically the part of the text after the word content= in each tag. Make sure the text is always enclosed between the " symbols.

The SEO contents you can manage in the Total version of the project file are the same as in the Basic version, but you can do it directly in the admin side, so you don't have to open RW to change these contents.

You will find the SEO & Open Graph section at the bottom of each page in the admin side.

Social tags:
Select the Open Graph tab to edit the all social tags.

To set up the 404 error page correctly you need:

• Have a page to show (obviously 😀).
• Insert a line of code in the htaccess file.

Once you choose the page (this project offers you more than one) and its URL you have to insert the code in the htaccess file, here's how to do it:

• Go to the RW Publishing settings and click the Edit .htaccess File button.

• The following lightbox will open, so click on the text area and enter ErrorDocument 404 followed by the full path to the page you want to show, like this:

ErrorDocument 404 https://www.clean.rwpro.space/utility/error-404/index.php

• Click the Save and Upload button.

Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.

First of all, to use custom icons you need to set the class for the accordion title into the FontAwesome 5 swatch, in this way:

• Open the STYLES COMMON TO ALL PAGES green Pen stack; then ppen the SITE STYLES Pen stack and select the Font Awesome 5 swatch:

• Make sure to add the accordion-title:before class within the CSS Selector text area. In this way we set the Font Awesome font for the accordions title icons:

• At this point, just go to the Font Awesome site, choose an icon and copy the its Unicode value.
  Make sure to use icons of Font Awesome version 5 only.

• In the Accordions stack settings make sure to enable Use Custom Icons?. Then paste the Unicode values into the "Open" and "Close" fields. Make sure to enter the \ symbol before the Unicode value.
  
• The Use Custom Icons is a global feature, it will change the icons on every Accordion stacks on the page.

The partial is simply a group of stacks with a fantastic feature: if you place the same partial several times on a page or on different pages, for example on pages A, B and C, and then you modify the partial only on page B, it happens that these changes will also propagate on the same partial positioned on the pages A and C.
In practice, by modifying only one partial, all its instances (or copies) that you will have placed in other pages of the project will also be modified.

• Select the stack you want transform in partial and then click the green Partial button at the top left.

• From the stacks settings you can assign Title, Subtitle, Author and Tags. You can also just assign the Title (give it a name that makes sense to you based on its content).
• Use Tags to better organize your Partial Library and divide your partials into groups.

• At this point, you will find the partial just created in the Partials Library.

• To view the Partials Library click the green cubes icon () on the left vertical menu of Stacks.

• Just double click on it, no matter if it is on the page or directly on the Partials Library.
• Make the changes you need.
• Click the blue Back button at the top left to close (and save) the partial.

• First select the partial (the partial must be on the page).
• Click the green Unpack button at the top left.

When you unpack on a partial, the partial simply transforms into a normal group of stacks, and is therefore totally independent from the other instances of that partial you just unpacked on that page.
If you unpack on a partial which is present on several pages, they will not all be unpacked, only the one you have unpacked will become a normal stack group (all other instances will remain as partial).

• Open the project file with partials.
• Drag the partial (or more partials) you need onto the page.
• Select the partial (or more partials).
• Copy them.
• Paste them on the page of the other project file.
• Now you will find those partials also on the Partial library of this other project file.

Partials are well organized, be sure to arrange the Stack Library as follows:

• Click on the Library Settings icon.

• Select Arrange Stacks and then click on the By Tag.

• In this way all partials included in the project are now arranged correctly, sorted and divided by groups (the image is only a demonstration example, the partials in the image may not be part of this project.).