×
OUTLINE Theme Info

ANIMATED FULLSIZE BACKGROUND
You 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.

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.

THE MENU
OUTLINE 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:
fai_menu (click on the image to enlarge)

THE BUTTON IMAGES
icons
The 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).

EXTRACONTENT
ec_outline_small
OUTLINE 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.

LOGO
The 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:

opening

FONT AWESOME ICONS
Font 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 LINKS
A 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 script
The 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 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. This is an example with a tutorial how to do that.

FLUID BACKGROUND-IMAGES or SLIDE-SHOW
Have 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.

SEARCHBOX
This 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 theme
2. 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.

ISSUES
Not 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 SUPPORT
This 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.

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

flexible

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.


FINALLY
Do 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!

ALL THEME STYLES
Go to this page to see all Theme Styles.

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

/