My b2evolution Version: 2.x

#### Intro:

For a b2evolution skin to function, it's enough to have an [u]index.main.php[/u] and a [u]style.css[/u]

It will read rest of the required display handlers files from the main .../skins directory.

These values are defined in the core under .../inc/_blog_main.inc.php

// Path for the current skin:
$ads_current_skin_path = $skins_path.$skin.'/';

$disp_handlers = array(
'arcdir' => 'arcdir.main.php',
'catdir' => 'catdir.main.php',
'comments' => 'comments.main.php',
'feedback-popup' => 'feedback_popup.main.php',
'mediaidx' => 'mediaidx.main.php',
'msgform' => 'msgform.main.php',
'page' => 'page.main.php',
'posts' => 'posts.main.php',
'profile' => 'profile.main.php',
'single' => 'single.main.php',
'subs' => 'subs.main.php',
// All others will default to index.main.php
);

Notice the files in the .../skins main folder like

_html_footer.inc.php
_body_footer.inc.php
_item_content.inc.php
......

These files will be used by default unless you tell the skin to use a different display handler after copy/duplicate/create it in under .../skins/yourskin folder.

To tell the skin to load a specific disp handler for a specific '.com/index.php?disp=xxx' function:

<?php
// -------------- MAIN CONTENT TEMPLATE INCLUDED HERE (Based on $disp) --------------
skin_include( '$disp$', array(
'disp_posts' => 'posts.main.php', // Use this file for 'posts' mode
'disp_single' => 'single.main.php', // Use this file for 'single post' mode

That's all i can think of for the basics... so now lets examine a sample index.main.php briefly: (watch out for the comments and tips, despite the fact that core comments are descriptive enough, i ll both keep&highlight them, and add some of my own)[i chopped off the properties for the functions to keep it as short and simple as possible]

<?php
/**
* This is the main/default page template for the skin.
* This skin only uses one single template which includes most of its features.
* It will also rely on default includes for specific displays (like the comment form).
* For a quick explanation of b2evo 2.0 skins, please start here:
* {@link http://manual.b2evolution.net/Skins_2.0}
*
* The main page template is used to display the blog when no specific page template is available
* to handle the request (based on $disp).
*/
if( !defined('EVO_MAIN_INIT') ) die( 'Please, do not access this page directly.' );

if( version_compare( $app_version, '2.4.1' ) < 0 )
{
die( 'This skin is designed for b2evolution 2.4.1 and above. Please <a href="http://b2evolution.net/downloads/index.html">upgrade your b2evolution</a>.' );
}

// This is the main template; it may be used to display very different things.
// Do inits depending on current $disp:
skin_init( $disp );

skin_include( '_html_header.inc.php' );
// Note: You can customize the default HTML header by copying the generic
// /skins/_html_header.inc.php file into the current skin folder.
// The above statement is valid for all of the files in the .../skins main folder as mentioned above
// -------------------------------- END OF HEADER --------------------------------
?>

<div id="wrapper">

<?php skin_include( '_body_header.inc.php' );?> //i have simply copied the header containers to a single file and included it in the skin to be loaded, and keep the index.main.php less crowded
// You can also create your own files and include them in the skin with a

php skin_include( 'mynewfile.php' );?>

<div class="Main_Area">

<!-- =====lets begin the main template posts column, post loop etc============================== START OF MAIN AREA =================================== -->

<div class="Post_Column">

<?php
// ------------------------- MESSAGES GENERATED FROM ACTIONS ----------these are the action messages like 'post has been edited' etc.---------------
messages( array(
'block_start' => '<div class="action_messages">',
'block_end' => '</div>',
) );
?>

<?php
// -------these are the Previous/Next Post links------------ PREV/NEXT POST LINKS (SINGLE POST MODE) -------------------
item_prevnext_links( array(
'block_start' => '<table class="prevnext_post"><tr>',
'prev_start' => '<td>',
'prev_end' => '</td>',
'next_start' => '<td class="right">',
'next_end' => '</td>',
'block_end' => '</tr></table>',
) ); ?>

<?php
// -------------start the post loop-------------------- START OF POSTS -------------------------------------
// Display message if no post:
display_if_empty();

while( $Item = & mainlist_get_item() )
{ // For each blog post, do everything below up to the closing curly brace "}"
?>

<div id="<?php $Item->anchor_id() ?>" class="Post post<?php $Item->status_raw() ?>" lang="<?php $Item->lang() ?>"> //<-This is our post title, ie, this one has uniq post id, item status and pseudo classes to make life easier, with all these you can even create custom looks for every single post of yours or modify them by categories etc etc

<?php
$Item->locale_temp_switch(); // Temporarily switch to post locale (useful for multilingual blogs)
?>

<div class="Post_details">//<- Here we have opened a div and we want some post information (details) to be displayed, like the issue time, author of the post, cat.s, tags etc. etc.. you can have even more details like views, words, post lang etc etc and customize the attributes for them, but that's another story. <?php

$Item->issue_time( array(
'before' => ' ',
'after' => '',
));

$Item->author( array(
'before' => ', '.T_('by').' <strong>',
'after' => '</strong>',
) );
?>

<?php
$Item->categories( array(
'before' => T_('Categories').': ',
'after' => ' ',
) );
?>

<?php
// List all tags attached to this post:
$Item->tags( array(
'before' => '<div class="post_tags">'.T_('Tags').': ',
'after' => '</div>',
'separator' => ', ',
) );
?>

<?php // Link to comments, trackbacks, etc.:
$Item->feedback_link( array(
'type' => 'comments',
) );

// Link to comments, trackbacks, etc.:
$Item->feedback_link( array(
'type' => 'trackbacks',
) );

$Item->edit_link( array( // Link to backoffice for editing
'before' => ' &bull; ',
'after' => '',
) );
?>
</div>

<?php
// ---------------------- POST CONTENT INCLUDED HERE ----------------------
skin_include( '_item_content.inc.php', array(
'image_size' => 'fit-400x320',
) );
// Note: You can customize the default item feedback by copying the generic
// /skins/_item_feedback.inc.php file into the current skin folder.
?>

<?php
// ------------------ FEEDBACK (COMMENTS/TRACKBACKS) INCLUDED HERE ------------------
skin_include( '_item_feedback.inc.php', array(
'before_section_title' => '<h4>',
'after_section_title' => '</h4>',
) );
// Note: You can customize the default item feedback by copying the generic
// /skins/_item_feedback.inc.php file into the current skin folder.
// ---------------------- END OF FEEDBACK (COMMENTS/TRACKBACKS) ---------------------
?>

<?php
locale_restore_previous(); // Restore previous locale (Blog locale)
?>
</div>
<?php
} // ---------------------------------- END OF POSTS ------------------------------------
?>

<?php
// -------------------- PREV/NEXT PAGE LINKS (POST LIST MODE) --------------------
mainlist_page_links( array(
'block_start' => '<p class="center"><strong>',
'block_end' => '</strong></p>',
) );
?>

<?php // ------Display handlers-------- MAIN CONTENT TEMPLATE INCLUDED HERE (Based on $disp) --------------
skin_include( '$disp$', array(
'disp_single' => 'single.main.php', // Let's use a different display mode for single posts
) );
// Note: you can customize any of the sub templates included here by copying the matching php file into your skin directory as mentioned above
?>
</div>

<?php // ------i ve done the same and added sidebar container to another file and included it for a more proper index file------------------- SIDEBAR INCLUDED HERE --------------------------
skin_include( '_sidebar.inc.php' );?></div>
<?php skin_include( '_body_footer.inc.php' ); ?>
</div>
<?php skin_include( '_html_footer.inc.php' );?>

That's the most of it in a nutshell i believe, i need to explain a little more about the containers continuing the thread and either add common FAQ's like :

'How can i ad/change my header image/logo'
'How can i add a link to my navigation menu'
'The link that i added does not look nice like the others'
'[url=http://forums.b2evolution.net/viewtopic.php?t=14515]How can i add a sidebar[/url]'
'[url=http://forums.b2evolution.net/viewtopic.php?t=14046]How can i create a stable page[/url] (ie. an about page)'
'[url=http://forums.b2evolution.net/viewtopic.php?t=16752]How can i customize my previous/next item text[/url]' and further: 'how can i change xxx text (ie. comment text)'

and summat.. that's all i can remember at the moment of writing..

*This article was about getting the main idea and anatomy of a b2evolution skin.
Usage of css, and customizing the skin throughout your css is a whole another topic.. will try to shed some light on that (as i can) some other time with visual examples.[size=18][/size]

*I have made the topic sticky, feel free to degrade, edit or anything you would like to do with it