Tutorial

A unique and adventurous theme for the modern age

menu

Tutorial

A unique and adventurous theme for the modern age

Odyssey Theme Tutorial

General > Toggles

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

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

This option controls the transparency of the navigation background when opened

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.

  • The general color of the navigation text when you first see it on the page
  • The color of the initial navigation text when hovered
  • 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.

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

  • 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.
  • This color-picker controls the color of the icon in the center of the menu button
  • 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.
  • 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.
© 2017 One Little Designer