Sphere Theme: Important Notes
Here you will find important information about the Sphere Theme
General Description
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.
Body Background Overlay
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.
Bottom Fade
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.
Navbar Item Width
Depending on how many Navbar items you use and how many words you use, you can adjust the item's width.
The Header and Footer Images
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
Tooltips
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 follows the mouse pointer. The tooltips include the following two attributes you can give each link you create: the link target (URL) and a short description taken from the title tag. 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 which make sense you should add a descriptive title in the "title" field of the "Add Link..." window [2] in RapidWeaver.
This description will be shown in the tooltip as you can see in the image. Note that probably the link target (URL) will not be shown correctly within RapidWeaver if you haven't manually added a URL but used the "Page" or "Asset" entry from the drop down menu.
The Drop-Down Menu
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.
Split Navigation
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. In Sphere it is also possible to include both at the same time. That way, the top menu can act as a quick bar where the user can see and access all pages of your site. The navigation in the sidebar can be quicker to access and is probably easier to read.
Also you can enable only one of the navbar styles. The choice is yours. Note that you have to enable the sidebar, either on the left or right side, to use the split navigation. To enable the split navigation, choose Show from the Navbar in Sidebar style variation, as seen on the screenshot.
I suggest you try out the different combinations to find out what's the best menu for your site.
Bottom Padding
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.
Known Bugs and Fixes
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.
Third Party Plug-Ins
Description: I have tested the theme with many third-party plugins available. Most of them work without any problem. Also the following plug-ins have been fixed to work with the sphere theme (many thanks to isaiah from yourhead!): accordion, carousel, payloom. Note that you should use the latest plug-in version for this compatibility.
If you find a plug-in that breaks the theme, please let me know it.
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]
Flash Slideshow and IE/Win
Description: If you open a page with a flash slideshow in IE/Win a notification window pops up: „Internet Explorer cannot open the Internet site ... Operation aborted. When you click on „OK“ an almost empty page will be diplayed, starting with „Internet Explorer cannot display the webpage“.
Solution: There are two possible solutions for this problem.
1) The problem lies in the flash slideshow plugin and swfobject js script in combination with the included mootools javascript library in the sphere theme. To fix this at the moment you have to manually correct the source code of the exported page (changes in red):
<script type="text/javascript" defer="defer">
//<![CDATA[
var so = new SWFObject("files/slideshow.swf", "mymovie", "460", "320", "6", "#ffffff");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("base",".");
so.write("flashcontent");
//]]>
</script>
2) Use the free RapidAlbum plugin to build your slideshow. Within that plugin you can include the fix described in the first solution. That way you don't have to edit the exported slideshows, just correct it in RW and the exported code will fix it:
[1] Choose Slideshow as the template from the drop down list
[2] Switch to the HTML tab
[3] Select Slideshow from the drop down list
[4] Add the defer attribute in the HTML code
For more information about the plugin or to download it, please visit the following site:
Background Overlay scolls with content in IE6/Win
Description: The chosen background overlay does not stay fixed when scrolling the content with IE6/Win.
Solution: None at the moment.
Simple Viewer Plug-In
Description: The simpleviewer layer will be drawn on top of the footer until you scroll.
Solution: None at the moment.
Limitation of the number of submenu entries
Description: I can only add up to a limited number of submenu entries. Additional entries will be cut off.
Solution: Make better site structures or use the split navigation style variation to display subpages in the sidebar.
The submenu items in the top navigation are rendered as follows:
1) If you have a header image shown, the menu will drop down until the bottom of the image is reached. If you want, you can modify the menu height to make more room, as described in the next section.
2) If you have no header image, the menu will not drop, so you have to choose the split navigation for subitems.
Adjusting the menu height
Description: If I set the page not to show a header image, the menu has a height of 220px. But this height is too big/too small. Can this be adjusted?
Solution: You can adjust the standard menu height of 220px by manually editing a theme file directly. Please note that future updates will reset the adjusted value.
1. Open the theme drawer in RapidWeaver and do a control-click (or right-click) with the mouse. Choose „Show Contents“ from the popup menu. You will be redirected to the theme contents folder in the finder.
2. Open the file menu.js with a simple text editor (e.g. TextEdit, TextWrangler, skEdit, TextMate, ...). The file can be found in the folder called js.
3. Search for the following line of code:
headerImageHeight=220;
and change the value 220 to the value for your menu height
4. Save the document
Now the menu should have your chosen height when you have selected not to show a header image in the style variations.