Upgrade Skin from 0.9.2 to 1.8

If you have a personalized skin that worked well with the 0.9.2 Sparkle release, this guide will show you what you need to do in order to make your skin work with the 1.8 Summer beta release. This is not a promise to make your skin work! This was written by documenting the steps it takes to convert a 0.9.2 ‘custom’ skin to a 1.8 ‘custom’ skin. Your exact skin might have features that are not part of the ‘custom’ skin, and therefore won’t be covered by this page.

Introduction

What you’ll need to get this done:

A blog using b2evolution version 0.9.2 with a skin you’ve customized to be "your" skin.
A copy of b2evolution version 1.8, and a desire to upgrade your blog without losing your skin.
A willingness to use the ‘custom’ skin included in your "Summer beta" package while you work through upgrading your skin.
Some time to put into this project! You put time into making your skin be exactly what you want, so please be prepared to put time into upgrading it.

One of the biggest changes in the 1.8 release (which started with the 1.6 release) is the use of Plugins. Plugins extend the functionality of your blog, and are implemented by Plugin Hooks. For the purpose of this page just know that there are new plugins and new hooks you’ll want to add to your skin.
Ready? Great! Let’s get started. Open up your skin’s _main.php file in an editor and follow along.

_main.php Head

All the changes on one page

If you don’t have custom tags in your head section you might want to visit this page to see the new version of the head section without a line-by-line explanation of what you need to change.

Changes explained line by line

If you prefer to see what each and every changed line is with an explanation of those changes you can visit this page instead.

_main.php Main Content Area

The first change in the main content area is how you generate your page-specific title, and includes a new "messages" feature. A typical message that could get displayed here is "Your comment will appear once it has been approved". Find the following section in your _main.php file:

<div class="bPosts">
<h2><?php
	single_cat_title();
	single_month_title();
	single_post_title();
	arcdir_title();
	last_comments_title();
	profile_title();
?></h2>

<!-- =================================== START OF MAIN AREA =================================== -->

<?php // ------------------------------------ START OF POSTS ----------------------------------------
	if( isset($MainList) ) $MainList->display_if_empty(); // Display message if no post

Now replace it with this block of code:

<div class="bPosts">

<!-- =================================== START OF MAIN AREA =================================== -->

<?php
	// ------------------------- MESSAGES GENERATED FROM ACTIONS -------------------------
	$Messages->disp( );
	// --------------------------------- END OF MESSAGES ---------------------------------
?>

<?php
	// ------------------------- TITLE FOR THE CURRENT REQUEST -------------------------
	request_title( '<h2>', '</h2>' );
	// ------------------------------ END OF REQUEST TITLE -----------------------------
?>

<?php
	// ------------------------------------ START OF POSTS ----------------------------------------
	if( isset($MainList) ) $MainList->display_if_empty(); // Display message if no post

Individual Post Initialization

A very simple change to make will allow you to style your posts according to their publication status. To do this all you need is a second class in your "bPost" div. Find this line:

<div class="bPost" lang="<?php $Item->lang() ?>">

Replace it with this line:

<div class="bPost bPost<?php $Item->status( 'raw' ) ?>" lang="<?php $Item->lang() ?>">

Individual Post Header (bSmallHead)

There are two noticable changes in this bit of code, though the actual DIV has changed significantly. Given that you’ve customized your skin you should be able to figure out which bits of the following code blocks you will need to change.

Your permalink code is different - this change is not optional!
You can include a link that will send the post author an email without revealing their email ID.

This is the original "bSmallHead" div tag:

<div class="bSmallHead">
<a href="<?php $Item->permalink() ?>" title="<?php echo T_('Permanent link to full entry') ?>"><img src="img/icon_minipost.gif" alt="Permalink" width="12" height="9" class="middle" /></a>
<?php
	$Item->issue_time();
	echo ', ', T_('Categories'), ': ';
	$Item->categories();
	echo ', ';
	$Item->wordcount();
	echo ' ', T_('words'), ' &nbsp; ';
	locale_flag( $Item->locale, 'h10px' );
?>
</div>

This is the new "bSmallHead" div:

<div class="bSmallHead">
<?php
	$Item->permanent_link( '#icon#' );
	echo ' ';
	$Item->issue_time();
	echo ', by ';
	// Load Item's creator User:
	$Item->author();
	$Item->msgform_link( $Blog->get('msgformurl') );
	echo ', ';
	$Item->wordcount();
	echo ' ', T_('words');
	echo ', ';
	$Item->views();
	echo ' &nbsp; ';
	locale_flag( $Item->locale, 'h10px' );
	echo '<br /> ', T_('Categories'), ': ';
	$Item->categories();
?>
</div>

There is only one change in the "bSmallPrint" div: the code for your permalink. Notice how this one is slightly different than in your "bSmallHead" div? Feeding appropriate parameters allows you some control over what is displayed, but this page is not about controlling functions through parameters.

<a href="<?php $Item->permalink() ?>" title="<?php echo T_('Permanent link to full entry') ?>" class="permalink_right">
    <img src="img/chain_link.gif" alt="<?php echo T_('Permalink') ?>" width="14" height="14" border="0" class="middle" />
</a>

<?php $Item->permanent_link( '#', '#', 'permalink_right' ); ?>

Special Pages Switch

The "switch $disp" section has two new cases: one for the message form (emailing the author) and one for subscriptions. Find in your _main.php the following block of code:

        case 'profile':
		// this includes the profile form if requested
		require( dirname(__FILE__).'/_profile.php');
		break;
}

Replace it with this block of code:

        case 'profile':
		// this includes the profile form if requested
		require( dirname(__FILE__).'/_profile.php');
		break;

	case 'msgform':
		// this includes the email form if requested
		require( dirname(__FILE__).'/_msgform.php');
		break;

	case 'subs':
		// this includes the subscription form if requested
		require( dirname(__FILE__).'/_subscriptions.php');
		break;
}

_main.php The Side Bar

There are a few small changes in the sidebar, and quite a few big ones. Most of the big ones involve changing what was a call to another file into a plugin hook.

Recently (cached) and Calendar

In your sidebar if you have a link to "Recently (cached)" you will want to either comment it out or delete it. In the same bSideItem div the calendar has moved outside the unordered list AND turned into a plugin. Find this block of code:

<ul>
	<li><a href="<?php $Blog->disp( 'staticurl', 'raw' ) ?>"><strong><?php echo T_('Recently') ?></strong></a> <span class="dimmed"><?php echo T_('(cached)') ?></span></li>
	<li><a href="<?php $Blog->disp( 'dynurl', 'raw' ) ?>"><strong><?php echo T_('Recently') ?></strong></a> <span class="dimmed"><?php echo T_('(no cache)') ?></span></li>
</ul>
<?php // -------------------------- CALENDAR INCLUDED HERE -----------------------------
	require( dirname(__FILE__).'/_calendar.php' );
	// -------------------------------- END OF CALENDAR ---------------------------------- ?>
<ul>
	<li><a href="<?php $Blog->disp( 'lastcommentsurl', 'raw' ) ?>"><strong><?php echo T_('Last comments') ?></strong></a></li>
</ul>

In the following block of code the line for the "Recently (cached)" link is commented out. Also note that the code for the calendar has changed. Replace the block of code above with this:

<ul>
	<!-- <li><a href="<?php $Blog->disp( 'staticurl', 'raw' ) ?>"><strong><?php echo T_('Recently') ?></strong></a> <span class="dimmed"><?php echo T_('(cached)') ?></span></li> -->
	<li><a href="<?php $Blog->disp( 'dynurl', 'raw' ) ?>"><strong><?php echo T_('Recently') ?></strong></a> <!-- <span class="dimmed"><?php echo T_('(no cache)') ?></span> --></li>
	<li><a href="<?php $Blog->disp( 'lastcommentsurl', 'raw' ) ?>"><strong><?php echo T_('Last comments') ?></strong></a></li>
</ul>

<?php
	// -------------------------- CALENDAR INCLUDED HERE -----------------------------
	// Call the Calendar plugin:
	$Plugins->call_by_code( 'evo_Calr', array(	// Params follow:
			'block_start'=>'',
			'block_end'=>'',
			'title'=>'',			// No title.
		) );
	// -------------------------------- END OF CALENDAR ----------------------------------
?>

If you don’t want the calendar included, or if you want to move the calendar elsewhere in your sidebar either remove or move this block of code from the block above:

<?php
	// -------------------------- CALENDAR INCLUDED HERE -----------------------------
	// Call the Calendar plugin:
	$Plugins->call_by_code( 'evo_Calr', array(	// Params follow:
			'block_start'=>'',
			'block_end'=>'',
			'title'=>'',			// No title.
		) );
	// -------------------------------- END OF CALENDAR ----------------------------------
?>

Categories as a plugin

Categories are now a plugin. Find this block of code:

<div class="bSideItem">
	<h3><?php echo T_('Categories') ?></h3>
	<?php form_formstart( $Blog->dget( 'blogurl', 'raw' ) ) ?>
	<?php // -------------------------- CATEGORIES INCLUDED HERE -----------------------------
		require( dirname(__FILE__).'/_categories.php' );
		// -------------------------------- END OF CATEGORIES ---------------------------------- ?>
	<br />
	<input type="submit" class="submit" value="<?php echo T_('Get selection') ?>" />
	</form>
</div>

Replace it with this block of code:

<?php
	// -------------------------- CATEGORIES INCLUDED HERE -----------------------------
	// Call the Categories plugin:
	$Plugins->call_by_code( 'evo_Cats', array(	// Add parameters below:
		) );
	// -------------------------------- END OF CATEGORIES ----------------------------------
?>

Archives as a plugin

Archives are now a plugin. Find this block of code:

<div class="bSideItem">
	<h3><?php echo T_('Archives') ?></h3>
	<ul>
		<?php // -------------------------- ARCHIVES INCLUDED HERE -----------------------------
			require( dirname(__FILE__).'/_archives.php' );
			// -------------------------------- END OF ARCHIVES ---------------------------------- ?>
			<li><a href="<?php $Blog->disp( 'arcdirurl', 'raw' ) ?>"><?php echo T_('more...') ?></a></li>
	</ul>
</div>

Replace it with this block of code:

<?php
	// -------------------------- ARCHIVES INCLUDED HERE -----------------------------
	// Call the Archives plugin:
	$Plugins->call_by_code( 'evo_Arch', array(	// Add parameters below:
		) );
	// -------------------------------- END OF ARCHIVES ----------------------------------
?>

User Subscription Link

The ‘misc’ sidebar section has a new user link for subscription management. In your existing _main.php file find this block of code:

<?php
	user_login_link( '<li>', '</li>' );
	user_register_link( '<li>', '</li>' );
	user_admin_link( '<li>', '</li>' );
	user_profile_link( '<li>', '</li>' );
	user_logout_link( '<li>', '</li>' );
?>

Replace it with this block of code:

<?php
	user_login_link( '<li>', '</li>' );
	user_register_link( '<li>', '</li>' );
	user_admin_link( '<li>', '</li>' );
	user_profile_link( '<li>', '</li>' );
	user_subs_link( '<li>', '</li>' );
	user_logout_link( '<li>', '</li>' );
?>

Syndicate section changes

The "Syndicate this blog" section has two changes. First, the way to link to the XML image has changed. Find this line:

<h3><?php echo T_('Syndicate this blog') ?> <img src="../../img/xml.gif" alt="XML" width="36" height="14" class="middle" /></h3>

Replace it with this line:

<h3><img src="<?php echo $rsc_url ?>icons/feed-icon-16x16.gif" width="16" height="16" class="top" alt="" /> <?php echo T_('XML Feeds') ?></h3>

Second, the "what is RSS" link has changed slightly. This change allows for translation of the displayed text. Find this line:

<a href="http://fplanque.net/Blog/itTrends/2004/01/10/rss_rdf_and_atom_in_a_nutshell" title="External - English">What is RSS?</a>

Replace it with this line:

<a href="http://fplanque.net/Blog/itTrends/2004/01/10/rss_rdf_and_atom_in_a_nutshell" title="External - English"><?php echo T_('What is RSS?') ?></a>

New "Who’s Online" section

You can now display which bloggers and how many guests are currently online in your sidebar. Bloggers online will include a message form (email) link. To include this you ADD new code where you want it to appear in your sidebar.

<?php
if( empty($generating_static) && ! $Plugins->trigger_event_first_true('CacheIsCollectingContent') )
{ // We're not generating static pages nor is a caching plugin collecting the content, so we can display this block
	// TODO: when this gets a SkinTag plugin this check should get done by the Plugin
	?>
<div class="bSideItem">
	<h3 class="sideItemTitle"><?php echo T_('Who\'s Online?') ?></h3>
	<?php
		$Sessions->display_onliners();
	?>
</div>
<?php } ?>

New Path to LinkBack image

The path to images has changed, so you will need to correct the path to your "powered by b2evolution" linkback image. Find this line:

<a href="http://b2evolution.net/" title="b2evolution home"><img src="../../img/b2evolution_logo_80.gif" alt="b2evolution" width="80" height="17" border="0" class="middle" /></a></p>

Replace it with this line:

<a href="http://b2evolution.net/" title="b2evolution home"><img src="<?php echo $rsc_url; ?>img/b2evolution_logo_80.gif" alt="b2evolution" width="80" height="17" border="0" class="middle" /></a></p>

_main.php Footer Section

There are three changes in the footer section. First we see a small change to the "original template by" link. Find this block of code:

<p class="baseline">
	Original template design by <a href="http://fplanque.net/">François PLANQUE</a>.
</p>

Replace it with this block of code:

<p class="baseline">
	Original template design by <a href="http://fplanque.net/">Francois PLANQUE</a>.
</p>

Next we see that all the "this code is valid" images have been removed. DELETE the following block of code:

<div class="center">
	<a href="http://validator.w3.org/check/referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" class="middle" /></a>
	
	<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" class="middle" /></a>
	
	<a href="http://feedvalidator.org/check.cgi?url=<?php $Blog->disp( 'rss2_url', 'raw' ) ?>"><img src="../../img/valid-rss.png" alt="Valid RSS!" style="border:0;width:88px;height:31px" class="middle" /></a>
	
	<a href="http://feedvalidator.org/check.cgi?url=<?php $Blog->disp( 'atom_url', 'raw' ) ?>"><img src="../../img/valid-atom.png" alt="Valid Atom!" style="border:0;width:88px;height:31px" class="middle" /></a>
</div>

If you want to keep those images in your footer you can. You will need to change the path to the image for the RSS feeds. You can do that by adding the following block of code:

<div class="center">
	<a href="http://validator.w3.org/check/referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" class="middle" /></a>
	
	<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" class="middle" /></a>
	
	<a href="http://feedvalidator.org/check.cgi?url=<?php $Blog->disp( 'rss2_url', 'raw' ) ?>"><img src="<?php echo $rsc_url; ?>img/valid-rss.png" alt="Valid RSS!" style="border:0;width:88px;height:31px" class="middle" /></a>
	
	<a href="http://feedvalidator.org/check.cgi?url=<?php $Blog->disp( 'atom_url', 'raw' ) ?>"><img src="<?php echo $rsc_url; ?>img/valid-atom.png" alt="Valid Atom!" style="border:0;width:88px;height:31px" class="middle" /></a>
	</div>

Finally, the code required to log a hit on your page and provide debug information (if needed) has both moved and changed. Find the following block of code:

<?php
	log_hit();	// log the hit on this page
	debug_info(); // output debug info if requested
?>
</div>
</div>
</body>
</html>

Replace it with this block of code, noting that the hit logger and debug info bits have moved outside the final /div tag:

</div>
</div>
<?php
	$Hit->log();	// log the hit on this page
	debug_info(); // output debug info if requested
?>
</body>
</html>

Style Sheet Changes

There are a couple of changes you will probably need to make to your personalized style sheet.
If you include the ’standard’ style sheet calls in the top of your skin’s style sheet you will need to change the paths. Find this block of code:

@import url(../../rsc/basic.css);	/* Import basic styles */
@import url(../../rsc/img.css);	/* Import standard image styles */
@import url(../../rsc/blog_elements.css);	/* Import standard blog elements styles */
@import url(../../rsc/forms.css);	/* Import default form styles */
@import url(../../rsc/comments.css);	/* Import default comment styles */

Replace it with this block of code:

@import url(../../rsc/css/basic.css);	/* Import basic styles */
@import url(../../rsc/css/img.css);	/* Import standard image styles */
@import url(../../rsc/css/blog_elements.css);	/* Import standard blog elements styles */
@import url(../../rsc/css/forms.css);	/* Import default form styles */
@import url(../../rsc/css/comments.css);	/* Import default comment styles */

Add the "action_messages" style:

.bPosts {
	float: left;
	width: 480px;
	overflow: hidden;
	/* background: #090;*/
}
div.action_messages {
	margin: 0 2ex;
}
.bPost, .bPostpublished
{
	clear: both;
	margin: 0 2.5ex;
	padding: 0;
	border-bottom: 1px solid #ddd;
	/* border: 1px solid #78a; */
}

"input" styles have changed. You probably do not have to do this one!!!

input.submit,
input.preview,
input.reset {
	background-color: #ddd;
	color: #78a;
	border: 1px solid #000;
	font-weight: bold;
	padding: 1px;
}

input.submit:hover,
input.preview:hover {
	color: #000;
}

Other (supporting) File Changes

All of the files in your skins/skinname folder will need to be editted! You will (probably) need to add some files that don’t exist, and you will also be able to delete some files that are no longer used. Due to file size limitations I created a different page for the other files you need to address.

Stub Files

If you use stub files in your blog (you don’t have to) then you’ll need to make a change to each of your stubs. Open your stub file(s) in an editor and find the following block of code:

/**
 * That's it, now let b2evolution do the rest! :)
 */
require(dirname(__FILE__)."/b2evocore/_blog_main.php");

Replace it with this block of code:

/**
 * That's it, now let b2evolution do the rest! :)
 */
require_once dirname(__FILE__).'/conf/_config.php';

require $inc_path.'_blog_main.inc.php';

Created by • Last edit by on 2020-01-10 01:14 • •

Upgrade Skin from 0.9.2 to 1.8

Introduction

_main.php Head

All the changes on one page

Changes explained line by line

_main.php Main Content Area

Individual Post Initialization

Individual Post Header (bSmallHead)

Individual Post Footer (bSmallPrint)

Special Pages Switch

_main.php The Side Bar

Recently (cached) and Calendar

Categories as a plugin

Archives as a plugin

User Subscription Link

Syndicate section changes

New "Who’s Online" section

New Path to LinkBack image

_main.php Footer Section

Style Sheet Changes

Other (supporting) File Changes

Stub Files

No feedback yet

About b2evolution

Downloads

About us

Webhosting Guide

Docs & Support

Other

Stay in touch