Pop Theme: Important Notes
This section describes the most vital things you need to know about the POP theme
General Information about Browser Support
The POP theme uses many advanced CSS 3 features. These features are not (yet) supported by every actual browser. But don't be afraid. Here are some thoughts:
One of my hobbies is doing magic tricks. One question that people always asked was: aren't you afraid that something won't work? The answer is: No. Magic is more than doing simple tricks. It is about knowing the way human thinks. And with your voice you direct their thoughts. One important thing is: Don't let the spectators know what you are going to do. This way they never know if something went wrong and possibly think it has to be the way it is.
The same thought applies to the POP theme: Only few browsers support all features included in the theme. You won't get the same design on different browsers - well, actually you can if you want. The important thing is: as your visitors don't know how the page should be rendered, they don't think something is wrong. The design looks good in every browser, but a few things are sleeping in the background until they will be woken up by new browser versions.
I also think that writing code for specific browsers is a dead end. Browsers will always render a page differently. If you want a webpage be rendered the same on every system and every browser, you can only work with images. No text, no boxes, no borders and so on. Only few people are checking out a website with different browsers, so it doesn't matter at all if a page is rendered differently on different browsers.
What CSS 3 Features are implemented by different Browsers
The CSS 3 features used in the pop theme are "Shadows" and "Round Corners". Safari 3 supports both of them. Here is the other browsers chart:
Firefox 3:
Shadows: Not supported
Round Corners: Fully supported
Firefox 2:
Shadows: Not supported
Round Corners: Supported but FF2 will not process the header background image. If you also use the border style variation, it won't look great. So my suggestion is: if many visitors use FF2, don't use the border style variation in combination with round corners + header image
Opera 9.5:
Shadows: Not supported
Round Corners: Not supported
IE/Win 6 +7:
Shadows: Not supported
Round Corners: Not supported
Don't handle lack of CSS support of certain Browsers as Bugs
As far as I have tested, the POP theme works with all actual browsers, but as I said, the layout may differ in some points. Don't take this too serious. When Browsers are updated they will certainly support the features they are missing at the moment. So, please don't handle the browser's lack of CSS implementation as bugs. I won't fix them for them.
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 theme (many thanks to isaiah from yourhead!): accordion, carousel, payloom, collage, collage 2. 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 theme:
Included in the theme download folder 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 theme. Now chose the General Settings tab[3] and make sure you disable the Show in Menu feature.
2) To include this page in your site 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: