blog-tutorial-post-template

Tutorials

Setup

Note: This tutorial assumes that you a familiar with HTML, CSS, and how to use RapidWeaver Stacks.

1 – To get started, you will need to set the RapidWeaver project’s theme to “HTML Body Blank”. This theme was specifically made for use with the HTML Body Stack and will give you access to the <head> and <body> elements. This theme also serves as a truly blank canvas to start your projects. If you want to use the HTML Body Stack inside of a different theme you can skip this step, however you will not have access to the <head> and <body> elements if you do so.

2 – Drag and drop the HTML Body Stack into the editor. The “Mode” option found in the settings panel is set to “HTML Body Blank Theme” by default. If you are using the Stack inside of another theme change this value to “Other 3rd Party Theme”.

This Stack is separated into 3 main sections: “<head>”, “<body>”, and “before </body>”. Each section has a blue button to add their respective elements.

3 – Add all of your project files (css, js, images) to your Resources section found in the Source List to the left of the RapidWeaver window.

4 – Now we can use the “<head>” and “before </body>” sections to create links to those files. Click the blue button in either section to begin adding a link. Select the element that pops up and in the settings panel, set the “Element Type” to either “Link” or “Script”.

Note: This Stack includes a few CDN (content delivery network) hosted libraries that you can add quickly by changing the “Resource” value. You can also add IE conditional comments around the specific links if you need to target specific old versions of Internet Explorer with the “IE Conditional” option.

5 –  Leave the “Resource” option set to “Custom” and click on the “Set Link” Button. In the link dialog window that opens up locate the file you wish to link to and click “Set Link”.

6 – Repeat Step 5 until you have linked all of your necessary files.

Note: The “<head>” and “Before </body>” sections have editable areas below the blue buttons. You can use these areas to type or paste any HTML, CSS, or Javascript you need added to your project.

7 –  To begin creating a project, just click the blue button in the “<body>” section of the Stack. This will automatically add a new HTML Element Stack. You can also manually add HTML Element Stacks by dragging them in from the Stacks’ Library.

8 – Each HTML Element Stack has it’s own settings panel where you can change the Element Tag, add classes, or add custom Attributes (IE you can add an ID by typing in id=“someID” into the “Attributes” field).

9 – By default, the “Type” of each HTML Element Stack is set to “Element With Stack Content”. This allows you to nest other HTML Element Stacks or other 3rd party Stacks inside. If you need to type in text or HTML directly into the element change it to “Element With HTML Content”. You can also remove the element all together and just add text or HTML by selecting the last option “Non-wrapped HTML”.

This concludes all you need to know to get started on your project. For a further breakdown on what each of the settings do see the “Settings Panel” section below.

Settings Panel

HTML Body

Mode – “HTML Body Blank Theme” must be used when the RapidWeaver project’s theme is set to “HTML Body Blank”. This will give you full access to the “<head>” and “<body>” elements. If you are using the Stack simply as an HTML section inside of another theme set the value to “Other 3rd Party Theme”.

Body Attributes – You can optionally add custom attributes to the <body> tag. Declare the attribute name followed by and equals sign (=) and the attribute value surrounded by single or double quotation marks (“ or ‘).

Editor Theme – By default, the HTML Body Stack shows in the Stacks editor as 3 labeled and separate tab sections. You can change this value to either “Dark HTML” or “Light HTML” to make the editor have more of an HTML text editor style of appearance.

Font Size – Adjust this value to increase or decrease the size of the HTML tag labels in edit mode.

HTML Resource

Element Type – Choose “Link” if you would like to create Stylesheet links and “Script” if you wish to link to javascript files. There is also and option for creating custom Meta tags.

Resource – Leave this option on “Custom” if you need to link to a resource found in your RapidWeaver Resources section. You can also choose from any of the included CDN (content delivery network) hosted libraries instead.

Custom –  This is were you can add the link to the resource. Note: this option is ignored if you have chosen a CDN library in the “Resource” option.

IE Conditional – Though older versions of Internet Explorer are being fazed out, you can use this option to add a conditional comment that will allow the linked resource to only load in specific older versions of Internet Explorer.

HTML Element

Type – By default, the “Type” of each HTML Element Stack is set to “Element With Stack Content”. This allows you to nest other HTML Element Stacks or other 3rd party Stacks inside. If you need to type in text or HTML directly into the element change it to “Element With HTML Content”. You can also remove the element all together and just add text or HTML by selecting the last option “Non-wrapped HTML”.

Element Tag – Accepts any HTML tag value.

Classes – You can add multiple classes each should be separated by a space. These classes will also show up in the editor to help you locate and identify sections of your code. When the element is selected, the classes will also show near the </> close tag.

Href – Only visible when the “Element Tag” is set to “a”. Allows you to create a link using the RapidWeaver link dialog window.

Src – Only visible when the “Element Tag” is set to “img”. Allows you to select an image using the RapidWeaver link dialog window.

Alt  – Only visible when the “Element Tag” is set to “img”. Allows you to quickly edit the alt value for an image.

Attributes – Add custom attributes to the element. Declare the attribute name followed by and equals sign (=) and the attribute value surrounded by single or double quotation marks (“ or ‘).

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

Live Search 2

Live Search 2 has been updated with new features, improvements, and important bug fixes – all designed to make your site’s search experience even faster and more precise.

This update is free and automatic for all existing customers.

Don’t own it yet? Now’s the perfect time to jump in — Live Search 2 is 30% off for a limited time! No code needed — your discount is automatically applied at checkout.

New Features:

  • Added support for exact match searches using quotation marks around parts of a search phrase.
  • New option to show a “Clear Input” button.
  • Added Replace Character feature.
  • Now supports two separately defined search bars on the same page.
  • New option to adjust z-index.

Improvements:

  • Index file generation now detects and ignores duplicate content, such as text found in every page header and footer.
  • If any pages are missing from the index file, they will now still be searched dynamically.
  • Index file data is now compressed to reduce file size.
  • Pages at https://website/folder/index.(php|html) and https://website/folder/ are now treated as duplicates and will not be indexed separately.
  • Search results container height now only stays fixed during pagination — it will shrink dynamically for new searches.
  • When searching custom sitemaps, the default sitemap will now be ignored.
  • The popout search results container will now automatically hide when the search input is empty.

Bug Fixes:

  • Fixed an issue that prevented custom text/language settings from applying correctly.
  • Fixed a bug where result descriptions could fail to display a local section title.
  • Fixed a bug that could trigger an error if suggestions were enabled but the stack was not published to the page.
  • Prevents form submission before the page is fully loaded, avoiding unwanted page refreshes on slow-loading pages. A loading indicator is shown until the page is ready.

Check it out in action!

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

RapidWeaver is a trademark of Realmac Software