Serendipity Forums

Posted: **Mon Mar 05, 2007 12:55 pm**

Owen Stubbs wrote:No it doesn't - it works exactly as you describe, provided the template author writes their CSS in the manner in which you describe.

You're right, that was just me being a little tired out, sorry.

This is not mandatory at all... I threw it in to cover my @$$.

Your what?

Okay, so if it isn't needed, I'll throw it away.

Edit: I've just now updated zipfile and sandbox. Right now, the only thing that changes with the colorset is the bg color of #serendipity_banner, so you guys better figure out quickly how to change those graphics

I'm still not 100% sure what does work at the moment - calendar images do, graph bar and xml icon don't ..?

YL

Posted: **Mon Mar 05, 2007 3:24 pm**

Hi!

serendpity_loadthemeoptions() is called by serendipity_smarty_init() in include/functions_smarty.inc.php.

So if your config.inc.php file calls it, this adds up to two calls.

We could change that with some code for Serendipity 1.2, but then it would mean this theme won't run on serendipity 1.1 properly...

Regards,
Garvin

Posted: **Mon Mar 05, 2007 4:22 pm**

Hi

Now I've been looking at styling a couple of colour-sets I've got a couple of suggestions to add into the main css file.

1 - we should set all the calendar background colours to inherit
2 - we should set the theme chooser select to 90%

Also now I've seen it in glorious technicolour, I can see it renders differently in Safari and Firefox, In Safari there's a 10px margin to the right of the right hand sidebar in 3 col mode and 2 col sidebar on right mode.

Dave

Posted: **Mon Mar 05, 2007 4:37 pm**

In response to a message I left to Garvin, he mentioned the following regarding our "variable setting"

garvinhicking wrote: How about making a colorset configurable, and instead of setting $catebory_icon etc. values, you instead use
Code: Select all
<img src="img/xml{$template_option.colorset}">
So the image name is used as "xml_lightgrey.gif" etc.

If this works, it will be painfully simple! Maybe I have my syntax a bit screwed up, but it is not working for me. To keep it simple, let's say I have {$template_option.colorset} value of dk_grey. In my template directory I have dkgrey_style.css and dkgrey_back.gif (the back calendar arrow).

What I tried, but didn't work, was this: In index.tpl:

Code: Select all

<link rel="stylesheet" type="text/css" href="{serendipity_getFile file="{$template_option.colorset}_style.css"}" />

And in plugin_calendar.tpl, I tried this:

Code: Select all

<img alt="{$CONST.BACK}" src="{serendipity_getFile file="img/{$template_option.colorset}_back.gif"}"

Sure looked like it would work to me. Do I just have a syntax error?

Posted: **Mon Mar 05, 2007 4:58 pm**

Hi!

If you want to combine variables into a {} call, that won't work using your code of:

Code: Select all

<link rel="stylesheet" type="text/css" href="{serendipity_getFile file="{$template_option.colorset}_style.css"}" />

You can't pass a variable as a "file=" parameter in Smarty. Sadly I don't know how/if you can combine them in a smarty {assign} call. Maybe you can look in the smarty docs or forums if there's a way?

What would work of course is that you use the usual if/else statements that check {$template_option.colorset} and conditionally use 'grey_style.css' etc. - like all colorset-enabled styles currently do.

What I was talking of what would work is:

Code: Select all

<img alt="{$CONST.BACK}" src="/templates/mytehem/{$template_option.colorset}_back.gif" />

because then the variable is not contained within a smarty function call.

HTH,
Garvin

Posted: **Mon Mar 05, 2007 5:20 pm**

garvinhicking wrote:What I was talking of what would work is:
Code: Select all
<img alt="{$CONST.BACK}" src="/templates/mytehem/{$template_option.colorset}_back.gif" /> 
because then the variable is not contained within a smarty function call.

HTH,
Garvin

Is there some equivalent of the css {TEMPLATE_PATH} that can be used in lieu of a hard path to the template folder?

Posted: **Mon Mar 05, 2007 6:38 pm**

Hi!

Yes, you could try:

Code: Select all

{$serendipityHTTPPath}templates/{$template}/item.gif

HTH,
Garvin

Posted: **Mon Mar 05, 2007 7:46 pm**

IT WORKS!!! IT WORKS!!! This is beautiful. Nothing in config.inc.php. No lengthy if/elses clogging up everything. Nothing to modify if colorset choices change. Now, remember, I have YET to attempt anything with the feed icon, and this method may NEVER get a feed icon to change (until someone gives us a tpl for any of the plugins that are missing them. However, this works for colorset css files, calendar arrows (which I also use in my entries), and the graph bar on the archive page.

config.inc.php:

Code: Select all

$template_config = array(
array(
        'var'           => 'colorset',
        'title'         => 'Color Set',
        'description'   => 'Select the color set you want to use',
        'type'          => 'select',
        'default'       => 'ltgrey',
        'select_values' => array('ltgrey' => 'Light_Grey', 'dkgrey' => 'Dark_Grey', 'blue' => 'Blue')
    ),

In my template directory, I have css files for each of these colorsets as follows: ltgrey_style.css, dkgrey_style.css and blue_style.css (ie, "colorset_style.css"). I also have similarly named graphics in the template's /img/ folder, as follows: ltgrey_back.gif, ltgrey_forward.gif, ltgrey_xml.gif and ltgrey_graph_bar.png. I have these for each color, consistently named as "colorset_imagename, just like the css filenames.

Again, I have not touched the feed icons yet, but here is what I have for everything else:

index.tpl & commentpopup.tpl:

Code: Select all

<!-- in addition to the template style.css, use additional stylesheet that corresponds to selected colorset -->
<link rel="stylesheet" type="text/css" href="{$serendipityHTTPPath}templates/{$template}/{$template_option.colorset}_style.css" />

In plugin_calendar.tpl (left/back arrow shown first, right/forward arrow second):

Code: Select all

<a title="{$CONST.BACK}" href="{$plugin_calendar_head.uri_previous}"><img alt="{$CONST.BACK}" src="{$serendipityHTTPPath}templates/{$template}/img/{$template_option.colorset}_back.gif" /></a>
<a title="{$CONST.FORWARD}" href="{$plugin_calendar_head.uri_next}"><img alt="{$CONST.FORWARD}" src="{$serendipityHTTPPath}templates/{$template}/img/{$template_option.colorset}_forward.gif" /></a>

I also use the calendar arrow for the previous/next page in entries, so entries.tpl (again, left/previous first, right/next second:

Code: Select all

{if $footer_prev_page}
    <a title="{$CONST.PREVIOUS_PAGE}" href="{$footer_prev_page}"><img alt="{$CONST.PREVIOUS_PAGE}" title="{$CONST.PREVIOUS_PAGE}" src="{$serendipityHTTPPath}templates/{$template}/img/{$template_option.colorset}_back.gif" /></a>
{/if}

{if $footer_next_page}
    <a title="{$CONST.NEXT_PAGE}" href="{$footer_next_page}"><img alt="{$CONST.NEXT_PAGE}" title="{$CONST.NEXT_PAGE}" src="{$serendipityHTTPPath}templates/{$template}/img/{$template_option.colorset}_forward.gif" /></a> 
{/if}

And finally, the graph bar used in entries_archives.tpl (BulletProof version):

Code: Select all

<li class="archives_graph"><img src="{$serendipityHTTPPath}templates/{$template}/img/{$template_option.colorset}_graph_bar.png" alt="bar graph" height="10" width="{math width=100 equation="count * width / max" count=$month.entry_count max=$max_entries format="%d"}" style="border: 1px solid #000000" /></li>

Ultimately, we explored about 4 different ways to make this happen. Looks like the simplest is the best. Just follow a consistent naming convention for the images, and everything works great. The best part is there is no need to modify any of these tpls for colorset name modifications or additions.

Whew.... so many hours into such a little thing!!! What an education!! I need a drink!

Posted: **Mon Mar 05, 2007 8:08 pm**

Hi!

Happy drinking. You deserved it *g*

Regards,
Garvin

Posted: **Mon Mar 05, 2007 8:21 pm**

garvinhicking wrote:Hi!

Happy drinking. You deserved it *g*

Regards,
Garvin

Would not have gotten here without your input Garvin! The drinking will have to wait. Still early afternoon here in Chicago.

Now, who's ready to start on that feed icon??!!!!

Posted: **Mon Mar 05, 2007 9:56 pm**

With regards to using this for Bulletproof, I wonder if the original method of calling the default images should be preserved. I do not want to elaborate on every image, so I will just use the calendar "back" image as an example. If there is no colorset option, the code I used above should evaluate to "_back.gif". Is that correct? If so, I suppose a quick fix would be to change my colorset values to end in an underscore (ie, instead of "lt_grey", make it "lt_grey_", then change the code in the tpl to "......{$template_option.colorset}back.gif". That would, presumably, allow the expression to evaluate to "back.gif" if colorset is blank. Is that correct?

But here is another problem. What if someone copies bulletproof to another folder as a starting point, plays around in it for awhile, thereby setting a value for $template_option.colorset, then deletes the colorset option? A value still exists for $template_option.colorset, doesn't it (unless they delete it from the database)?

Maybe it is simple to leave the original method in the tpl, but commented out, ie

Code: Select all

<!-- use this method if no colorset <a title="{$CONST.BACK}" href="{$plugin_calendar_head.uri_previous}"><img alt="{$CONST.BACK}" src="{serendipity_getFile file="img/back.gif"}" /></a> -->

Still another option might be:

Code: Select all

{if !empty($template_option.colorset)}
    <a title="{$CONST.BACK}" href="{$plugin_calendar_head.uri_previous}"><img alt="{$CONST.BACK}" src="{$serendipityHTTPPath}templates/{$template}/img/{$template_option.colorset}_back.gif" /></a>
{else}
    <a title="{$CONST.BACK}" href="{$plugin_calendar_head.uri_previous}"><img alt="{$CONST.BACK}" src="{serendipity_getFile file="img/back.gif"}" /></a>
{/if}

That one still suffers from the same problem as the first if a value is ever set a value for "colorset".

Then, the final alternative - 2 bulletproofs. One with the colorset code in all the tpls and config.inc.php, and one without the extras. Then again, maybe I am overthinking this issue!

Posted: **Mon Mar 05, 2007 10:11 pm**

Owen Stubbs wrote:Now, who's ready to start on that feed icon??!!!!

I'll be - tomorrow morning, after I've caught up on my reading and cleaned out the bulletproof files. I'm not anywhere near my workstation tonight, so this will have to wait

YL

Posted: **Mon Mar 05, 2007 10:26 pm**

garvinhicking wrote:serendpity_loadthemeoptions() is called by serendipity_smarty_init() in include/functions_smarty.inc.php.

So if your config.inc.php file calls it, this adds up to two calls.

We could change that with some code for Serendipity 1.2, but then it would mean this theme won't run on serendipity 1.1 properly...

Hohum. Okay, first of all: I have done at least two templates which already do that since they use the dynamic navbar code, and as far as I remember, other people have used that code, too. Of course, none of these was considered as a default template, but in my opinion, the performance issue can't be that bad.

Personally, I wouldn't want to do any template without that code, but of course we could still do a version of bulletproof without it which could be used for default and framework. However, in my opinion, that would be a shame since your dynamic navbar code is so beautiful

Plus, almost anyone using s9y nowadays want to have that navbar, so we should have it.

So the other option would be to keep this in the drawer 'til 1.2 is released ... wouldn't be too bad, I guess. Of course everybody is anxious to use this for 'real' templates, but since I figure 1.2 is some time away, we'd gain some valuable development time. Right now, there's the issue with exchanging the graphics according to the selected colorset, and the Safari/Firefox issue Dave just dug up. Plus, I have a strong feeling this is gonna need solid documentation. Of course, I don't feel the slightest urge to write documentation

Hrm. This is a slightly confused post, so I'm gonna get a good night's sleep and check out Don's latest code sensation tomorrow morning

YL

Posted: **Tue Mar 06, 2007 3:33 am**

I'm running out of energy for the day. I didn't really get very far on the feed icon. I read, and re-read, this thread: http://board.s9y.org/viewtopic.php?t=59 ... =feed+icon about how the template shinny plastic was switching feed icons for different colorsets.

Something about switching out the background bugs me a bit, but it is worth considering and might ultimately have the most potential. However, as near as I can tell, his solution is not quite as solid as he might think, and I'm not even sure it works completely with IE due to his a:first-child tags. I know of at least a few improvements that clean up his css (and works), would be something like this, in lieu of his padding tricks and other stuff. It works a little for the others, but not entirely:

Code: Select all

.serendipity_xml_icon {
    background:url('img/blue_xml.gif') 0 0 no-repeat;
    visibility: visible;} 

 .serendipity_xml_icon img {
    visibility:hidden;}

At first glance, the category plugin looked to be the easiest, because I saw a plugin_categories.tpl file in the default template folder. Problem is that I do not think this plugin is actually using THAT tpl.... none of my revisions are reflected in the HTML output from a copy located in my template folder.

Anyway, the rest of you guys are hours ahead of me - so hopefully someone will find some quick wins on this feed icon while I sleep!!

Posted: **Tue Mar 06, 2007 8:41 am**

I'm still not at my workstation, so just some notes for the time being:

Owen Stubbs wrote:I read, and re-read, this thread: http://board.s9y.org/viewtopic.php?t=59 ... =feed+icon about how the template shinny plastic was switching feed icons for different colorsets.

I honestly don't think this is the road we want to take, especially since this technique doesn't seem to work for the freetag plugin.

As far as I can see, we need two things: a) a list of plugins using the xml icon, and b) .tpl files for those plugins. Of course, the latter means that some plugins will need to be 'recoded'.

Your code demonstrates how easily images can be changed if .tpl files are present, so that's the preferred method in my humble opinion.

YL

Serendipity Forums

Brainstorming: What do we "need" template-wise?