Need help with ajax "hotlava" theme

I'm developing a new theme for icms/xoops that has a lot of neat ajax features, simplicity to use and modify and such, but there are few things that I need help with. I'm going to use this thread for that.

First of all, here's the theme:

http://www.pageprogressive.com

And here's what I need help with:

1) I want to include a menu file and I am currently doing it this way:



But this method requires a hard coded link. How can I get the same effect of<{xoAppUrl /themes/hotlava/includes/menu.html}> inside a php snippet, or perhaps there is a better way to include rather than the php snippet.

2) I've found a CSS-only drop down menu that only requires javascript for older browser compatibility. This is better than the one that Mastop Publish currently uses (Son of Suckerfish, I believe) because of it's lack of needing JS and more compatible with browsers (Even IE on the Mac!), but I don't know how to modify Mastop's horizontal menu block template to use this new menu. The PHP coding is over my head. Anyone want to take a stab at it? The menu is here:
http://webhost.bridgew.edu/etribou/layouts/rMenu/index.html[/d] Managed to figure this out afterall

3) Is there a way to return a unique block ID with a variable in the theme? IE, blocks could have id="1", id="2" for identifying them seperately for styling. Marcan pointed out that you can use <{$block.id}> to identify that block's ID, which will let us validate properly now and also we can have a user-friendly "Click here to edit this block" button. Yay!

More to come!

About the first question: Have you tried using XOOPS_ROOT_PATH?

I think XOOPS_ROOT_PATH and XOOPS_URL are both available.

Awesome! I knew there was something like that. This worked:



Thanks so much nachenko!

Is there a variable that does the same as <{xoImgUrl includes/menu.html}> ?

Smarty also has an include tag <{include file="path/to/file.ext"}>

agreed^^ you really should utilize the $marty where it is available.

<{include file="$xoops_theme/includes/menu.html"}>

no need for <{php}>

Awesome! Thanks!

Okay, here's version 1 of the Hotlava theme. you can see it in action temporarily here:

http://www.pageprogressive.com/

Note the links there to preview the lightwindow effects and the left block scrolling (Next, previous) and the right according effects block.

And download it attached as a zip below.

It's not production-ready yet, and I could use some help with some 'to do' items below and with testing if anyone feels so inclined Remember, this theme is not meant to be visually flashy. I intentionally only use one image in the theme because of all the javascript and also for easy theming. This is more of a framework to show the neat things you can do with AJAX, although I am kind of fond of the simple, subtle theming it currently incorporates.

FEATURES:
------------------
1) All-CSS layout

2) Colors (colors.css) and fonts (fonts.css) CSS are stored in seperate files to make it easy to modify without worrying about layout stuff. New colors themes can be adapted from colors.css and used to overwrite the default to get different looks.

3) All Javascript degrades nicely when Javascript is turned off in the browser.

4) Utilities for the theme are designed to be easily overwritten when new versions of the utilities are released. All CSS overriding to them is done in style.css.

5) AJAX/Javascript goodies include:
a) Scrolling left blocks with navigation
b) Right blocks have "accordian" effect
c) All media can be put into a lightwindow effect by simply adding class="lightwindow" to any tag. This includes images, movies, entire image galleries, external websites, local forms and pages. See DEV/LightWindow.txt for more info.
d) Notification options are hidden until clicked on to unclutter the layout (like http://community.impresscms.org).
e) Font size adjustment options for the user

6) Well documented HTML and CSS.

7) Integration with Mastop Publish's horizontal menu block (simply put it in the top-center block position. In fact, this theme will replace the default menu system with a better one! See DEV/mastop_publush.txt for more details. If no center-top block is present, the include/menu.html file is used instead.

8) Layout adjusts to display properly on non-home pages.

Please read the DEV/README.TXT for details.

TO-DO:
------------------
1) I can't figure out the correct path for the images in /assets/lightwindow/lightwindow.css. There should be a spinning loading icon and the background should get dark when viewing a lightwindow but I can't figure it out for the life of me

2) Need a way to combine/compress the loading of the CSS/JS. I tried these two methods with no luck. I'm sure I was doing something wrong:
http://rakaz.nl/projects/combine/combine.phps
http://www.ejeliot.com/blog/72 (currently located in includes folder)

3) Develop a hack for multimenu to use the included Ruthsarian menu instead (like Mastop does).

4) Develop alternate colors.css files to drop in and easily change the look.

5) Add styles for common modules like news, smartsection, forums, etc.

6) Utilize lightwindow pop up windows for icms/xoops forms and utility blocks/pages (IE login, edituser).

7) Get unique block IDs for styling and spry, rather than using block title for ID's, as that doesn't validate with spaces in titles.

8) Correct HTML and CSS validation errors.

Attach file:

---

hotlava_v2.zip Size: 0.00 KB; Hits: 48

Good Work, I enjoyed it

Really it looks fine. Good job!

Great job! You can bet I'll study how did you do all this stuff and leech it. :D

Indeed this is a great job and I hope it will be the beginning of a new "theme-history"

I've found this resource that used Smarty to compress javascript files and it looks promising, but alas, again I am out of my experience here. Is there anyone out there that this makes sense to that might be willing to give it a try for me?

http://www.thinkvitamin.com/features/webapps/serving-javascript-fast

Okay, I think I've somewhat resolved the image path issue with the lightwindow plugin. But here's the problem, I have to hard code "/themes/hotlava/assets/lightwindow/images/ajax-loading.gif" or whatever in lightwindow.js because for some reason using <{xoImgUrl}> translates into %3C%7BxoImgUrl%7D%3E

Anyone know how to escape those characters in JS? I've used those codes before in JS with no problem, so I'm scratching my head.

It looks like this in the JS file:

Hi again.

I think javascript escapes characters just like php, with \

Check this article:

http://www.htmlgoodies.com/beyond/javascript/article.php/3470891

Thanks again nachenko,

I actually tried that ( \ ) method for escaping the < and { characters but no luck ;-(

I still get %3C%7B$xoops_imageurl%7D%3E rather than <{$xoops_imageurl}>

Seems that the code is being sanitized by Smarty. No idea how to override this behavior.

Thanks to marcan, we have a solution:

Put this in theme.html to make <{xoImgUrl}> variable available to javascripts as xoops_theme_url:



So now, in this lightwindow.js file I can do:

Okay, what am I doing wrong here?



Apparently you can't use smarty variables inside of smarty variables. Would would the right syntax be for <{$block.id}> ?

Yes, you can't use smarty inside other smarty like you trying use.

You can use this:


or this:


In both cases you get the desired result.

I hope that was useful.

Thanks TheRplima, I realized it was a dumb question right after I posted it, but it's good to know that second method