For the last couple of years I’ve maintained these personal pages in WordPress environment using my own themes (WordPress layout templates) built with Themeframe. These pages are also a great playground for me to test different layouts/designs and technical implementation ideas. Hence I’ve recently made some enhanchments here using some of the latest CSS (Cascading Style Sheet) styling possibilities and also some new WordPress plugins. Some of these enhanchments have been easy and some have taken even several days to implement:
1. Header images with links to pages. In the current design I’ve put a sliding header image bar on top of the content area. Currently I have two images for each supported language (Finnish/English) linking to content pages in the selected language. First image links into “Photos” and the other to “Travels”, but I could later increase the number of header images to link to subpages of a selected first level page. This functionality is possible using a plugin called MeteorSlides and its widget plus another plugin called Dynamic Widgets which enables any widget content to link to any page or post. One reason for using this slider plugin is my aim to provide “responsive” content, scaling to the used browser or device size. Meteor Slides images are automatically scaled in a fully responsive way.
2. Changing logo on mouse hover. The site logo (tiirikainen.fi) has been clickable to bring the user to the home page, but it has been previously been implemented using standard WordPress sitetitle text. In my most recent enhancment I wanted the logo to change to different colours when mouse is hovering over it, and this requires a different technique. At the same time I wanted to use a font which is not generally supported by browsers and this already required using images containing text for the logo. Current logo has been implemented using three images and CSS techniques in a way where the actual image always showing is fully transparent without any content and the actual text is shown according to mouse hover/not hover by showing a diffent background image. Hence the font is whatever I want and also text may contain different letters in different colours – and eventually any image I may want. Most CSS techniques for changing images by mouse hover/non-hover do not work with different browsers due to their different support for CSS features, but this technique has been working without any problems at least with the newest version of Chrome, Firefox, Internet Explorer, Opera ja Safari. If someone reading this is interested you can find more information about this technique at ThemeFrame Members Forum – or you can drop me a message. And by the way, these efects do not work with touch screens, they just to not have ‘mouse hover’ functionality!
3. Megamenu and responsive menus. Already some time ago I replaced the standard WordPress menus by a JQuery based mega menu which allows e.g. to add images to menus. To do this I’ve purchased a WordPress plugin called UberMenu. A couple a days ago I realized the generated menu could not fully be seen in smalled devices so today I changed the contents in such a way where the long list of submenus in “Travels” (only in Finnish) cna be seen also in smaller screens. In smaller tablets and smartphones UberMenu gives way to a responsive selection button generated by a plugin called “Responsive Select” which when clicked provides a simple long list of all pages you can select. I believe these both menu options eases navigation on the pages.
