Themes and Templates

Hotlava Theme v1

• 2008/1/14 12:14:06
• drummond

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