Middle Kingdom Life - Hybrid Template
-
-
- Dr. Greg
- Rocketeer
- Posts: 76
- Thanks: 0
- Professor in Psychology
-
Middle Kingdom Life
is an educational website for prospective China foreign teachers and Western expats that has been running for almost four years now.
The challenge here was merging a 400-page eBook previously presented in HTML format with a "blog" featuring new articles that had been designed a little less than a year ago using the SolarSentinel theme. Because of the number of child menu items (more than 75), the standard Joomla menu was inadequate for this task. I found a way of incorporating Project Seven's (PVII) PopMenu Magic for the Guide portion of the site. In fact, in order to retain the same "look and feel" as the HTML version, we incorporated several PVII widgets into the site (Accordion Panel Magic, Glide Panel Magic, and Lightshow Magic, although it is much easier to simply use Rokbox for the lightbox effect than LSM).
We also needed a superior search engine and incorporated Wrensoft.com's Zoom Search Engine into the site. PHPBB3 is synched via RokBridge and is also styled in the Hybrid theme.
Our custom header was added to the rt-top module position in both Joomla and phpBB3, although the latter required a little bit of customization to the overall_header.html template file in phpBB3.
-
-
-
- Toni
- Elite Rocketeer
- Posts: 767
- Thanks: 1
- Delivering team building events, website development and a serious passion for photography
- Very nice and informative! Well done.
- Sometimes it's just not worth chewing the straps to get free!
-
-
-
- Chris Devonport
- Jr. Rocketeer
- Posts: 23
- Thanks: 1
- chridevo
- Excellent website - both UI and content. I am just at the beginning of my project and am trying to integrate Project 7 Accordian Panel Magic into my Joomla site. Would you be prepared to share the method you found for managing this? I am having trouble with pathnames to scripts and css. Thanks, Chris
- chridevo
-
-
-
- Dr. Greg
- Rocketeer
- Posts: 76
- Thanks: 0
- Professor in Psychology
-
@Toni and Chris, thank you for the positive feedback.
Chris, you will copy the p7ap folder with all its contents to the root of your Joomla installation. If you are going to use Accordion Panel Magic on many pages, then it's best to just copy the path to the script and stylesheet in your template's index.php file, just before the </head> close tag as such:
<script type="text/javascript" src="p7ap/p7APscripts.js"></script> <link href="p7ap/p7AP_xx.css" rel="stylesheet" type="text/css" media="all" /> </head>
Of course, you could also use a full absolute path, e.g.,<script type="text/javascript" src="http://domainname.com/joomladirectory/p7ap/p7APscripts.js"></script>
I use the relative path because I keep a duplicate copy of the installation on XAMPP for development purposes.
If you are only going to use APM in only one or two pages, you may consider using a Joomla plug-in called CustomHeadTag, which allows you to associate the script and stylesheet with a menu or article ID so that they're not loading on every page. For example, I only use APM on one page ( China EFL Teacher Resources ) so I have the script and stylesheet entered in this plug-in for this particular widget. Just enter the relative path in the plug-in without a leading "/".
If APM doesn't work properly for you in all browsers, try appending the entire contents of your AP_xx.css file to your template's template.css file (I had to do this with PopMenuMagic in order for PMM to work properly in IE8).
Let me know if you have any other questions.
Best of luck,
Greg
-
-
-
- Chris Devonport
- Jr. Rocketeer
- Posts: 23
- Thanks: 1
- chridevo
-
Hi Greg,
Thanks for the prompt response and helpful information. I have got past the pathname issue but run into a javascript conflict problem which prevents the APM opening as configured or responding to any clicks. I spent the weekend learning about how to work out what is going on and have identified the conflicting js files as mootools.js and/or rokbox.js. I have tried disabling and uninstalling these in various combinations but have had no success so far. Interestingly, it appears to me that your site has a similar issue on the APM page when viewed with Chrome v8. (Your page works fine in FF3.6 and IE8 from where I sit). My issue seems to apply across all browsers.
Regards, Chris - chridevo
-
-
-
- Dr. Greg
- Rocketeer
- Posts: 76
- Thanks: 0
- Professor in Psychology
-
Personally, I feel our responsibility to cross-browser compatibility ends with XHTML 1.0 Transitional compliance.
Chrome v8 will also not properly render the PMM2 stylesheets while every other browser I've tested does (including IEbeta9).
Have you tried combining the .js scripts into one large file? That might work if the problem has to do with loading order.
-
-
-
- Chris Devonport
- Jr. Rocketeer
- Posts: 23
- Thanks: 1
- chridevo
-
Chrome renders APM just fine from an html document not inside the Joomla environment. I have tried combining scripts and also changing the load order but with no joy. Time has run out for me - I have to move on. Thanks for your help. If I do find out I will let you know here - it may help with your Chrome issue.
Chris - chridevo
-
-
-
- Dr. Greg
- Rocketeer
- Posts: 76
- Thanks: 0
- Professor in Psychology
-
Yes, it is a script conflict issue, one I didn't have when the Guide was strictly a series of flat HTML documents.
As Chrome is gaining in popularity, I might just find an alternative solution to APM. The important thing for me was getting PopMenuMagic 2 to work properly on all browsers and it now appears to be working just fine across all platforms. I can live without APM because I'm only using it on two pages in total.
Good luck with this. Let me know if you find a solution.
-
-
-
- Chris Devonport
- Jr. Rocketeer
- Posts: 23
- Thanks: 1
- chridevo
- I just tried Spry Accordian in Dreamweaver CS5 and that seems to work OK in a mod_custom module.
- chridevo
-
-
-
- Chris Devonport
- Jr. Rocketeer
- Posts: 23
- Thanks: 1
- chridevo
-
Greg, I asked the APM guys for help and they came back with this:
This is the source of the problem:
<script type="text/javascript">
window.addEvent('domready', function() {
var modules = ;
var header = ;
GantryBuildSpans(modules, header);
});
APM 2 headings are real headings - <h3> tags. Spry works because it does not use headings.
Since you are working with open source tools, best to change the APM2 headings to <h4> elements. Just make sure you change the CSS selectors in the APM CSS to point to <h4> instead of <h3>. You also need to move the APM external script and CSS links to the head of the document.
Changing the tags allows the APM to work properly in FF and Chrome but not IE8. I have yet to work out how to move the js & css to the head of the document. - chridevo
-
Time to create page: 0.056 seconds