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 “Percept”).

1. Create a new RapidWeaver project and click the “Add” button in the top left of the RapidWeaver window.
2. Select the Stacks plugin to add a stacks page.
3. Next, click the “Themes” button in the top left of the RapidWeaver window and select the theme titled “1LD Modular”.
4. Add a Stacks plugin page by clicking the plus icon in the top left of the RapidWeaver window.
5. 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.
6. In the General settings menu scroll to the bottom and click the button titled “Advanced…”.
7. Change the “Default Extension” from “html” to “php”.

   

   Note: RapidWeaver 8 moves the advanced options to its own tab now found beneath the General tab.

   

8. Add 2 more Stacks plugin pages.
9. 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.
10. 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.
11. Uncheck the option “Show in Navigation”. This module is only a piece of your website and should not be linked to inside your navigation.
12. 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.
13. In the “Filename” field change the value from “index.html” to “header.php”.

    

14. Open your Stacks library and add the “Percept Theme” Stack to the editor. You header is now set up and ready to be customized. Next we need to create the footer.
15. 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”.
16. Open the page inspector.
17. In the general setting stab uncheck the option “Show in Navigation”.
18. Delete the text from the “Folder” field. RapidWeaver will give you a “Possible Page Conflict” warning again.
19. 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.

Theme settings

Banner / Background

Background – Change the background image or color. Images will stay fixed in position while the content scrolls into view. When the image is not tall enough to fill the device or browser window it is being view on, the image will fade out towards the bottom.

Background Filter – Apply an optional filter over the top of the background image or color. These filter help mask the quality of stretched out images, especially useful when you want to use lower quality images to speed up website load time.

Filter Opacity – Adjust the strength of the background filter.

Banner – Enable or disable the content section above page content. When the Banner is on it will match the height of whatever stacks content you add unless you set it to “On – Full Browser Height” which will center your stacks content and force the banner to take up the height of the browser window.

Menu / Header

Logo – Enable or disable a logo section that appears above the menu in the Header section.

Disable Parent Pages – Pages that have sub-pages will not open when clicked the menu. When click, a submenu will show instead.

Background – Select a transparent white or black background for the header/page content section.

Bg Opacity – Change the opacity of the header/page content background.

Bg Blur – Set the intensity or remove a blur effect for the header/page content background.

Flatten – Enable to remove the details and shadows from the header/page content background.

Content

Header/Text Font – Select a font or optionally use a self loaded font by selecting “Custom”. The “Custom – Google Font” will allow you to type in any Google Font by name and the theme will automatically load it in and set it to the Header font or text font.

Custom Colors – Optionally enable custom colors for the content.

Previewing your theme style changes

Changes to the theme styles are all made inside of the Header module/page. Once you add the Percept theme stack to the stacks page, you can edit the styles through the stack’s settings panel. To preview your changes you can simply switch to preview mode while still viewing the header module/page. If you have more than one Percept theme stack inside the Header module (Using the Condition stack to show different themes on different pages), the theme stack located at the top of the stacks page is the one that will show during preview. You may also click on any page to preview your changes.

Refreshing/Loading the modules

The Header and Footer modules need to be generated when you preview a page inside or through RapidWeaver in order to show any content from those modules. By default (Modular theme v1.1.0+), every time you preview your page, the Modular theme will automatically check if the modules have been generated and will also check for changes made to the modules and load them. This loading is only necessary for previewing your site, once uploaded to a web server thats supports PHP, the modules will instantly and automatically load your latest changes.

There is a setting to change the preview mode loading behavior in the Master Style > Page Inspector > Theme styles or the “Master Style” settings section. Set it to “Display reload button” and the modules will only generate or reload if you click a special onscreen button. Set it to “Never reload” if you do not want the modules to load in preview mode unless you have previewed the module separately.

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.

Load the page with the slider collapsed

Setting the banner option to “On” will make the slider collapsed on page load.

Create a custom expand/collapse slider link or button

After applying a link or setting a link with a button, add a custom attribute with the name “class” and the value “show-hide-slider”. Whenever this link is clicked, the slider will either collapse or expand depending on the current state.

Using Google fonts

You can use any font found at https://fonts.google.com/ with this theme. After adding the name of the font you want to use, Modular will automatically load the necessary files to display the font with no additional setup.

1. Select “Custom – Google Font” in the theme settings for either the Header Font or Text Font options.
2. In the “Font Name:” field type or copy and paste the name of the Google Font you want to use. Note: This value is case and space sensitive.