Sphere Theme: Important Notes

The main idea of the sphere theme is based on observations of the colors in nature: the transitions from light to dark and vice versa aren’t based on just adding white or black colors. The colors mostly have some yellow parts in it when going to white and blue when going to black. This effect has been noted quiet early in chromatics (e.g. divition of the color wheel in bright/dark and warm/cold). My idea was to implement this in Sphere. Actually it only simulates it and is not 100% correct, as this would be too complex.
Additionally to that basis the sphere theme implements many new features which work for you in the background. Two of them are worth mentioning here: the navigation and tooltips.
As the menu is not static but animated I can’t fully describe the effect here. Just try it out. When you hover the navbar with the mouse the menu is softly expanded downward, overlaying the header image in a semi-transparent layer. The whole menu is built as a site map, so your visitors are able to directly go to any part of your site. Also every menu entry softly changes from the inactive to the active state.
The tooltips is another great feature of the sphere theme. When you hover a link in the main content, a tooltip will pop up showing the link target (URL) and a small description in a semitransparent layer. The best way to create the tooltips is further described in its own section in this manual.

With this style variation you can choose how and if a background overlay to white or black should be applied. If you choose a clear color for the body background color, you should try out the first two options (Color to Black, Color to White) to apply a transition which is more natural. But it is up to you to choose and with some colors chosing the other options (Grey to White, Grey to Black) better suits your needs.

This style variation puts a transition from white or black to transparent at the bottom of the main content, so your content will magically blend in view when scrolling.

Depending on how many Navbar items you use and how many words you use, you can adjust the item’s width.

You can add up to ten different header and footer images in the sphere theme. The images are chosen in the style variations section of the page inspector. There are ten default images included in the sphere theme but it is also really easy to replace them with your own images using the special Sphere Image Admin Utility. How you use this application is mentioned elsewhere in this manual. First I want to give you some important information what kind of images you should choose for the sphere theme.

Header Images
The header images need to be saved as JPG images and be of the following dimension:

Width: Should meet the overall width of the content you have chosen for the site you working.
Height: The value you have chosen for the header image height style variation.

Footer Images
The footer images have to be saved in PNG format and should have the following dimension:

Width: 1600px
Height: 145px

Other dimensions will cause the following:

a) the footer image will not be centered anymore
b) the image will be scaled wrong in IE6/Win

The main purpose of tooltips is to give your visitors some clues about where they will be directed if they click on a link on the page. The tooltips implemented in the sphere theme are placed in a semitransparent layer which will be shown whenever you hover a link in the main content with the mouse [1]. They also follow the mouse pointer. The tooltips include the following two attributes you can give each link you create

the content from the "name" attribute: -> The tooltip title
the content from the "title" attribute: -> The tooltip text

If no "name" attribute is found the Tooltip will show the URL as the title

The default of the sphere theme is to display tooltips but on some pages they don’t make much sense (e.g. photo album page), so there is an option to hide the tooltips in the style variations.

To create tooltips do the following:

[1] Expand the Custom Attributes pane (if not expanded already)
[2] Enter your text in the Value field of the title attribute
[3] Create a custom Attribute and name it "name"
[4] Enter the Title to the value field of the "name" attribute
[5] Click on "Set Link"

If you want the URL of the link be shown instead of a custom title just don’t create the "name" attribute.

One of the coolest features of the sphere theme is the animated drop-down menu: when you hover the top bar with the mouse, the menu will expand and cover the whole header section with the header image. Also, the menu layer is semi-transparent, so it’s a kind of curtain, covering the image.
The Drop-Down menu can be disabled in the style variations (Header Drop Down), if you don’t need it (or want to use the split navigation option, which is described in the next section).
Also note that the menu will not drop down if you have set the header height to 0px. In that case you should use the split navigation for the submenu.

In the Sphere theme the menu handling is very important and also very flexible. One additional feature to the standard drop-down menu is the possibility to use a split navigation for the subpages. Split Navigation means that the top items are rendered in the top navbar, and the subpages in the sidebar.
You have three options here:

Only Top Menu: All Navbar Items are rendered in the Top Navigation Bar. No Menu is added to the sidebar
Second Level in Sidebar: Puts the Second Navbar Level Items in the Sidebar and removes them from the Top Bar
Third Level in Sidebar: Moves the Third Navbar Level to the Sidebar. Only the first two levels are shown in the Top Menu Bar

If you have enabled the bottom fading and/or are using the footer image it is wise to add a bottom padding to your content. If you don’t some content may not be accessible (clickable), as the images will overlay the content. This can be a little bit confusing, when using transparencies, as the user can see the text (or link/form field) but cannot access it. You have to make sure that your content can be scrolled until it isn’t covered by any image. There is a style variation to automatically add the bottom padding, which you should set to "Yes" when you use a footer image or bottom fading.

Below you will find some known bugs or limitiations of the Sphere theme. Whenever possible, I also will give you a solution to fix them. If you should find a bug or problem with the sphere theme, please let me know it.

Description: I have tested the theme with many third-party plugins available. Most of them work without any problem. If you still should encounter any problem, read this and the next step.
Here is a general description how you can make unsupported plugins work in the sphere theme:

Included in the sphere theme is a theme called "CAEmpty" which you can use to fix the problem described above. The theme CAEmpty creates pages containing only content – no header, footer or navbar.

1) Create your 3rd-party plugin page and choose the theme "CA Empty" from the drop-down menu Page-Specific Theme [1]. Note that you should choose the same background color[2] as is used in the main site with the sphere theme. Now chose the General Settings tab[3] and make sure you disable the Show in Menu feature.

2) To include this page in the sphere theme create a new page which will be the container for the page you created in step 1. Choose iFrame from as the Page Style. Click the Setup button[4] of the iFrame page and write the correct link to the page created in step 1[5]. As this will vary from each site I can’t tell you what exactly you will have to write. Check the Folder and File Name entries in the General Setup section of the 3-rd party plugin page you created in step 1. If you want to be sure, publish your page and open the plugin page in a webbrowser. Now you just copy and paste the real URL from the browser’s address bar to the above url field.
You may also need to adjust the iFrame size[6]

The Sphere Theme is based on the mootools Framework. There are known incompatibilities with V 1.1. and V 1.2 of the framework. I have added an option to include one of both versions on a page. This can be chosen in the style variations in the page inspector. You should always first try V 1.2 (the default). If this doesn’t work (e.g. for the Carousel Plugin), try switching to V 1.1 on this page only. This switch can be very helpful.
Also, some plugins do use the jQuery plugin. If they have been written correctly, there should be no incompatibility between the theme and the plugin as jQuery can use a compatibility mode. But this has to be implemented by the plugin developer so if you have a problem with any other plugin, please contact the developer of the plugin directly.