Reply New Topic
2008/1/22 4:13:45
#1
Offline
Home away from home

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.


2008/1/22 4:35:27
#2
Offline
Home away from home

Re: Can Smarty parse a CSS file?

Would be a very nice feature if possible.


2008/1/22 6:21:55
#3
Offline
Home away from home

Re: Can Smarty parse a CSS file?

I believe I have something:

http://smartfactory.ca/smarty_css/

For now, the idea is just to output a smarty template between "style" tags:
<style> <{include file="$current_path/smarty_css_styles.html"}> </style> <h1>Testing CSS parsing with Smarty</h1>


And the content of smarty_css_styles.html is:
.new-class{ border: 2px solid #<{$border_color|default:"000000"}>; padding: 3px; }


Now, this is not the most elegant, but it's a proof of concept, ans it works .

And then we can think of a better way to do this. Perhaps, we could create a new method in the xos_opal_Theme class, something like xos_opal_Theme::addStylesheet() but where we would pass smarty template file holding the CSS definitions. This new method would still then output a "style" tag containing the "smartified" CSS definitions, but within the "head" section of the source, which is acceptable.

Thoughts ?

_________________
Marc-André Lanciault
Founder and CEO INBOX International inc.
Co-Founder ImpressCMS

2008/1/22 6:57:54
#4
Offline
Home away from home

Re: Can Smarty parse a CSS file?

As a proof of concept i'd say, yes, this is the idea. The problem with that is that the CSS file is included into the main HTML file, which results in a larger HTL file and unability to cache the style sheet.

BTW, I'm negociating a new site for a new customer. Accesibility of the site must be certified. It's a great opportunity to push this concept, as a Smarty driven color scheme would allow disabled people to choose a special color squeme that improves readability.

Perhaps we could even detect the browser and change automatically to this optimized-for-disabled-people theme design when browser is blah-blah-blah... Instead of having two different CSS style sheets, we define some variables for colors and edit just this.

I'll think about it.

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

2008/1/22 10:58:09
#5
Offline
Home away from home

Re: Can Smarty parse a CSS file?

Really very nice ideas... please nachenko... go on... it will be great to have something like this...

_________________

Ohloh profile for nekro

2008/1/22 13:32:26
#6
Offline
Home away from home

Re: Can Smarty parse a CSS file?

As you may know, Smarty has its own support forum at http://smarty.net/

I did a quick search, and couldn't find anything. But the Smarty gurus there might know a better way of doing this.


2008/2/3 20:45:16
#7
Offline
Home away from home

Re: Can Smarty parse a CSS file?

Considered alternating styles?

I released a few themes for whOOPS that do this.

http://www.xoops.org/modules/news/article.php?storyid=3627
http://www.xoops.org/modules/news/article.php?storyid=3624

The way I incorporated them then was cheesy as hell, but it does exactly what you wanna do...


Even stores the users choice to a cookie.

My site is closed down while I make the switch to impress, so here are the direct downloads for these two themes.

http://www.dnagamer.com/xoops/halo.zip
http://www.dnagamer.com/xoops/MrT_Colors.zip

Both use the alternating styles functionality. Be sure to pay close attention to the <a> tags as that is where the magic happens.

As far as browser sniffing is concerned it is heavily frowned upon. However you can use conditional statements to knock out pretty much every engine.


2008/2/4 1:31:35
#8
Offline
Home away from home

Re: Can Smarty parse a CSS file?

Thanks MrTheme.

Working on a Drupal site I found a solution that adds some overhead, but just a bunch of lines.

I still miss the possibility of defining variables in CSS, for colors and such. Search & replace works fine, but it's still a pain in the ass.

I know this is something that should be added in next version of CSS, and properly supported by browsers, but we all know Internet Explorer is still unable to support many CSS2 items, and Firefox 2 still have some bugs too.

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

2008/2/4 5:15:42
#9
Offline
Home away from home

Re: Can Smarty parse a CSS file?

Well, we can expect our next browser releases sometime in the third quarter of the year.

FF3 is in beta, and you can get it now... and its wonderful might I add.

IE8 is of course being hidden by MS, and they say 24 months. So 6 years from now when they actually release it... maybe it will fully support css2, but by then we will be using telepathy to transfer data so... yeah.

They seem to be paying a lot of attention to web standards this go around, and their model hasn't significantly changed like it did from IE6 to IE7. As well as the introduction of a new meta mode. IE8 might be fun to use on my 80th birthday.

Its going to be an interesting few years with browsers. With mozilla doing a major release every year, and IE actually paying attention to webstandards.org and w3c.

All I know is that they allege that IE8 has already passed the acid2 test. Where neither my ff2 or my ff3b pass it. Then again, the test is to see if the browser can handle bad css... only IE would bloat about being able to digest bad css.

Anywho, yeah... passing style variables through smarty would be cool. Sublime and I were working on a module to handle it a while back, but I guess we saw something shiny and got distracted. Though it would have been php. Simple to do it as a module. with a little call to the database to retrieve user defined hex values, then pass them onto the stylesheet. it really is just a matter of wrapping php around a skeletal css file, and writing to it with the customizable classes / divs / tds / tables .. blah blah blah on submit.

Atleast that was the way I had planned to do it.


Reply New Topic extras
 Previous Topic   Next Topic
You can view topic.
You can start a new topic.
You can reply to posts.
You cannot edit your posts.
You cannot delete your posts.
You cannot add new polls.
You cannot vote in polls.
You cannot attach files to posts.
You can post without approval.