Rapid Ideas

where rapidweaver magic begins

Gothic Theme V3

gothic icon

A kind of three column layout: navigation - content - sidebar. The gothic theme comes with many different background images to enrich your site. And it is so easy to set them up: you can use the included image admin utility to place the images you like. A very flexible theme centering around this three part layout idea, which also gave the name to it: gothic.


Gothic V3 is out with many features added!

The gothic theme itself was always OK. It was my second theme I ever developed for RapidWeaver. And now, I thought it is time for a BIG update, which makes the theme as clean and feature-rich as all my other themes. Have a look at the feature list below and you will find many lines starting with NEW. In general I rewrote the core basis for great flexibility that works cross browser without a lot of javascript hacks. It took me days - or better weeks - to get it where I wanted it. But finally it's right here.

Features Overview

  • NEW: Add your own custom sidebar and navbar background images (up to 5)
  • NEW: Add your own custom pageHeader and body background image
  • NEW: Define where you want your body image be placed and how it is repeated
  • NEW: 12 different Layouts to choose from (6 fixed widths and 6 with variable widths)
  • NEW: Add nice borders with different widths (1px, 2px, 4px, 8px) in a custom color
  • NEW: Disable the sidebar if you don't need it
  • NEW: Let a nice border and background be drawn automatically if you want to
  • NEW: Choose between 3 overall font sizes
  • NEW: Navbar Text Align: Left/Right
  • NEW: Added Custom Colors for the navbar items (including active, hover states)
  • NEW: Added switches for several layout container transparencies to let the body background image show up in these parts of the layout
  • Custom Colors available for many parts of the layout (body, border, navbar, content, ...)
  • Greybox included for cool Web 2.0 effects
  • 3 Navbar Font Sizes
  • 3 Style Variations for Navbar Item Border (None, Dotted, Solid)
  • Sidebar/Navbar placement (left/right)
  • 7 Font Families
  • Automatic Image Resizing

Some Screenshots

Here are some screenshots that should show you the possible variations of the theme. Note that you can use your own sidebar/navbar/header/body background images, which will vary your theme still more.

screen 1 view screen 2 view gothic preview 1 Design 2 gothic preview 1 Design 2 gothic preview 1 Design 2

The features in detail

Styles Variations for easy customizations

The included styles in the gothic theme

With this theme you will get a huge amount of possible combinations of different designs. And it is so easy to choose: Just click on the variations you want - that's all. And to give you a good start there are many pre-built styles included with the theme. Just select a style in the styles chooser at the bottom of the style variations and you will have switched to a totally different design where you can start building your own customizations.

Automatic Image Resizing

This really cool feature is implemented in most modern browsers: When the browser window is resized the image in your content is also resized. So your visitors will not get too small or big images on their screen. They will fit perfectly no matter which screen size they have. And as all my updated versions of my themes you don't even need to code this by html. Just turn on or off this feature in the page inspector with only 1 click.

Easy manage your own custom sidebar, navbar, header and body background images with the GIA utility

Included with the theme you will find a nice little utility to easily manage your own custom sidebar and navbar images. Just choose the images you want to be displayed in the header and click on Place. The Gothic Image Admin Utility will do the rest.


gia view

Where to put the navbar and sidebar

You can easily exchange the positions of the navbar and sidebar. And new in V3 of the gothic theme: you can also completely hide the sidebar if you don't need it.

Many different widths and heights

Want to have a fluid design, where the content will expand and contract automatically depending on the window size? No problem. Or would it be better to have a static content size, vertically centered? You have 12 different layouts for the width/height to choose from.


Colors

OSX Colors

New in RapidWeaver 3.6

Since RapidWeaver 3.6 you can use custom colors by choosing them with the standard OSX color picker and adjust almost any part of the layout (navbar, body, footer, sidebar, ...). Sure that I have reworked the theme from ground up to support this new really cool feature

OSX Colors 2

Greybox included

greybox logo

Ever wanted to have a cool AJAX effect on your site but it was too difficult to make it work? With the OHM theme it is really easy as the greybox project is preinstalled! You probably already have seen the greybox in action. It is used widely on this site to show you the images in full screen mode. The greybox system is similar to the lightbox one, except you not only are able to open images in a translucent layer but whole websites. So you can show additional information to the user without opening a new window or redirecting him to another site - and this means: he will stay longer on your site!

As you view this content you already have seen how greybox works, as this whole page is displayed in a greybox layer. Other examples can be found on this site when choosing to view the online examples or even by adding a theme in the shopping cart.

If you want to find more information about greybox or like to see more examples, you can visit the project's homepage at http://www.orangoo.com/labs/GreyBox/

Free Online Support

If something should not work well, you can get free online support from me. You can contact me and I will give you help making the best out of this template. I will probably also make some changes to the design itself, all for free.


Limitations

Following are some know limitations of the gothic theme:

IE6 and fluid width
It seems that with some page content and set the layout to a fluid width of 80%, the scrollbar which is rendered beside the content if there is too much content to fit, will be offset some pixels. This is not great but the page is still accessible and it is just a small gap. But it may disturb the clean design a little bit.