Create a new skin
Posted by Yosa Cs | Posted in | Posted on 3/27/2011 05:06:00 AM
0
From b2evolution manual
Jump to: navigation, search
Based on Topanga's guide.
This page applies to b2evolution 1.x
If you have an existing web layout that you want to turn into an evoskin to use on your blog, this guide will show you how.
If you already have an older b2evo skin and want to turn it into a newer skin, see Upgrade from an_older version.
Contents
[hide]
* 1 Introduction
* 2 Head
* 3 Main Content Area
* 4 Sidebar, etc.
* 5 Style
* 6 Skin Directory
[edit] Introduction
What you'll need to start with:
* An installation of b2evolution 1.8 or higher.
* Your existing page/template. It should include an index.php or index.html file and a css file.
* The custom skin. It comes with b2evolution and is in /skins/custom . We'll copy some extra files from it.
If you have those things, then let's get started.
[edit] Head
1. First, create a copy of the entire custom directory in the skins directory. Give the new folder the name you want for your skin. For this guide, we'll assume that you call it myskin. The new folder should now contain custom.css, a bunch of files that begin with an underscore and a folder called img.
2. Now you have a working skin. You can check it out by changing the default skin for your blog in the backoffice to myskin. Now view your blog. It looks just like the custom skin now. Time to break it.
3. Delete the _main.php file and the custom.css file in the myskin folder.
4. Mover your index.html file and its stylesheet (.css file) into the myskin folder.
5. Rename index.html to _main.php and rename your stylesheet to style.css.
6. You can view your blog again, but now there are no posts. It just looks like your layout with no content. Time to add in some blog stuff.
7. Remove the opening html tag and the entire head section from your _main.php file. (If your template uses some JavaScript, then you'll want to leave it in, or paste it back in after the next step.)
8. At the very top of _main.php, put this:
Code: Stop direct access, Doctype and opening html tag and head section
<?php
/**
* This is the main template. It displays the blog.
*/
if( !defined('EVO_MAIN_INIT') ) die( 'Please, do not access this page directly.' );
?>
<!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="<?php locale_lang() ?>" lang="<?php locale_lang() ?>">
<head>
<?php $Plugins->trigger_event( 'SkinBeginHtmlHead' ); ?>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $io_charset; ?>" />
<title><?php
$Blog->disp('name', 'htmlhead');
request_title( ' - ', '', ' - ', 'htmlhead' );
?></title>
<?php skin_base_tag(); /* 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 $app_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="style.css" type="text/css" />
<?php
$Blog->disp( 'blog_css', 'raw');
$Blog->disp( 'user_css', 'raw');
?>
</head>
[edit] Main Content Area
1. In your main content area, remove any content that you don't want and paste this in:
Code: Main area
<!-- =================================== START OF MAIN AREA =================================== -->
<?php
// ------------------------- MESSAGES GENERATED FROM ACTIONS -------------------------
if( empty( $preview ) ) $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
if( isset($MainList) ) while( $Item = $MainList->get_item() )
{
$MainList->date_if_changed();
?>
<div class="bPost bPost<?php $Item->status( 'raw' ) ?>" lang="<?php $Item->lang() ?>">
<?php
locale_temp_switch( $Item->locale ); // Temporarily switch to post locale
$Item->anchor(); // Anchor for permalinks to refer to
?>
<div class="bSmallHead">
<?php
$Item->permanent_link( '#icon#' );
echo ' ';
$Item->issue_time();
echo ', by ';
$Item->author();
$Item->msgform_link( $Blog->get('msgformurl') );
echo ', ';
$Item->wordcount();
echo ' ', T_('words');
echo ', ';
$Item->views();
echo ' ';
locale_flag( $Item->locale, 'h10px' );
echo '<br /> ', T_('Categories'), ': ';
$Item->categories();
?>
</div>
<h3 class="bTitle"><?php $Item->title(); ?></h3>
<div class="bText">
<?php $Item->content(); ?>
<?php link_pages() ?>
</div>
<div class="bSmallPrint">
<?php $Item->permanent_link( '#', '#', 'permalink_right' ); ?>
<?php $Item->feedback_link( 'comments' ) // Link to comments ?>
<?php $Item->feedback_link( 'trackbacks', ' • ' ) // Link to trackbacks ?>
<?php $Item->feedback_link( 'pingbacks', ' • ' ) // Link to trackbacks ?>
<?php $Item->edit_link( ' • ' ) // Link to backoffice for editing ?>
<?php $Item->trackback_rdf() // trackback autodiscovery information ?>
</div>
<?php
// ------------- START OF INCLUDE FOR COMMENTS, TRACKBACK, PINGBACK, ETC. -------------
$disp_comments = 1; // Display the comments if requested
$disp_comment_form = 1; // Display the comments form if comments requested
$disp_trackbacks = 1; // Display the trackbacks if requested
$disp_trackback_url = 1; // Display the trackbal URL if trackbacks requested
$disp_pingbacks = 1; // Display the pingbacks if 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, 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;
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;
}
// ------------------- END OF INCLUDES FOR LAST COMMENTS, ETC. -------------------
?>
1. View your blog again. You should see your posts now.
2. You may want to rearrange the post details in the bSmallHead and bSmallPrint divs. If things aren't styled very well, don't worry, we'll come back to that in a moment.
[edit] Sidebar, etc.
There are several things that you can add into the sidebar (or sidebars or header or footer or wherever you want them on your page). You can use as many or as few as you want. And put them in any order you like. Here they are:
Code: Blog Title
<h1><?php $Blog->disp( 'name', 'htmlbody' ) ?></h1>
Code: Blog title as a link
<h1><a href="<?php bloginfo('url'); ?>"><?php $Blog->disp( 'name', 'htmlbody' ) ?></a></h1>
Code: Tagline
<h3><?php $Blog->disp( 'tagline', 'htmlbody' ) ?></h3>
Code: Blog long description
<p><?php $Blog->disp( 'longdesc', 'htmlbody' ); ?></p>
Code: Calendar
<?php
// Call the Calendar plugin:
$Plugins->call_by_code( 'evo_Calr', array( // Params follow:
'block_start'=>'',
'block_end'=>'',
'title'=>'', // No title.
) );
?>
Code: Search form
<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>
}}
{{Box Code | Categories |
<?php
// Call the Categories plugin:
$Plugins->call_by_code( 'evo_Cats', array( // Add parameters below:
) );
?>
Code: Archives
<?php
// Call the Archives plugin:
$Plugins->call_by_code( 'evo_Arch', array( // Add parameters below:
) );
?>
Code: Skin 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 } ?>
Code: Linkblog
<?php
// -------------------------- LINKBLOG INCLUDED HERE -----------------------------
require( dirname(__FILE__).'/_linkblog.php' );
// -------------------------------- END OF LINKBLOG ----------------------------------
?>
Code: Login and admin links
<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_subs_link( '<li>', '</li>' );
user_logout_link( '<li>', '</li>' );
?>
</ul>
</div>
Code: RSS feeds
<div class="bSideItem">
<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>
<ul>
<li>
RSS 0.92:
<a href="<?php $Blog->disp( 'rss_url', 'raw' ) ?>"><?php echo T_('Posts') ?></a>,
<a href="<?php $Blog->disp( 'comments_rss_url', 'raw' ) ?>"><?php echo T_('Comments') ?></a>
</li>
<li>
RSS 1.0:
<a href="<?php $Blog->disp( 'rdf_url', 'raw' ) ?>"><?php echo T_('Posts') ?></a>,
<a href="<?php $Blog->disp( 'comments_rdf_url', 'raw' ) ?>"><?php echo T_('Comments') ?></a>
</li>
<li>
RSS 2.0:
<a href="<?php $Blog->disp( 'rss2_url', 'raw' ) ?>"><?php echo T_('Posts') ?></a>,
<a href="<?php $Blog->disp( 'comments_rss2_url', 'raw' ) ?>"><?php echo T_('Comments') ?></a>
</li>
<li>
Atom:
<a href="<?php $Blog->disp( 'atom_url', 'raw' ) ?>"><?php echo T_('Posts') ?></a>,
<a href="<?php $Blog->disp( 'comments_atom_url', 'raw' ) ?>"><?php echo T_('Comments') ?></a>
</li>
</ul>
<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>
</div>
Code: Who's Online
<?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 } ?>
Code: Link to Last Comments
<a href="<?php $Blog->disp( 'lastcommentsurl', 'raw' ) ?>"><strong><?php echo T_('Last comments') ?></strong></a>
Code: Bloglist - often displayed at the top of the page
<?php
// --------------------------- BLOG LIST INCLUDED HERE -----------------------------
require( dirname(__FILE__).'/_bloglist.php' );
// ------------------------------- END OF BLOG LIST --------------------------------
?>
Code: Powered by b2evolution
<p class="center">powered by<br />
<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>
Code: Hit logger - put this right before the closing body tag
<?php
$Hit->log(); // log the hit on this page
debug_info(); // output debug info if requested
?>
[edit] Style
Now you can view your blog and see all of the dynamic content that you just added. But, chances are, things are not styled just the way you want them yet. There are two possible solutions for the problem. One is to edit the _main.php so that all class names and tags line up with what your stylesheet expects. The second is to edit your stylesheet to go along with the default b2evolution markup. The second option is much easier.
Here are some simple tips to help you make your new skin look just the way you want.
* At the top of your style.css you can import some or all of the stock css resource files. These will make images, comments and forms display very nicely. Since you're putting them at the top of your stylesheet, you can still override some of the values at the bottom.
Code: Add this to the top of your style.css file
@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 */
* Most Sidebar items use the class bSideItem. It's the default class name for sidebar plugins like Categories and Archives and the default class for most user-created plugins. Use it in your stylesheet to control the way sidebar items look. If you need an example, look in /skins/custom/custom.css.
* If at all possible, use the stylesheet for changing the way things look. But some changes will require you to edit the php. If you're editing an item like the linkblog, which includes another file (_linkblog.php), you can edit that file to change some of the values. For plugins like the category list, you can add parameters to change things. See the plugin call for the calendar above as an example.
[edit] Skin Directory
Once your skin is finished you may want to share it with other b2evolution users. If you would like to submit it to the skins directory, please review these guidelines: Submitting to skin directory.
Retrieved from "http://manual.b2evolution.net/Create_a_new_skin"
Categories: Skins | 1.x
Comments Posted (0)
Posting Komentar
Silahkan berkomentar disini