Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
Putting a Face to a Name
Lots of folks like b2evolution's multi-blogging capabilities and use it to create a community of bloggers (family members, artist's groups, church congregations, to name a few). This often means that the blog name is the author's name. Why not (like Adam asked) associate an image with each author, so that when you hover over the blog button, you see their photo? (The image on the right shows an example for "Jessica's Blog").
Great idea Adam!
Our blog isn't a multi-blog, so I was reluctant to pursue this question, because I couldn't test it. Unbeknownst to Adam, the technique he wanted to use (Eric Meyer's pure CSS pop-up) is similar to the one I (independently) developed for our image/caption zoom (the "pop" demonstrated by many of the images here). This hooked me!
First, I made a mock-up of Adam's page, where you can see the rollover concept in action and view the inline CSS & HTML using 'view source'. I then dusted off my server software (yellowtip), fired up the demonstration b2evo blog (which IS a multi-blog) and got the whole thing working on my desktop.
This tutorial will provide xhtml(strict)-valid code and use a pure-CSS method to create image rollovers for b2evolution blog buttons. It works with both MSIE and FireFox browsers. Further, this rollover technique can be applied to ANY link, not just b2evolution blog buttons, though this is the focus.
If this is something you might like to add to your site, read on ...
This is a test of HTML
The above outlined text & color may not seem like such a big deal, but you might think it was a bigger deal if I told you that it was accomplished via email. That's right ... blogging 'on the run'!
"So how did you achieve such a feat?" you ask. Well, the answer, like so many others, lies in the questions that are asked on the b2evolution forums. Specifically, a fellow by the name of Matt, was looking for a blogging solution. He had heard that b2evolution did NOT support blogging via email and came to check this out for himself.
I picked up the torch because (1) I had chosen diary-x as a blogging solution in 2001 because it was the ONLY blogging solution I found (at the time) that offered blogging via email (our PCT journal was written using this software and you can see it here) and (2) I hadn't yet blogged by email and because I might want to one day, decided that NOW might be a good time to figure out how to do it!
There is a "How to post by email" tutorial, but it's based on version 0.8.6 and didn't do it for me. Further, as explained by this thread, many people have been experiencing problems trying to post via email.
This article will provide the means by which you too, can make b2evolution blog entries via email. Hopefully, with less of the frustration I experienced in doing it.
Posting a valid XHTML 1.0 (Strict) ImageMap
EDIT: If you want an XHTML 1.1 valid image map, read these this article.
Note: This article fails once again passes validation because it is written to XHTMLv1.0 (Strict) standards and our pages are now used to be validating against XHTMLv1.1. (Update: I got tired of our website failing in FireFox, using XHTMLv1.1, whenever code had a simple tag typo. We just fell back to using v1.0 Strict, once again.)
If you move your mouse over the image on the right, in the lightened area, you'll see a "hotspot" there. If you click on this hotspot, this page will open into the Adidas running shoes homepage. (Use the browser 'back' button to return, if you would like to see what the Adidas homepage looks like.) THIS is a simple example of an "image map", where a certain area of an image is linked to another page & clicking it will take the visitor to that page. It's a simple example because there is only one "hot spot" on the image and it is rectangular in shape. One can have many hot spots and the shapes can be highly irregular.
Recently, someone on the b2evolution forums asked about posting such an animal in b2evolution - see the original discussion. As it turns out, it's very straight forward, but one has to modify the _formatting.php file so that the html-checker will recognize the code (which isn't as straight forward).
This tutorial provides xhtml(strict)-valid code and shows you what needs to be modified in the /conf/_formatting.php file.
Random Sidebar Image linked to Blog Entry
We wanted to add a random picture to our sidebar, but we took it a step further because we like to add 'depth'. A static picture is lifeless, so we linked the picture to the journal entry where the photo could be found.
As far as changes to b2evolution go, it turned out to be a fairly easy. There are, no doubt, other ways of accomplishing the same task, but we chose the method outlined below. The nice part about this modification is that it only affects one file in your custom skins folder (_main.php), which means that there's no fear of overwriting the modification next time you upgrade the software.
This modification was implemented and is currently (Feb05) used on this site, with version 0.9.0.11. (The "At Random" section of the sidebar, on the right.)
For those that don't know, b2evolution is the blogging engine that we use to write these pages. It is a php-based, open-source (free), multi-linqual, multi-blogging software program, developed by François Planque.
A great feature of b2evolution is that it can be customized. Of course, a source of frustration is that it can be customized.
To learn more about the software, visit b2evolution.net.
Because I've been getting emails from people asking how to do this, or do that, I've decided to create this b2evo category. It's really a "HOW TO" section, containing step-by-step instructions (with code) about some of the customizations that I've done, utilized or know to work. It's purpose is to serve as a resource for the wider b2evolution community. Each article will be self-contained (although may link offsite for 'more information' or 'details'. The items here will be supported (if you have questions, email me and I will answer them & help you with your website).
This is my way of 'paying it forward' and saying thanks to the developers & those that have helped me. I hope that you find this section useful.