Rubix HTML5 Sample

Rubix HTML5 Sample

Rubix HTML5 is a premium template. Here is some helpful information pertaining to the template:

Design Details

Template type PREMIUM – HTML5
Supports categories YES
Contact form YES
Supports logo YES
Slideshow in gallery YES

Site Colors Settings:

Go to Site Settings/Colors in your site control tools

You will find the ability to change about nine(9) colors from the Colors section.

Color Name Color Description
Title Color: Colors the logo if no logo file is used.
Text Color: Colors the page text, header text, caption text, contact form text, and send button background.
Body Color: Colors the body background. If a texture file is specified it will overlap this color. Colors contact form field backgrounds and send button text.
Secondary Color: Colors sub menu backgrounds when the menu is on top and on the mobile site, thumbnail backgrounds for overlay thumbanils and the password box background.
Border Color: Colors border and line elements.
Page Background Color: Colors main container background. The container background is also affected by the container opacity setting (see below).
Custom Color 1: Colors the menu items, copyright text, gallery navigation arrows, any page links (including sub page links), page scroll bars, audio player buttons, slideshow button, and thumbnails button.
Custom Color 2: Colors the items colored by custom color 1 on mouse over where a mouse over state exists.
Custom Color 3: Colors audio and slideshow progress bars.

Image Sizes

All images should be optimized for the web.

Image Width Height
Intro images 1440-900 960-600
Gallery images 1440-900 960-600
Page images ≤ 480 ≤ 720

Layout Settings

There are four major areas of layout control under Site Settings > Layout Settings. You can use the preview button at the bottom of this page to view different layout configurations without affecting the current layout of the site.

Menu Position

Choose from left (vertical), top (horizontal), or right (vertical). Both the left and right menus feature accordion style submenus. The top menu features a drop down menu that activates when the mouse hovers over the parent item or when the parent item is tapped on touch screens.

Menu Text Alignment

Each menu position is affected by text alignment settings. Left and right menu positions can align the text left, right, and center. The top menu position can align text on either the left or the right.

Gallery Mode

There are five gallery modes available. Single shows images one at a time and uses a crossfade transition when transitioning from image to image. Horizontal displays all gallery images on a horizontally scrolling plane. Vertical displays all gallery images on a vertically scrolling plane. Fullscreen mode makes gallery images fill the available window space. Masonry mode sets the galleries as a large, fluid layout of thumbnails.

Thumbnail Mode

There are five thumbnail modes available. Bottom displays thumbnails horizontally below the main content area. Left displays thumbnails vertically to the left of the main content area. Right displays thumbnails vertically to the right of the main content area. Overlay displays a grid larger thumbnails over the main content area when the thumbnail button in the footer is clicked. None removes the thumbnails from the site.

Margin Settings

Rubix allows robust control over the margins of every major element of the site. There are slider controls for the top, bottom, left, and right, margins of the logo, menu, images (intro & gallery), pages, and footer under Site Settings > Template Settings. New installations leave these settings blank and will automatically adjust depending on the layout choices. Use these sliders to further refine the margins of each element. Once a margin setting is defined, it will override any of the default settings. *Please note that all settings are relative to the main container. If the browser window is larger than the container width or height, the container will center vertically.

Container Settings

Max Content Width and Height

These settings control the maximum width and height of the content container. The container scales to fit within the available window space if the window is smaller than the values set for the content width and height.

Container Opacity

Use the slider under Site Settings > Template Settings to adjust the opacity of the main container. Setting the container opacity to 0 will make it completely transparent. Setting the container opacity to 100 will make it completely opaque. *Please note that container opacity does not affect the container on the mobile site.

Mobile Site

The mobile version of the site can be activated at a designated browser window width. The default width that will trigger the mobile site is 700 pixels. This will target smartphones and small tablets. This setting can be adjusted in Site Settings > Template Settings using the Mobile width slider setting.

Other Special Features

Lightbox Option in Galleries

Under the Images > Galleries section you are now able to toggle on the lightbox option for each gallery. This will allow clients to choose images to save to a lightbox and then download a PDF file for review.

Intro Images

Under Images > Home/Intro upload images for the intro or background image that appears when your site opens. Press the upload images button select a new image to upload. Intro images should be optimized and sized according to the template image specifications. Drag and drop the images to reorder them. Press the delete button on the right of each image to delete an image.

Page Linking

To make a page redirect to an external link select redirect from the page type setting when editing a page. Enter the desired URL in the URL field.

Gallery Index Pages

By default, categories are displayed on the main menu with a submenu listing each category’s galleries below. To disable the gallery submenus and show an index page of the galleries associated with each category, switch the Gallery index pages setting to “On” under Site Settings > Template Settings. The default thumbnail sizes for the gallery index pages is 225 pixels by 150 pixels with 10 pixels of padding between each thumbnail. The gallery index thumbnail width, height, and padding can be adjusted under Site Settings > Template Settings as well.


MP3s are uploaded into the music area under Site Settings.

Slideshow Speed

Under Site Settings > Template Settings enter the amount of time in seconds an image should display in intro and gallery slideshows before loading the next image.

Auto Start Slide Show

Under Site Settings > Template Settings select ‘on’ to have the gallery slide show auto start when entering a gallery.

Texture File

Upload an image for the background texture under Site Settings > Texture. Press the upload texture button under Texture and select a new image to upload. Texture images should be sized to a minimum of 1440 x 960 pixels. To remove the texture press the delete button to the right of the image. Please note that textures do not show on the mobile site.

***Textures are an easy way to set your site apart and give it depth. We have an incredible set of texture packs to choose from created directly by our developers for you HERE.

Pages Menu Label

Under Site Settings > Template Settings enter the desired label for the button that holds all top-level pages as sub menu items if Condense pages is turned on.

Condense Pages

When turned on, this setting condenses all top-level pages under one menu item using the value entered into the Pages menu label setting.

Contact Menu Label

Under Site Settings > Template Settings enter the desired label for the button that opens the contact form.

Max Page Width

This setting controls the maximum width that a page will occupy. Adjust the slider under Site Settings > Template Settings to increase or decrease the maximum page width.

Font Modifiers

Font Modifiers allow you to increase or decrease the size of the text from its default size (set at 0) for your Site Title, Navigation, and Pages. This is most helpful when selecting fonts that render at small sizes.

Logo Alignment

This setting controls the alignment of the logo.


A good place to start is around 200 pixels wide by 70 pixels tall. If you need the logo bigger/smaller, just resize the logo in your image editing program and then re-upload into the admin under Site Settings > Logo.


Because Rubix HTML5 is an HTML site, you can embed youtube, vimeo, and other third party video players. Simply paste embed code on a page using the text editor when editing a page.

Redirect Target

Page redirects can be set to open in the same window as the site by setting the Redirect target under Site Settings > Template Settings to “_self”. This can also be set to target a given window name so all redirects open in a given new window. Otherwise all redirects will open in a new window by default.

Image Border Thickness

This setting controls the thickness of gallery and home image borders. Use the slider under Site Settings > Template Settings to increase or decrease the size of image borders. Setting the image border to 0 will remove image borders.

Gallery Image Spacer

This setting controls the amount of space between each gallery image if the gallery mode is set to horizontal or vertical

Gallery Nav

Under Site Settings > Template Settings, choose “On” to show gallery navigation arrows. Choose “Off” to hide gallery navigation arrows.

Ecommerce Functionality

Refer to this page to get started with the ProPX powered ecommerce functionality available in RUBIX.

Help & Support

Submit a Support Ticket »

© 2020 BIG Folio Inc. • All rights reserved
Terms and Conditions