Sticky Button Stack. This stack creates sliding tabs that open up and display additional content when clicked. Ideal for adding sticky navigation or forms to any website.

What'sin thedownloadfile?

OUTLINE Theme Info

ANIMATED FULLSIZE BACKGROUNDYou can add as many images as you like with the free HV-Slider stacks or with the snippets in the download file. Add the name of the photos and/or the photographer with or without a link, choose for a transition (fade, slide or carousel slideshow), a speed, a navigation bar and a lot of other options! Optional you can show thumbnails of your images.With the Slider stacks it's really very simple to add your images to the background. The setup for these stacks is dead simple: drop the HV-Slider stack into a Stacks page and drop a HV-Slider Image stack in it for each image. All settings are in the Side Panel. In the download file is a working example.

RESPONSIVEThe 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.

THE MENUOUTLINE has a jquery fading dropdownmenu. Down- and Right-Arrows show the menu-items with sublevels for clear navigation through your website. On your mobile device you'll get a menu icon. Optional you can add Font-Awesome Icons to your menu: (click on the image to enlarge)

THE BUTTON IMAGESThe content is located in this PopUp Panel. When you click on the button image (built-in 3 images, and hundreds of font awesome icons!) in the Open/Close Tab at the left side it shows up. You can add your own buttons too with a small image in the Resources. In the upper left corner of the Content Panel is a Close button.Instead of a button you can add some text in the Open/Close Tab, as you can see on this page.When using Font Awesome 4.0 icons you can even animate them (example).

EXTRACONTENTOUTLINE has five extra content areas: EC1 is at the top left of the browser, EC2 is in the left corner below and EC3 is in the Open/Close Tab. EC4 is in the Content PopUp Panel and EC5 at the right side of the container. You can use these areas for your logo, some text lines, social media icons, snippets (date, time, etc.), stacks (when you use the ExtraContent stack) or whatever.

LOGOThe Logo and the Title have a link with the index.html page of your website. There are more options to place a logo on your website. By default the logo is at the right side of the container, see this example.You can also place your logo or image in one of the ExtraContent areas, for example in the EC2 container..And what about a very big logo in the background? See this example.

CONTENT (POPUP PANEL).By default by pressing the tab on the left side, the content shows up. You can choose between three different speeds: slow, medium or fast. Built-in is an option which opens the content pop-up automatically after switching pages. See image below:

FONT AWESOME ICONSFont Awesome is integrated into this theme. That means you have hundreds of Font Awesome 3.2.1 icons and Font Awesome 4 icons at your disposal, in any color and any size you like. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays. And they are completely free for commercial use.DISABLE PARENT LINKSA common request made by many RapidWeaver users is the ability to disable links in a drop-down menu, but keep the text displayed in the menu and acting as a trigger for sub-pages. Several methods have been devised, but the best one is made by Will Woodgate with his Link-Suppressor scriptThe OUTLINE theme is also equipped with this great tool now! Simple, no stacks needed and reliable. In the Theme Styles > Miscellaneous is a button to disable the parent links.

FLUID IMAGESBuilt-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. This is an example with a tutorial how to do that.

FLUID BACKGROUND-IMAGES or SLIDE-SHOWHave a look at this example with tutorial.

HIDE 'n' SHOW STACK (not included in this theme)When you're showing your photos in large sizes, your visitors might find it annoying that they're covered by the menu and content. Wouldn't it be great to just be able to click it away, so you can view the whole photo? Well, thanks to the Hide 'n' Show-stack by Tsooj Media that is now possible! To show you what I mean, have a look at this page for example: top-left you'll see the link text 'Hide Content' (any text or icon is possible). Clicking this text will beautifully slide the content away, and let your visitors fully enjoy your portfolio. They can bring back the page's content simply by clicking the link once more.This awesome stack is definitely a must-have addition and makes your portfolio and the way you present it truly dynamic. It's not included in this theme but available here.With the plugin Pluskit or with the Global Content stack you can import this stack in any other page.SEARCHBOXThis theme provides built-in support for Nimblehost's RapidSearch plugin. You can put a Searchbox (you'll need the RapidSearch plugin for this) in any ExtraContent container, preferable in the ExtraContent 5 container (example).

WHAT'S IN THE README FILE (MANUAL):1. How to install a theme2. How to add Extra Content area(s) in your RapidWeaver page?3. The Logo and Title have a link with the index.html of your website.4. Add your own background-pattern to the body.5. Add your own background image centered to the body.6. Add your own pattern or image to the Container.7. Add your own pattern or image to the Content Popup Panel (example).8. The Open/Close Tab (image, pattern, icon, word).9. Add text or an image to to the Extra Content 4 area.10. RapidCart (increase the margin-top of the PopUp Content Panel). 11. Container Opacity. 12. Width Sub Menu. 13. Letter-Spacing Title, Slogan, Menu and/or Footer (example).14. Transparancy Sub Menu. 15. Hide the Breadcrumb Container. 16. Underline Links. 17. Title, Slogan, Menu, Blog and File sharing Title Lowercase font.18. Uppercase font to Footer. 19. Hide the dotted line above the Footer. 20. How to change the font size and font weight of the Sidebar Header?21. Wider Open/Close Tab when Title/Slogan/Footer/Menu are hidden.22. Search Box in the Extra Content area. 23. Text Time in the Extra Content area. 24. Date (US and European) in the Extra Content area.25. Mail-A-Friend in the Extra Content area.26. Toggle Content with the Hide 'n' Show stack (example).27. Letterpress effect Title (example). 28. Font Awesome Icons 29. Make your images fluid (responsive) (example)30. How to add a browser-wide background slideshow to your webpage.31. When using the Blow-Up snippets. 32. Codes for the Sidebar header. 33. Extra CSS and more.

The ReadMe is very extended and describes very detailed and with some tutorials how to style your site and how to add images, slide-shows, etc.

ISSUESNot all 3d party plugins and stacks will work with OUTLINE. All built-in plugins work fine with this theme. OUTLINE is jQuery-based and interacts well with other plugins and stacks however, there is always a possibility of conflicts with other JavaScript libraries. Therefore, I always recommend caution when adding them into a page... As I said, some stacks don't work with this theme, such as some slide show stacks, the Montage stack and others. The HV-Slider stacks work fine!With much content you can see a flash on the iPad when opening the content panel. So with a lot of content it is better to use the Scrollpane stacks.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.So please download a free trial version of this theme before you buy it!

BROWSER SUPPORTThis theme has been tested and is OK with all modern browsers: IE7, IE8, IE9, Google Chrome, Camino, Firefox and Safari (for Windows and Mac), and on your iPhone and iPad. But when you don't use the Background Slideshow it even works fine with the (outdated) IE6, although transparent png-images are not supported.Internet Explorer 7, 8 and 9 don't support rounded corners and text shadows and css3 animations. When you use the Infinity Box stack or the El Tint-o stack rounded corners show up with these browsers too. Internet Explorer cannot show the pulsating CSS3 effect in the Open/Close-Tab.

SUPPORTThis theme has many different Theme Styles and Color Options, don’t forget the Miscellaneous part:

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 (OUTLINE thread) and I am sure that I or one of the folks there will help straighten you out enough.

FINALLYDo not overwhelm your visitors with hundreds of pages with photos. Personally I should use this theme within a project made with another theme, just to show your portfolio.

You can use this theme with or without background images.

When you would like to add more content I think the ScrollPane stack (not included in the theme!) is a must have: you can add many content without annoying your visitors. Always enable the button "Automatically Reinitialize" in the ScrollPane Enclosure stack!

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

The Scrollicon Stacks set (not included with this theme!) creates cross-browser CSS skinnable scroller objects to show the content of your RapidWeaver websites. Perfect and very easy to use with this theme.