Powered by MediaWiki
Personal tools

Make a skin based on my proper layout

From B2evolution

Jump to: navigation, search

This manual page refers to b2evolution version 0.9.x. See Create a new skin for the 1.8+ version of this guide

Lets make a few assuptions :

  1. You want to show blog 2/Blog A/ the first blog after the aggragator/the blog where your posts are in if you upgraded from another tool
  2. Your linkblog is in blog 4. If you don't have posts in blog 4, nothing will show
  3. You want to show your articles 'the blog way', that is the last article entered is shown as first one
  4. You will use skins (of course, that is the purpose of this post) and your skin is named 'MySkin'
  5. You have your own page, you designed your page the way you want, with css-stylesheet or not, you made the layout with tables or divs.
  6. On the place where you want your articles to appear you have a placeholder (you can easily find the place where you want your articles to appear.)

Contents

[edit] Make a stubfile

Make a file, like this one, and save that in the root directory of your blog as mystub.php (yes correct, you made a stubfile)

<?php
$blog = 2; 
$skin = 'MySkin';
$show_statuses = array(); // this is the way to show published pots to everybody, protected posts to members and private posts to yourself
$blogroll_blog = 4;
$blogroll_cat = '';
$blogroll_catsel = array( );
$timestamp_min = '';
$timestamp_max = 'now';
include(dirname(__FILE__)."/b2evocore/_blog_main.php");
?> 

[edit] Fill your own file with the b2e-code

Assuption : you have created a file in the layout that you want, and at the place where you want your articles to appear, you put a placeholder: 'posts appear here'

Now lets move on to those famous skins. Make a copy of the custom skin, and rename it MySkin.

So now we have made a new skinfolder named MySkin

rename _main.php to _main-backup.php (we will use this file a lot in the folowing instructions)

rename your own file to _main.php

open _main.php (that is your file) and put this code on top (as FIRST lines):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 

Replace your title tag with

 <title><?php
	$Blog->disp('name', 'htmlhead');
	single_cat_title( ' - ', 'htmlhead' );
	single_month_title( ' - ', 'htmlhead' );
	single_post_title( ' - ', 'htmlhead' );
	arcdir_title( ' - ', 'htmlhead' );
	last_comments_title( ' - ', 'htmlhead' );
	stats_title( ' - ', 'htmlhead' );
?>
</title>

Put this in the head-tag It's possible you have other things there, so put these under or above, but between <head> and </head>

<base href="<?php skinbase(); // Base URL for this skin. You need this to fix relative links! ?>" />
<meta name="description" content="<?php $Blog->disp( 'shortdesc', 'htmlattr' ); ?>" />
<meta name="keywords" content="<?php $Blog->disp( 'keywords', 'htmlattr' ); ?>" />
<meta name="generator" content="b2evolution <?php echo $b2_version ?>" /> <!-- Please leave this for stats -->
<link rel="alternate" type="text/xml" title="RDF" href="<?php $Blog->disp( 'rdf_url', 'raw' ) ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php $Blog->disp( 'rss_url', 'raw' ) ?>" />
<link rel="alternate" type="text/xml" title="RSS 2.0" href="<?php $Blog->disp( 'rss2_url', 'raw' ) ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<?php $Blog->disp( 'atom_url', 'raw' ) ?>" />
<link rel="pingback" href="<?php $Blog->disp( 'pingback_url', 'raw' ) ?>" />
<link rel="stylesheet" href="custom.css" type="text/css" />

Put this code in stead of your placeholder for the articles :

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

<?php // ------ START OF POSTS 
if( isset($MainList) ) $MainList->display_if_empty(); // Display message if no post
if( isset($MainList) ) while( $Item = $MainList->get_item() )
{
	$MainList->date_if_changed()  // you can safely delete this, if you don't want your articles be grouped by date;
?>
<div class="bPost" lang="<?php $Item->lang() ?>">
	<?php
		locale_temp_switch( $Item->locale ); // Temporarily switch to post locale
		$Item->anchor(); // Anchor for permalinks to refer to
	?>
	<h3 class="bTitle"><?php $Item->title(); ?></h3>
	<div class="bText">
		<?php $Item->content(); ?>
		<?php link_pages() ?>
	</div>
         <div class="bSmallPrint">
          <?php $Item->wordcount(); echo (" "); echo T_('Words');  // the number of words in this article ?>
	  •
          <a href="<?php echo url_add_param( $Blog->get( 'blogurl', 'htmlattr' ), 'author='. $Item->Author->ID) ?>" title="<?php echo T_('Browse all posts by this author'); ?>"><?php $Item->Author->prefered_name(); ?></a>
          •
	  <?php $Item->issue_date(); // to show the date of this post ?>
	  •
	  <?php $Item->issue_time(); // to show the time of this post ?>
	  • 
	  <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->feedback_link( 'comments' ) // Link to comments ?>
	  <?php $Item->edit_link( ' • ' ) // Link to backoffice for editing ?>
	</div>
	<?php // ------------- START OF INCLUDE FOR COMMENTS -------------
	 $disp_comments = 1;	 // Display the comments if requested
	 $disp_comment_form = 1; // Display the comments form if comments requested
	 require( dirname(__FILE__).'/_feedback.php' );
	 // -------- END OF INCLUDE FOR COMMENTS, TRACKBACK, PINGBACK, ETC. ------
	 locale_restore_previous();	// Restore previous locale (Blog locale)
	?>
</div>
<?php } // ---------------------------------- END OF POSTS ------------------------------------ ?>

<p class="center"><strong>
	<?php posts_nav_link(); ?>
	<?php 
		// previous_post( '<p class="center">%</p>' );
		// next_post( '<p class="center">%</p>' );
	?>
</strong></p>

<?php // ---------------- START OF INCLUDES FOR LAST COMMENTS, STATS ETC. ----------------
switch( $disp )
{
	case 'comments':
		// this includes the last comments if requested:
		require( dirname(__FILE__).'/_lastcomments.php' );
		break;
	case 'arcdir':
		// this includes the archive directory if requested
		require( dirname(__FILE__).'/_arcdir.php');
		break;
}
// ------------------- END OF INCLUDES FOR LAST COMMENTS, STATS ETC. ------------------- ?>

and place this code at the bottom of your page

<div id="pageFooter">
	<p class="baseline">	Design by Myself 
	<?php	log_hit();	// log the hit on this page	?>
</div>
</body>
</html>

[edit] The sidebar

These are things you can put into your sidebar

[edit] Description of the blog

<div class="bSideItem">
	<h3><?php $Blog->disp( 'name', 'htmlbody' ); // the name of your blog ?></h3>
	<p><?php $Blog->disp( 'longdesc', 'htmlbody' ); // the long description of your blog ?></p>
</div>

[edit] A calendar

<?php require( dirname(__FILE__).'/_calendar.php' ); // the CALENDAR  ?>

[edit] A searchbox

<div class="bSideItem">
	<h3 class="sideItemTitle"><?php echo T_('Search') ?></h3>
	<?php form_formstart( $Blog->dget( 'blogurl', 'raw' ), 'search', 'SearchForm' ) ?>
		<p><input type="text" name="s" size="30" value="<?php echo htmlspecialchars($s) ?>" class="SearchField" /><br />
		<input type="radio" name="sentence" value="AND" id="sentAND" <?php if( $sentence=='AND' ) echo 'checked="checked" ' ?>/><label for="sentAND"><?php echo T_('All Words') ?></label><br />
		<input type="radio" name="sentence" value="OR" id="sentOR" <?php if( $sentence=='OR' ) echo 'checked="checked" ' ?>/><label for="sentOR"><?php echo T_('Some Word') ?></label><br />
		<input type="radio" name="sentence" value="sentence" id="sentence" <?php if( $sentence=='sentence' ) echo 'checked="checked" ' ?>/><label for="sentence"><?php echo T_('Entire phrase') ?></label></p>
		<input type="submit" name="submit" class="submit" value="<?php echo T_('Search') ?>" />
	</form>
</div>

[edit] A list of the categories

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

[edit] The archives

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

[edit] The linkblog

	<?php require( dirname(__FILE__).'/_linkblog.php' ); // The linkblog ?>

[edit] The code for last comments, adminscreen, registerlink, ....

<div class="bSideItem">
	<h3><?php echo T_('Misc') ?></h3>
	<ul>
		<?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>' );
		?>
		<li><a href="<?php $Blog->disp( 'lastcommentsurl', 'raw' ) ?>"><strong><?php echo T_('Last comments') ?></strong></a></li>
	</ul>
</div>

The syndication code, so people can reed your blog with a feedreader

	<div class="bSideItem">
		<h3><?php echo T_('Syndicate this blog') ?> <img src="../../img/xml.gif" alt="XML" width="36" height="14" class="middle" /></h3>
			<ul>
				<li>RSS 0.92:<a href="<?php $Blog->disp( 'rss_url', 'raw' ) ?>"><?php echo T_('Posts') ?></a></li>
				<li>RSS 2.0:<a href="<?php $Blog->disp( 'rss2_url', 'raw' ) ?>"><?php echo T_('Posts') ?></a></li>
				<li>Atom:<a href="<?php $Blog->disp( 'atom_url', 'raw' ) ?>"><?php echo T_('Posts') ?></a></li>
			</ul>
	</div>

A powered by b2evolution button. Please do refer to this marvolous software

<p class="center">powered by<br />
<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>