Odyssey

Odyssey Theme Tutorial

General > Toggles

Show Top Site Logo

Checking this option will make your logo appear at the very top of the page, above the navigation

Show Breadcrumbs

If you have breadcrumb trails turned on in RapidWeaver, you may not want to have them on every single page. With this option you can choose to turn them off on some pages if you don’t want them.

Titles > Toggles

Show Main Header & Slogan

If you check this option then your page title and slogan will appear at the very top of the page above the navigation

Titles > Colors

Header Color & Slogan Color

Here you can specificy the color of the Title and Slogan at the very top of the page, above the navigation. Of course, these will only apply if you have the above option turned on.

Sidebar > Toggles

Show Sidebar

There is only one toggle for the sidebar, and that is to turn it on or off. By default the sidebar is turned off. If you want to turn it on, just check this option.

Sidebar > Position

Here you can choose to align the sidebar to the left or right of the page

Content > Max width

This select option allows you to specifiy the maximum width for the content of the page. You will find the folllowing options in the select dropdown:

Automatic

This is the default option and it will resize the content width accordingly starting at a max-width of 940px.

Full Width

This option is for those who want to have stacks or content that expands the full width of the page. If you select Full Width then the content will expand to fill the entire page with no padding or margin.

1200px

This option will set the max-width of the content to 1200px, which is a bit larger than desktop sizes.

1000px

This option will set the max-width of the content to 1000px, which is just about right for desktop sizes.

9400px

This option will set the max-width of the content to 940px, which is an ideal width for general content on the web.

800px

This option will set the max-width of the content to 800px, which is a bit smaller than most content containers on the web.

Content > Colors

Here you will find the basic color options for the content section

Content Text

The general color of text in the content section

Content Background

The background color of the body, or general content area

Content Link Color

The color of all links and buttons on the page

Content Link Hover Color

The color of all links and buttons when hovered

Content input borders

The border color of all input fields and textareas on the page

Content Code / Pre background Color

The background color for Code and Pre sections. When you want to include code snippets etc.

Banner > Toggles

Show Banner Logo

If you check this option your logo will appear centered inside of the banner image

Show Banner Header

If you check this option your website/page title will appear centered inside of the banner image

Show Banner Slogan

If you check this option your website/page slogan will appear centered inside of the banner image

Hide Banner Triangles

Checking this option will hide the triangles in the corner of the header section, leaving you with a simple gradient background.

Use 1ld Slider Stack (Stacks Pages Only)

We’ve included the 1LD slider stack along with this theme. If you place the 1LD slider stack at the top of your page, and check this option, the Slider will automatically replace your banner image, leaving you with a nice slideshow.
We recommend setting the height of the 1LD slider stack to 70%, as this height looks the best with this theme.

Banner > Colors

Banner Header Color

This controls the color of the website/page title in the banner image, ** if you have this option turned on **

Banner Slogan Color

This controls the color of the website/page slogan in the banner image, ** if you have this option turned on **

Banner BG Gradient 1 & 2

The background color of the main header section is a gradient, therefore there are two colors to control it.
You can select any two colors you want for the gradient, or you can select the same color for both gradient options to acheive a solid color background.

Top Right Triangle Gradient 1 & 2

If you look in the top right hand corner, you will see a colored triangle, these two gradients will control the color of this triangle.

Bottom Left Triangle Gradient 1 & 2

If you look in the bottom left hand corner, you will see a colored triangle, these two gradients will control the color of this triangle.

Navigation > Background Opacity

This option controls the transparency of the navigation background when opened

Navigation > General Colors

Here you will find the color options for the navigation when it is closed. When closed, you will only see the top level items of the navigation.

Nav Text

The general color of the navigation text when you first see it on the page

Nav Text Hover

The color of the initial navigation text when hovered

Nav Hover Blocks

When the navigation is closed, you will find that hovering over each top level item will make a small square pop up underneath it to indicate which page you are pointing to. You can set the color of these blocks with this option.

Navigation > Open Colors

Here you will find the color options for the navigation when opened. This is where the majority of the navigation styling can be done.

Nav Open Background

This is the main background color of the navigation when opened. It will be opaque according to what you set the Navigation > Background Opacity level to.

Top Level Color

This is the color of the very top level items when the navigation is opened.

Top Level Divider Color

When the navigation is opened, top level items will have a border underneath them, to show separation between parent items and their children. This option controls the color of this border.

Sub Level Color

This controls the general color of sub-level items when the navigation is opened.

Sub Level Hover Color

This option controls the color of sub-level items when they are hovered over.

Navigation > Menu Button Colors

Nav Toggle Icon

This color-picker controls the color of the icon in the center of the menu button

Nav Toggle Gradient 1 & 2

The menu button background is also a gradient made up of two colors. This allows you to get really creative. The first color controls the top half of the menu button background, while the second controls the bottom half.

Nav Toggle Ring Color

When the menu button is hovered oover, a colored ring will appear around it. This color-picker controls the color of this ring.

Footer > Colors

Footer Text Color

This option allows you to change the color of the text in the footer section.

Footer Background Gradient 1 & 2

The footer background is also made up of a gradient. You can use these two colors to make a nice looking gradient background for your footer.

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

Blog