blog-tutorial-post-template

Tutorials

cleanBinders

Adding Font Awesome to Individual Binder Tabs

If you prefer not to add the same Font Awesome icon to all the Binder Tabs, but prefer to assign unique icons to each individual tab then do not select “Font Awesome On” in the customization options, but rather manually install Font Awesome and insert into the Binder Tabs manually (the next 2 steps).

Step 1. Install Font Awesome as outline in this tutorial.

Step 2. For step 5 place the HTML code inside the Binder Tabs text.

Definition of Terms

General Controls

  • Theme: Folder Tabs, Detached Tabs, Contained Tabs, Minimalist Thin. Controls the general theme/look of the stack. Depending on the selected theme some options may not be available or may not have an effect.
  • Binder Tab Width: Default, Small, Large, Largest. Controls the size of the tabs in comparison to the main content area, so the large setting will create a larger tab, but respectfully a smaller content area.
  • Font Awesome On. If turned on you will activate font awesome’s use in the stack’s tabs, though Font Awesome must be installed separately. A tutorial on how to install Font Awesome can be found here.
    • Right Side. This option places the Font Awesome Icon on the right hand side instead of the default left.
    • Font Awesome: Use this field to select the Font Awesome Icon, you can ignore the ‘icon-‘ part.
  • Tabs on Right Side. Turning this on will move the tabs to the right hand side instead of their default placement on the left.
  • Tab Text on Right Side. By default the text is aligned to the left, though selecting this option will have the text align to the right.
  • Tab Count: By default is 4, though can range from 1 – 20.
  • Tab Font Size. Controls the pixel size of the tab font.
  • Content Font Size. Controls the pixel size of the content font.
  • Border Radius. Controls the roundness of the corners (zero turns it off)
  • Tab Margin. Controls the spacing between the tabs.
  • Tab Line Height. Controls the size of the line height in the tabs.
  • Animate On. If this option is active you can control the next option, which is the speed of the animation. Otherwise, tab content will be displayed immediately on click with no animation.
    • Animation Speed: Normal, Slow, Fast. Basic speed options (Normal = 400 millaseconds (ms), Flow = 600ms, Fast = 200ms).
  • Static Height On. This option allows the user to control a set height for the stack. Otherwise, the height will adjust depending on the content.
    • Static Height: Sets the pixel height of the stack.

Background Color Controls

  • Tab Gradient On. Turns the gradient colors and controls on.
    • Gradient Fade Out. Controls the percentage the gradient ranges across the tab.
  • Tab Transparency. Turns the background color off for the tabs.
  • Content Transparency. Turns the background color off for the content area.
  • Main Background. Background color for the main content area and the active tab in the ‘Folder Tabs’ theme.
  • Active Tab. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab. This option has no effect when the gradient is turned on.
  • Active Tab Hover. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab when hovered over. This option has no effect when the gradient is turned on.
  • Inactive Tab. Background color for any/all inactive tabs.
  • Inactive Tab Hov. Background color when inactive tabs are hovered over.
  • Active Gradient. The gradient color for the active tab.
  • Inactive Gradient. The gradient color for the inactive tabs.
  • Active Tab Fade. The color the gradient fades into for the active tab.
  • Inactive Tab Fade. The color the gradient fades into for the inactive tabs.

Border Color Controls

  • Border Transparency. Turns the borders off.
  • Subtle Tab Embed On. Turns on the inner border that has a slight ’embed’ appearance to it. The color option that is made available when this is turned on will not have any effect in the ‘Folder Tabs’ theme (uses background color from the content section).
  • Main Border. Sets the color for the main border of the stack.
  • Inactive. Sets the border color for inactive tabs.
  • Inactive Hover. Sets the border color for inactive tabs when hovered over.
  • Embed Color. Sets the subtle embed color for the ‘Contained’ & ‘Detatched’ Tab themes.

Text Color Controls

  • Inherit Text Styling. Turns styling for text in this stack off.
  • Inherit Link Styling. Turns styling for links in this stack off.
  • Active Tab Text. Color for the text inside the active tab
  • A Tab (Hover). Color for the text inside the active tab when hovered over.
  • Inactive Tab Text. Color for the text inside inactive tabs.
  • I Text Hover. Color for the text inside inactive tabs when hovered over.
  • Content Color. Color of text in the content section.
  • Content Links. Color of links inside the content section.
  • C Links Hover. Color of the links inside the content section when hovered over.

Advanced

  • Collapsible. If selected this makes the content section able to be completely collapsed. Otherwise, one tab must always be active.
  • 1st Active Tab. By default this is set to the first tab, though if you prefer to have a tab other than the first active when the page is loaded you can change it to any of the others.

Quick Links

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

  • Posted On

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