1LD Tutorials & Blogs

Tutorials

Extra-Content

Step 1: Navigate to the Sidebar Tab of the Page Inspector.

Page inspector sidebar tab

Step 2: Copy and Paste the code below into the text area.

<div id="myExtraContent1">
     Extra-Content above main content Here
</div>
<div id="myExtraContent2">
     Extra-Content below main content Here
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4: Add your desired content to each section. Highlight everything between

<div id="myExtraContent1">

and

</div>
1
 

& select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 5: Preview and you are complete. Your finished code in the Sidebar should be similar to the screen shot below.

Extra content in sidebar

Slider Images

Step 1: Add all the images you want to use to the Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML Header Section of the Page Inspector.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

<div data-src="%resource(IMAGE1.jpg)%" data-fx="simpleFade">
  <div class="camera_caption fadeFromBottom"> 
    Caption here 
  </div> 
</div>

Step 4: Change “IMAGE1.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 5: Change “Caption here” to your desired caption or delete the text below if you wish not to display a caption.

<div class="camera_caption fadeFromBottom"> 
  Caption here 
</div>

Step 6: Repeat steps until you have as many photos you want to display in the slider, preview and you are complete. Your finished code in the Header-Header section should be simular to the screen shot below.

Cinema Slider Code

Slider Transitions

Step 1: After you have added images to your slider, change the data-fxvalue to one of the values below.

‘random’

‘simpleFade’

‘curtainTopLeft’

‘curtainTopRight’

‘curtainBottomLeft’

‘curtainBottomRight’

‘curtainSliceLeft’

‘curtainSliceRight’

‘blindCurtainTopLeft’

‘blindCurtainTopRight’

‘blindCurtainBottomLeft’

‘blindCurtainBottomRight’

‘blindCurtainSliceBottom’

‘blindCurtainSliceTop’

‘stampede’

‘mosaic’

‘mosaicReverse’

‘mosaicRandom’

‘mosaicSpiral’

‘mosaicSpiralReverse’

‘topLeftBottomRight’

‘bottomRightTopLeft’

‘bottomLeftTopRight’

‘bottomLeftTopRight’

‘scrollLeft’

‘scrollRight’

‘scrollHorz’

‘scrollBottom’

‘scrollTop’

Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Single Image Banner

Step 1: Add the image you want to use to the Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML Header Section of the Page Inspector.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

1
<img alt="Banner" src="%resource(IMAGE.jpeg)%" />

Step 4: Change IMAGE.jpeg to match the name of your resource.

Preview and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below:

Just Vector Glyph Chart

Step 2: Type the corresponding letter or number into your desired location.

Step 3: Highlight your letter or number and select the Add Link button.

Add Link Button or  Stacks add link

Step 4: Type in the URL to your social media page & add a new Custom Attribute Named: class with the Value: social

social media link

Click Set Link and you are done!

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

Super Forms 2 – 1.2.0 Update

Through customer feedback, we were able to add some new features and fix a few bugs with our Super Forms 2 stack. Check out the list of changes below. This update is free for those who own the Super Forms 2 stack. 

Super Forms 2 (Version 1.2.0)

  • NEW: You can now customize each field’s Required/Invalid input message
  • NEW: Customize checkbox true and false values (“Yes” and “No”)
  • NEW: Customize file upload error messages
  • NEW: reCAPTCHA now has an option to support non SSL (http) websites
  • NEW: Support for v2 invisible reCAPTCHA
  • NEW: Support for v3 reCAPTCHA
  • NEW: Set a specific locale/language for reCAPTCHA
  • NEW: Allow the form to submit to Google Sheets and an email address at the same time
  • NEW: Optionally customize the name of each field for Google Spreadsheets and the titles as shown in the sent message
  • Improved: Prevents notices for empty form fields from displaying in PHP logs
  • Improved: Date timezone defaults to UTC in case the server does not have a default defined timezone
  • Fixed: Bug that could stop attachments from being sent properly
  • Fixed: File upload field was rejecting files if the extensions had capital letters
  • Fixed: Bug that could cause attachments to arrive with 0kb file sizes
  • Fixed: Multi select now properly concats selected options
  • Fixed: Checkbox display bug in iOS Safari
  • Other minor bug fixes 

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

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

RapidWeaver is a trademark of Realmac Software