23 November 2007
Tiled Skin Switcher for b2evolution
)Published on November 23rd, 2007 @ 06:31:30 pm, using 1322 words, 13904 views
I’ve been using b2evolution as my blogging platform for several years now, and have always found the default template switcher located in the sidebar to be, well, boring. It’s a text-based list that shows the various skins available on a b2evo blog from which that blog’s readers can select to customize their reading experience. The operative words here are “text based list". Clever skin names aside, it does little to show the reader what a template actually looks like before being selected, and eye-candy is always welcome, right? With this in mind, I set about putting together a more visually intuitive way of displaying to the user what b2evo skins look like, without that user actually having to switch to that skin in order to see it.
What I came up with is a small piece of PHP code which renders a tiled list to display thumbnails of each b2evo skin, replacing the boring, and uninformative, text list. At the time of this writing, the tiled list can be seen in action in the sidebar of each skin on this blog.
If you’d like to implement a similar list on your own b2evolution blog, you’ll need a few things first… Since I’m providing you with the code here, you’ll need the ability to copy and paste text from one file to another. Simple enough, yeah? Second, you’ll need some kind of graphics editing program, such as Adobe Photoshop or the free GIMP software, which is actually a pretty powerful piece of software. In any case, you’ll need some kind of graphics program in which to create the thumbnails to be displayed in the list…
Alright, on with the show…
First, load each of the skins available on your blog and take a screen-capture of the page. Next, import those captured screens into your preferred graphics program. Find a suitable area of the rendered page which gives a good representation of the overall look and feel, and crop a 62x62 pixel thumbnail from it. Save this thumbnail as skintile.jpg and save it into the root folder of the skin from which it was cropped. To be more specific, you want to save the thumbnail to the same folder which stores the skinshot.jpg file that is standard in all b2evo skins.
The next step in implementing our new tiled skin switcher list is to open the /skinname/_main.php file in each of the skins you make available to your blog readers, and locate the following block of PHP code which renders the default text list:
<?php if( ! $Blog->get('force_skin') )
{ // Skin switching is allowed for this blog: ?>
<div class="bSideItem">
<h3><?php echo T_('Choose skin') ?></h3>
<ul>
<?php // ------------------------------- START OF SKIN LIST -------------------------------
for( skin_list_start(); skin_list_next(); ) { ?>
<li><a href="<?php skin_change_url() ?>"><?php skin_list_iteminfo( 'name', 'htmlbody' ) ?></a></li>
<?php } // ----------------------------- END OF SKIN LIST ------------------------------ ?>
</ul>
</div>
<?php } ?>
The above code comes from the ‘custom’ skin, and may be slightly different if your b2evo skins are already customized. The edits you’ll be making are to the code in the middle of the block, between the - - - START - - - and the - - - END - - - comments, and more specifically the code inside the <li> list item </li>. Before you edit this file, please make a backup copy of your existing _main.php file. I can’t (and won’t) be held responsible if you make a mistake and bring down your site.
Now, replace the code inside the list item above with the code shown inside the list item below:
<?php if( ! $Blog->get('force_skin') )
{ // Skin switching is allowed for this blog: ?>
<div class="bSideItem">
<h3><?php echo T_('Choose skin') ?></h3>
<ul class="skinlist">
<?php // ------------------------------- START OF SKIN LIST -------------------------------
for( skin_list_start(); skin_list_next(); ) { ?>
<li><a href="<?php skin_change_url() ?>" title="Switch to the <?php echo "$skin_name" ?> skin" ><img src="../<?php skin_list_iteminfo( '','htmlbody' ) ?>/skintile.jpg" width="62" height="62" alt="Switch to the ''<?php echo "$skin_name" ?>'' skin" title="Switch to the b2evo skin ''<?php echo "$skin_name" ?>''" /></a></li>
<?php } // ----------------------------- END OF SKIN LIST ------------------------------ ?>
</ul>
</div>
<?php } ?>
Save this new skin switcher code into every skin on your blog and finish the process by adding a few lines of CSS to the stylesheet of each of your b2evo skins:
.rightside ul.skinlist {margin-left:0px;list-style-type: none;}
html>body .rightside ul.skinlist {margin-left:-24px;list-style-type: none;}
.rightside ul.skinlist li {margin:0px 5px 0px 0px;display:inline;}
.rightside ul.skinlist li img {margin:5px 0px;}
The specific selectors may need to be adjusted to match the DIV structure of the skins you are using. The CSS code shown here is mainly for reference, since this site uses custom skins designed by yours truly, and which deviate slightly from the standard b2evolution way of doing things. Therefore, your b2evolution skins, if they were downloaded directly from the b2evolution website, may use different selectors to identify the sidebar DIVs. However, the specific characteristics of the unordered lists (UL) and list items (LI) will more than likely be suitable without any serious editing.
NOTE: The process outlined here is all or nothing. If you decide to implement this system in one of your skins (or more) then you will need to create the thumbnails, as described above, for every skin on your system regardless of whether or not those other skins will use the tiling list. The reason for this is that the skins which do use the tiling list will need to load the tiles from all the other skins on the system. If those other skins do not have a skintile.jpg file in their root folders, their links in the tiling list will appear as empty spaces with the ‘title’ tag being rendered in place of the tile itself. This will break the visual layout of the list. So, to make a long story short, if you choose to implement tiling skin lists in one or more skins on your b2evolution blog, every skin on your blog “must” have skintile.jpg files in it.
Some things to pay attention to and plan for before you begin… if the skins on your blog are all designed for 800px width, then the sidebar may be more narrow than the sidebar on this blog. (The b2evo skins on this blog have all been custom-designed for 1024px and higher monitor resolutions, which also deviates from the standard b2evo blog skin.) Consequently, you will want to plan out ahead of time the width of the skintile.jpg files which you build for each of your b2evo skins. If your sidebar is narrow, you may want to go with smaller thumbnails to be able to display 3 or 4 tiles across, or perhaps go with wider tiles to display fewer tiles across, but at the same time tiles which show more detail about the skin they point to.
Leave me a comment if you find this skin edit useful… all feedback is welcome…
or, What my speakers are currently pumping…
Photek (aka Sentinel) - Heavy Vibes [BRSS40]
This post is the creative work of Yours Truly and is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
web development, b2evolution, blog template, skin switcher, PHP, CSS
Permanent Link
