Dizkus

I am not very good at graphics, only did some rendering in my wild years. But I have to do with languages a lot, and that is why I always have an eye on language-related issues. (occupational disease) PostNuke has still plenty of room for improvements, but today I would like to talk especially about themes.

One of the features some themes come along with are quicklink buttons. You don't need to go through the menu, just click on that button ad you are there. However, those buttons create two problems:

- One needs certain graphics skills to modify them.
- They only work for one language.

Some theme designers help reducing the first problem by attaching template images to their themes. The second however remains, although there is a very simple solution: blank buttons.

The approach I'd like to describe has a number of advantages:

- No javascript, only CSS. (no preloading either)
- Faster loading, since only one image is required for all buttons.
- Button text can be easily modified with just a text editor.
- And of course: ML capability.

As an example, I have modified xvtality. You can find the modified version here. xvtality used javascript to preload all quicklink buttons and on mouseover would swap the button image with another version. Here is the HTML code (preloading and javascript not included) for a button:

All this happens in a table cell, so I took it all out and replaced it with this:

Much shorter, and probably also easier to understand: I created a class "quickl" for the left quicklink buttons and assigned it to that cell. Inside the cell, there is just a link, with all three elements using PNML tags, so the real text (button text, URL and tooltip) is defined elsewhere. The original xvtality had already used defines, but the buttons were still "plain" graphics. Here is the CSS code for the left buttons:

The button image now consists of two buttons, one normal, one for mouseover. It is 214px long in total, but only half of it is shown, and that part will be shifted to the other side on mouseover. Here is a sample button. You can also have a look at a sample installation in English, Chinese and German. (I should mention that I colorized the originally gray images. The package you can download contains a gray, green and brown set of images.)

Modifying these quicklinks is easy: Just go to the language files and modify button text, URL and tooltip text there. In case someone doesn't like the button text's style, just modify the CSS.

So why did I write this? Not everyone is a Michelangelo, not everyone has Photoshop. (Gimp is really nice, but while it can open PSD files, it can not modify text layers within them.) For those with less artistic skills (like me), the above solution will be much easier for customization. And it is so far the only solution I found to make quicklink buttons ML capable. (Plus, no javascript involved...)

I understand that not everyone will need this, but it has a few advantages, and perhaps theme designers could remember us artistically challenged and/or multilingual people next time they design a theme.

If someone has an even better solution - let us know! And if someone knows a way to make block names ML capable, now that would be great...

If you wanted to use images... or template anything language specific:





--
David Pahl
Zikula Support Team

You don't need to include a file either... you can just but your relenvent code directly after the IFs and Elses... Always adjust the code as needed..

--
David Pahl
Zikula Support Team

I see... But then it seems I need to create a different template (and still the same) for each language, and each time a language is added, all main templates need to be modified. That's something I (personally, others may have different views) would like to avoid. I'm not very good at HTML, CSS or PHP, so it took me a while to get this going. And I think I'm not the only PostNuke user with that skill level...

Someone told me once to use a separate CSS file for each language, but that too is not really what I would like to maintain. I have currently two menu blocks on that site, which with three languages means I have to maintain six menu blocks - and that's not funny. It should be two menu blocks, applying PNML tags or defines...

The logic holds true without separate templates...



Now we have different buttons for different languages...



edited by: AmmoDump, Jul 05, 2007 - 10:52 AM

--
David Pahl
Zikula Support Team

Or.....



Now we use the original code for the original navigation... assuming the language was English... otherwise we use your code for all other languages.






--
David Pahl
Zikula Support Team

Hmm, I have used a condition or two, but had never thought of doing this... It's definitely another way, though I personally would not walk it. xvtality has ten quicklink buttons. Three languages result in about 30 IF conditions...

And one more problem: buttons... An important reason why I started this was that I had problems creating "nice" buttons. I'm just not really comfortable with doing "web graphics". So I wanted to be able to modify some text instead, something that anyone on any computer should be able to do...

And when I think about it... My code is probably also a bit shorter than yours... But I'll remember this method in case I once need to do something depending on the language...

Sorry, hadn't noticed your second post... Well, that too can be done, but at least I would not want to do it... First of all, it's way more complicated than anything else. I was surprised that the code I suggested above would be even shorter than the original - and do more. (OK, the text on my buttons does not look as nice as the one coming out of Photoshop, but I'm sure CSS can do something here.) In the beginning I had tried to rearrange some of the buttons, but with all the preloading and swapping I really got lost...

And, while I know that many web designers like javascript, I really don't. I was responsible for a slightly larger network once, and I received all those mails from Clam with complaints that again a user went to a site with a trojan downloader (in javascript) embedded. So I tried to get rid of that one too. As long as there is another way to do it, I will try to avoid javascript.

Not really, you do not need a different conditional statement for each link... do as much stuff as you like for each if statement. But we assgined a variable so we can be even more cleaver... you can use the xanthia image path plugin with the variable we assign to language and automate the image be pulled from what ever directory the language is set for... thus eliminating the conditional statements all together.



Of course we do not need to stop here.. we can create a block (menu block- even)with whatever links we want to put in it.. we can use a theme level block to grab the block and render it automating the image files... (not for the beginner, but it should be able to do with some smarting file naming...) Using the proper CSS we could get the block to even go horizontally...

Sorry, I am just really been getting into pnRender of late, there is no stopping this thing.. except my limited knowledge...




--
David Pahl
Zikula Support Team

I think that conditionals for languages are un-needed.
pnimg makes all the work. i remember that pnimg search first in the theme/images/lang, if file-not-exist then search in theme/images, and follow with the pnroot/images etc.

Learn to use and you have only one line of code, and put your images in theme/images/$langs and the defaults in theme/images.

--
- Mateo T. -
Mis principios... son mis fines

Huh, I only due English, but that sure explains why I have edited the wrong image before and had to go back and edit the image/lang/ image in some modules

That said, we could add the conditional back in to default to language based link, instead of an image based one, in the event there is no associated language image. The default image in this case maybe the wrong one for the user.

Or we could... I will end it here, cause now I am getting ridiculous.

--
David Pahl
Zikula Support Team

pnimg looks good, I think I never really noticed this one, there are just too many pnRender tags... Though I would not want to use it here in a menu, because I better don't lay my hands on web graphics, the results would be rather tragic...

So if I was a graphics guy, I could create individual buttons for each language and then call them through pnimg - nice... But I hope the theme designers will still put an empty button into their theme package for people like me...

This is why PN is so awesome!

There is nothing wrong with spending a little time getting to know a graphics program. It is pretty much a skill all webdesigners should have. Like me, I know a little about everything... not really a master of any area... I just learn as I go, slowly building my skill sets. In fact for my graphics, I often use many programs, cause I know how to do x in one, y in another, and z in yet another. I use GIMP, Paintshop, and Photoshop.


--
David Pahl
Zikula Support Team

Well, "learning a program" is one thing, but for good graphics you need a little bit more than that - and I know that I don't have it. Besides, if I was a "web designer" and fluent in HTML, CSS, PHP (or maybe better Perl?), then chances are I would not use PostNuke. I'm using it because it allows also non-programmers and non-web designers to present web content in a nice and orderly fashion - which is what some of the programmers and web designers sometimes forget.

And unfortunately, PN does not yet have very good multilingual capabilities - though I have to admit that only few people would create a multilingual site, so most people will be satisfied as long as "it works for me"...