Diagrams

Edit Mode

Preview Mode

Setup

There are two options for starting a new project with a modular theme. 1) You can open the pre-setup starter file included when you download the product, or 2) you can follow the steps below to setup the project up yourself. The tutorial below is also good if you just want to set up a blank project using the modular theme (without the use of a Theme stack like “Splash”).

1. Create a new RapidWeaver project and click the “Themes” button in the top left of the RapidWeaver window.
2. Select the theme titled “1LD Modular”.
3. Add a Stacks plugin page by clicking the plus icon in the top left of the RapidWeaver window.
4. The Modular theme uses PHP to create and display the header and footer modules, so PHP needs to be enabled on every page. In the left side of the RapidWeaver window, click to the right of the title “Settings” to show the more options below it then click the “General” option.
5. In the General settings menu scroll to the bottom and click the button titled “Advanced…”.
6. Change the “Default Extension” from “html” to “php”.

   

7. Add 2 more Stacks plugin pages.
8. Click on the second page in the left side of the RapidWeaver window under the heading “Pages”. This page is most likely called “Untitled Page 2” at this point. Rename it by clicking on the title once and typing in “Header”. This page, what we call a “Module”, will be like a partial that represents your header area and is where all of the theme design will be placed.
9. Open the page inspector found in the top right of RapidWeaver, identified by a “i” icon. The general settings tab will be open by default.
10. Uncheck the option “Show in Navigation”. This module is only a piece of your website and should not be linked to inside your navigation.
11. This module should be located in the root of your website and should not have a folder path, to set that up, delete the text from the “Folder” field. RapidWeaver will give you a “Possible Page Conflict” warning, click “ok” as we will be removing the conflict in the next step.
12. In the “Filename” field change the value from “index.html” to “header.php”.

    

13. Open your Stacks library and add the “Splash Theme” Stack to the editor. You header is now set up and ready to be customized. Next we need to create the footer.
14. Click on the third page in the left side of RapidWeaver under the heading “Pages”. This page is most likely called “Untitled Page 3” at this point. Rename it by clicking on the title once and typing in “Footer”.
15. Open the page inspector.
16. In the general setting stab uncheck the option “Show in Navigation”.
17. Delete the text from the “Folder” field. RapidWeaver will give you a “Possible Page Conflict” warning again.
18. In the “Filename” field change the value from “index.html” to “footer.php”.

    

Both of your modules are now properly set up. You can adjust the theme styles by navigating to the Header and clicking on the theme stack to see your options. The rest of your project will function just like a traditional theme.

Important: If you are publishing your website/project into a sub-folder (e.g. website.com/folder), you will need to list your “Web Address” with the subfolder included when RapidWeaver prompts you add it. If you need to change your Web Address you can find it in the General Settings menu.

Refreshing/Loading the modules

Preview mode does not load the header and footer modules automatically. When you first activate preview mode, you can click on the blue “Load Partials” button in the bottom right of the preview window to load them in. The do not need to be reloaded until you close the project and re-open it. However, when you make changes to the header and footer modules they will need to be refreshed to reflect the changes. To do this, click the blue “Refresh Partials” button in the bottom right of the preview window. Note this only needs to be done when previewing changes made to your header and footer and only in RapidWeaver’s preview mode.

There is also a setting to change this behavior in the Master Style > Page Inspector > Theme styles. Set it to “Automatically reload” to have it always reload the modules or set it to “Never reload” if you do not want the modules to load in preview mode.

Note: These options only effect the RapidWeaver Preview mode.

Section Stack

The Section Stack can be used to set custom content widths, custom colors, and allow you to insert full width content like images, sliders, and quotes. Typically it’s best to place all of your content into these Section Stacks. You may also use the “Extra” settings to add custom IDs or Classes for CSS and Javascript purposes.

• To change the content width select an option from the “Content width” setting. You can declare a custom width or set it to full width.
• To change the text colors select “Custom” in the “Colors” setting. This will allow you to change the Header text, paragraph text, and link colors.

Condition Stack

Anything you place in a header or footer module will appear on every page of your website. The Condition Stack allows you to set specific content to only display on one or more pages that you define. This Stack can only be used in the header and footer modules.

1. After adding the Stack to your header or footer, place the content you want to display on a specific page inside it.
2. In the Stack’s menu click on the “Show” setting to reveal 2 options.
3. If you wish for the content to display on a single or multiple pages, select the option titled “Only on these pages”. Create a list of the pages you want the content to display on using commas to separate each title. The titles are not case sensitive but should be spelt just as they are in the left side menu of RapidWeaver under the “Pages” heading.
4. Alternatively, If you wish to display the content on all but one or multiple pages, select the option titled “On all pages except these specific pages”. Create a list of pages you do not what the content to display on using commas to separate each title. The titles are not case sensitive but should be spelt just as they are in the left side menu of RapidWeaver under the “Pages” heading.

Important: If you have changed the “Browser Title” in the Page Inspector > General Settings tab, you will need to use that as the page title instead of what it is listed as under the “Pages” heading.