Can Smarty parse a CSS file?

Well, that's it.

I have just finished a theme for a Drupal site where the colors change upon user selection on a Flash-made color wheel. I got it really cool.

But this made me wonder... Could I do this with Smarty?

If Smarty could parse CSS files, it could do those two cool things for theming:

1 - Change colors and other CSS variables upon user selection. Users could choose their own favourite color palette.

2 - Define variables for colors. This is a much needed feature on CSS, using variables and math expressions on colors, so you can define tints and shadows. So, when the customer says "I think that after two months of asking you to put everything in red, I prefer everything in green".

And when this customer ask for a differnt color, you just change a number, and everything, tints, glows, shadows... change automatically.


Anyway, theming Ronins on-the-works should read this article.

http://www.barelyfitz.com/projects/csscolor/


Could i Do this using PHP? Sure, but honestly, including PHP in a Smarty template sucks. And I like the readability of a Smarty tag over a PHP variable insertion.

This: <{$myColor}>

Is much better than this: <?=$mycolor ?>

The former one appears in Dreamweaver design window. The second one doesn't, it appears the the PHP icon, but this icon doesn't tell you what's inside this PHP piece of code, no matter it's just a line or the Holy Bible.

Topic


Re: Need help with ajax "hotlava" theme

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

Topic


Re: Need help with ajax "hotlava" theme

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

You can use this:

<a href="<{xoAppUrl /modules/system/admin.php?fct=blocksadmin&op=edit&bid=}><{$block.id}>" title="Edit this Block">


or this:
<a href="<{xoAppUrl}>modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>" title="Edit this Block">


In both cases you get the desired result.

I hope that was useful.



Re: Need help with ajax "hotlava" theme

Okay, what am I doing wrong here?

<a href="<{xoAppUrl /modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>}>" title="Edit this Block">


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



Re: Need help with ajax "hotlava" theme

Thanks to marcan, we have a solution:

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

<!-- Make theme url available javascripts --> <script type="text/javascript"> var xoops_theme_url = "<{xoImgUrl}>"; </script>


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

image : xoops_theme_url + '/assets/lightwindow/images/black.png',



Re: Need help with ajax "hotlava" theme

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

If you can't understand what I'm saying, you're not geek enough
ISegura.es


Re: Need help with ajax "hotlava" theme

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}>

loading : '<div id="lightwindow_loading" >'+ '<img src="/themes/hotlava/assets/lightwindow/images/ajax-loading.gif" alt="loading" />'+ '<span>Loading or <a href="(script removed) myLightWindow.deactivate();">Cancel</a></span>'+ '<iframe name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="(script removed)false;" frameBorder="0" scrolling="no"></iframe>'+ '</div>',



Re: Need help with ajax "hotlava" theme

Hi again.

I think javascript escapes characters just like php, with \

Check this article:

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

If you can't understand what I'm saying, you're not geek enough
ISegura.es


Re: Need help with ajax "hotlava" theme

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:

overlay : { opacity : 0.7, image : '/themes/hotlava/assets/lightwindow/images/black.png', presetImage : '/themes/hotlava/assets/lightwindow/images/black-70.png' },



Re: Need help with ajax "hotlava" theme

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



Re: How can I do to create theme!

Thank you for the post.

Which theme are you reffering to, that is not compatible?

At the moment we are working on a new Wiki site for Community documentation - but until then, you may want to check out "XoopsWiki" for some details on theme creation.

We can help with any specific questions you may have of course.



How can I do to create theme!

Hi, I have one question to create theme.

I See a theme but that theme is Not COMPATIBLE WITH impress core Please Help me, how can I do to create this theme for impress?

its means, how can i copy this theme for impress?

------
Sorry I understand a little English and can’t write well!



Re: Need help with ajax "hotlava" theme

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

in valid code we trust


Re: Need help with ajax "hotlava" theme

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

If you can't understand what I'm saying, you're not geek enough
ISegura.es


Re: Need help with ajax "hotlava" theme

Really it looks fine. Good job!



Re: Hotlava Theme v1

Good Work, I enjoyed it



Hotlava Theme v1

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:


zip hotlava_v2.zip Size: 0.00 KB; Hits: 48




Re: Strange font issue in FireFox

Problem seems to have cured it self....



Strange font issue in FireFox

There's a small fontsize issue when using FireFox
Some fonts are displayed a little weird, see picture.
It seems to happen when using the small-tag in templates.
This happens especially with the 2 ImpressThemes.

Anybody has an idea about this?