Home

This is the Tabs theme

The responsive TABS theme is different from the usual RW themes. Actually it is a 'one-page website'.

The Menus

By default there isn't a menu. Design your own responsive menu with the supplied Tabs stack, there are different looks in the Theme Styles. It 's really dead simple and everything is in the download file. Creating a link between tabs is possible, go for example to the Contact page.
Your slide show (built-in) isn't interrupted when you click on a menu-item. And loading is very fast.

When you prefer a 'normal menu which uses Rapidweavers Menus System, click on the button 'Built-In Menu'. Now a menu-button shows up with a one-level menu. See this page or this one.

With the responsive AltTabsMenu by Marathia stacks  you'll get the same lay-out and look of the Tabs stacks above, but with (optional) a submenu.
So you can choose between different menus, or combine them one one page.

EXAMPLES
THEME INFO

Examples

Examples speak louder than words, so please check out some demo pages:

Page 1 (Menu with only FontAwesome Icons)
Page 2 (Menu with Icons + Text)
Page 3 (Menu with Icons + Text)
Page 4 (Accordion look)
Page 5 (Menu with Icons + Text)
Page 6 ('Photo Album')
Page 7 ('Photo Album' with thumbnails)
Page 8 (AltTabsMenu Stacks)
Page 9 (Semi-Transparent Menu Tabs)
Page 10 (Transparent Menu Tabs with border)
Filesharing (with the built-in Menu Button)
Blog (with the built-in Menu Button)
PhotoAlbum (with the built-in Menu Button)
PhotoAlbum (with the built-in Menu Button)
PhotoAlbum2 (AltTabsStacks)
Weaverpix (with the built-in Menu Button)

Or download  a free trial version of the theme (some options are disabled), install theme and stack and find out how fast you have created a website!

Theme Info

The Scroll Pane Stacks* set (not included with this theme!) creates cross-browser CSS skinnable scroller objects to show the content of your RapidWeaver websites. You need the Stacks2 plugin for this.
Stacks are not included in this theme.

THEME INFO

RESPONSIVE

The Internet isn’t just on your computer screen anymore. It’s also on your phone, tablet and laptop. So when you visit a modern webpage the content responds to the device on which it is being rendered. To see it in action, open this page on a desktop browser and slowly make the browser thinner and wider... Or have a look here.

MENU

TABS has a one-level menu. You can select 6 different looks in the Theme Styles.
This theme is, amongst others, developed from the idea to have a slideshow that isn't interrupted by clicking on a menu item that leads you to a new page.
That's why this theme is built differently than the usual RW-themes. If you open an existing project you will notice that you won't see any menus.
When you prefer a menu as in other themes, just click on the button "menu built-in". With this option a one-level menu appears with a menu button in the upper right corner of the container (example). This maybe useful when you use a blog-page or whatever. You can enable both too (example). Or use another menu stack.*
You can make links between tabs.

*When you prefer a 'normal' menu with a submenu drag the AltTabsMenu stacks by Marathia Stacks into a Stacks page. This stack uses Rapidweavers Menus System and is displayed in the ExtraContent 3 area. With this responsive stack you'll get the same lay-out and look of the Tabs stacks above (example 1, example 2).
And another option is the responsive One-Level-Menu stack by DeFligra. This stack also uses the Rapidweavers Menu-System.

The possibilities are almost endless with this theme.

BACKGROUND IMAGE, SLIDE SHOW or VIDEO

Making a link between different tabs is really simple. Read Chapter 2a of the manual.

LINK BETWEEN TABS

With the TABS-stack (included) you've added a slide show or background image to your webpage in a few seconds! Or even a YouTube video background.

IMPORTING PAGES

Importing pages in another page or into the Tabs stack is very simple with the Pluskit plugin or with the Global Content Stack.
• On this page I have imported a Contact page with the Pluskit plugin.
• And the SiteMap plugin is imported with the Global Content stack on this page.
Here I've imported a PhotoAlbum page with the Global Content stack.

EXTRACONTENT

The theme has up to 5 ExtraContent areas that allows the user to add more content then RapidWeaver typically allows. These areas can be used for text, an image, social media icons (with the built-in font-awesome icons), some stacks (for example the Hide 'n' Show stack), date and time, etc.

LOGO

The Logo and the Title have a link with the index.html page of your website. By default the logo is at above the Title/Slogan, when enabled in the Theme Styles > Miscellaneous > Show Logo.

FONT AWESOME ICONS

The TABS theme has built-in an option for 302 Font Awesome icons, any color or size is possible. You can use these for the menu-items (see this example), social media icons or whatever. Read the Manual.

FLUID IMAGES

Built-in is an option to make your images fluid, whether they are in the content or in the sidebar. Very simple. Only add the text flexible in the input field of the Alt Tag in the Media Inspector.

WHAT'S IN THE MANUAL

Click on the button Theme Styles > User Manual to open the manual.
1. How to install a theme.
1a. Applying Custom CSS Code.
2a. Create a link to another tab
2. Add a Menu with the TABS stack.
3. The Title and Logo have a link with your website.
4. Position of the Logo.
5. Fluid images with the flexible tag.
6. Content (Semi)Transparent.
7. Add a Background Pattern to the body, container or content.
8. TABS Menu: add a Slide Show to the body with the TABS Slideshow stack.
9. TABMATE Plugin: add a Slide Show or Image to the body.
10. Underline Links.
11. Importing a Contact page.
12. Importing a Blog page.
13. Searchbox.
14. TextTime script.
15. Date (US and European) script.
16. Mail a Friend script.
17. ExtraContent.
18. Issues with stacks, plugins, etc.
19. More CSS (text Shadow, Letterpress, Bold menu titles, etc.).
20. Font Awesome Icons:
        Start with your first FontAwesome Icon.
        Size of the FontAwesome Icons.
        Color of the FontAwesome Icons.
        Add a Letterpress effect or shadow to your FontAwesome Icon.
        Add a link to your FontAwesome Icon.
        Multiple icons.
        Each icon a different color.
        Icons with text.
21. Tutorials.

The ReadMe is very extended and describes very detailed and with some tutorials how to style your site and how to add images, background patterns font-awesome icons, etc.

ISSUES

This theme works fine with Rapidweaver 4 and 5+, but NOT with all plugins and stacks. When you have questions about this theme feel free to post them on the RapidWeaver Forum (preferrable), or drop me an email.
When you have questions about or issues with stacks or plugins (so not theme-related questions) please post them on the RW forums or send their developers an email. Importing plugins or stacks into the content of a tab is not always possible. But you can import them in an ExtraContent area or in the sidebar. When a stack doesn't work with this theme, then this is caused by a conflict with the scripts used in this theme. I'm sorry, but I cannot solve this.

Almost every day new stacks are released and I haven't test them all. So I cannot guarantee that every stack will work. The RapidWeaver Central website shows all available stacks.

BROWSER SUPPORT

This Rapidweaver theme has been tested and is OK with these browsers: IE8, IE9, Chrome, Camino, Firefox and Safari (for Windows and Mac), and on your iPhone/Android and iPad/tablet. With IE7 the Tabs Titles display as an Accordion.

SUPPORT

Before sending me questions, please try all options, so you can see what opportunities this theme provides.

The Manual is very detailed. Read this very carefully before you send me questions. If your troubles are not exclusive to my theme or if you think the issue might be a software concern, please do a search on the Realmac Software forum first.

But you can also post your questions on the Realmac Software forums (HV-TABS thread) and I am sure that I or one of the folks there will help straighten you out enough.

WHAT's IN THE DOWNLOADFILE

• HV-TABS theme
• HV-TABS stack (menu and slideshow) (you need the Stacks2 plugin for this!)
• ExtraContent snippets
• Example project

buy_small2

FREE TRIAL VERSION

Download the free trial version and play around with all of its options.

Stacks are not included in the theme!
Stacks are designed for use with RapidWeaver and the Stacks2 plugin

Columns

Column 1

The Responsive Layout stacks replace the out of the box 2, 3, 4 and 5 column stacks for responsive based themes. The columns will break at customizable points so that your content looks good on all browsers from the desktop to the iPhone. There is a 5th stack in this set that will allow you to show or hide content based on the browser size.

Column 3

Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing.

Column 2

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Felis aliquet egestas vitae, nibh ante quis quis.
Lorem ipsum dolor sit amet.
You need the Stacks2 plugin for this. Stacks are not included in this theme.

Contact

Back to the Home page
Fill in the form below to send me an email.

*


*


*


*




I've imported the built-in Contact page with Pluskit (instead of this plugin you can use the Global Content stack too). Read the Manual about importing a Contact page.

The PlaceHolder stack makes is possible to populate form input fields in a built in RapidWeaver contact form with example text that disappears on focus. Optionally, you can hide the labels to create a minimalistic, cleaner form.

With this stack, you can also remove that useless reset button. When you select this option paste this in the Custom CSS too:
input[type="submit"], input[type="submit"]:hover {padding: 0;}

You need the Stacks2 plugin for this. Stacks are not included in this theme.

Image

flexible

FLUID IMAGES

Built-in is an option to make your images fluid, whether they are in the content, a Tabs- stack, the sidebar or ExtraContent (anywhere in your page). How to do this (read Chapter 6 of the Manual):

Option 1:
Drag your image in the stack, EC, content or sidebar, double-click on it or select it and go to RW > View > Show Media Editor. Now the Media Editor shows up. Only add the word flexible in the input field of the Alt Tag in the Media Editor or in an image stack.
To see it in action, open your webpage on a desktop browser and slowly make the browser narrower and wider... Or have a look on your iPhone or iPad.

Option 2:
When your image is on the server, simple copy&paste this in the content or sidebar as plain text:

<img src="http://www.website.com/images/image1.jpg" alt="flexible">

So, with alt="flexible" behind the image link. Replace the name of the image with the name your own image.
Test a working example in your website and have a look in preview.

FreeStyle

  • Stacks Image 162
  • Stacks Image 165
  • Stacks Image 166
This is an example of the FreeStyle Responsive slide show stack by Will Woodgate.
*You need the Stacks2 plugin for this. Stacks are not included in this theme.
At the bottom right side of the window is an example of the Hide 'n' Show stack by Tsooj media. I've put it in the ExtraContent1 area. When you're showing your photos/video "full screen", your visitors might find it annoying that they are covered by the menu and other content elements. With this stack they are able to Hide and Show the content with a simple click. You can use an icon, an image or just a few words (example).