blog-tutorial-post-template

Tutorials

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.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software