Recent Topics

[2.x] Add a 3rd column to terrafirma skin [RESOLVED]

Started by on Sep 19, 2009 – Contents updated: Sep 19, 2009

1 Sep 19, 2009 22:28    

My b2evolution Version: 2.x

Hi,

I'd like to add a column, similar to the current sidebar on the right of my posts, to the left of them. Is this possible?

I've had a look at this post but it's not quite the same thing:
http://forums.b2evolution.net/viewtopic.php?t=18174&highlight=third+column

Also, I've made many amendments to my skin so am not too keen on switching skin. Something similar to this would be helpful but for terrafirma:
http://forums.b2evolution.net/viewtopic.php?t=14515

Any help would be massively appreciated!!!

2 Sep 23, 2009 10:41

So, I've attempted to follow the (very good) instructions given by Afwas for the Asevo skin which basically comprises the following steps:

1) Create a new skin folder (a copy of the current) and identify relevant container classes within the style.css file
i, class for the central posts container
ii, class for the current sidebar (on the right hand side)
2) Edit classes:
i, Add a new sidebar class (for the left hand side)
ii, Edit the width property of all classes to ensure fit with the overall container
iii, Edit float property to ensure the new sidebar appears on the left of the posts container.
3) Edit index_main.php
i, Copy and paste the current sidebar code so it appears before the code for the main body and rename it

I wont go further simply because, I have run into a problem: I am unable to get the positioning of the new sidebar correct.

Now, here's what I've done:
The styles that I've ammended are:

#upbg 
{
	position: absolute;
	top: 0;
	left: 0;
	background: #fff url('img/upbg.gif') no-repeat;
	width: 927px;
	height: 264px;
	z-index: 1;
}

#wrapper /*this appears to be the style for the overall main body (i.e. both the posts section and sidebars come within this*/
{
	position: relative;
	width: 927px;
	margin: 0 auto;
	background: #fff url('img/abg.gif') repeat-y;
}

#splash /*this is simply the style for the banner*/
{
	position: absolute;
	right: 30px;
	background: #EAEAE2 url('img/a10.gif') no-repeat;
	width: 867px;
	height: 150px;
}

.bPosts /*this is for the main posts container*/
{
	width: 480px;
	float: left;
}

/*Note: "aSidebar" and the "aSidebar*" styles beneath it is the style for what should be the new, left hand side, sidebar. It is a direct copy of the bSidebar styles which are those for the current sidebar*/

.aSideBar
{
	position: relative;
	width: 180px;
	float: left;
}

div.aSideItem {
	margin-bottom: 20px;
}

div.aSideItem div.notes {
	margin-left: 10px;
}

.aSideBar h2
{
	position: relative;
	font-size: 12px;
	color: #656551;
	background: url('img/border.gif') bottom repeat-x;
	padding:0 0 15px 0 ;
	margin: 10px 0;
	text-transform:uppercase;
	font-family: "Lucida Sans", Arial, Verdana, Tahoma;
}


.aSideBar ul
{
	list-style:none;
	padding: 0 10px;
	margin: 0;
}

.aSideBar ul li
{
	padding: 3px 0;
	margin:0;
}
.aSideBar ul ul
{
	list-style-image:url('img/arrow.gif');
	padding: 0 0 0 15px;
	margin:0;
}
.aSideBar a
{
	border-bottom:none;
}
.aSideBar a:hover
{
	border-bottom:1px solid;
}
/*below added to prevent underline on images used as hyperlinks*/
.aSideBar .imgnoborder,
.aSideBar .imgnoborder:visited,
.aSideBar .imgnoborder:hover
{
border: none;
}

.aSideBar ul.feeds
{
	margin-left:20px;
}
.aSideBar ul.feeds li
{
	list-style-image:url('img/feed.gif');
	margin:5px 0;
	padding:0;
}

.bSideBar
{
	width: 180px;
	float: right;
}

div.bSideItem {
	margin-bottom: 20px;
}

div.bSideItem div.notes {
	margin-left: 10px;
}

.bSideBar h2
{
	font-size: 12px;
	color: #656551;
	background: url('img/border.gif') bottom repeat-x;
	padding:0 0 15px 0 ;
	margin: 10px 0;
	text-transform:uppercase;
	font-family: "Lucida Sans", Arial, Verdana, Tahoma;
}


.bSideBar ul
{
	list-style:none;
	padding: 0 10px;
	margin: 0;
}

.bSideBar ul li
{
	padding: 3px 0;
	margin:0;
}
.bSideBar ul ul
{
	list-style-image:url('img/arrow.gif');
	padding: 0 0 0 15px;
	margin:0;
}
.bSideBar a
{
	border-bottom:none;
}
.bSideBar a:hover
{
	border-bottom:1px solid;
}
/*below added to prevent underline on images used as hyperlinks*/
.bSideBar .imgnoborder,
.bSideBar .imgnoborder:visited,
.bSideBar .imgnoborder:hover
{
border: none;
}

.bSideBar ul.feeds
{
	margin-left:20px;
}
.bSideBar ul.feeds li
{
	list-style-image:url('img/feed.gif');
	margin:5px 0;
	padding:0;
}

Now, my index.main.php, looks like this:


<?php
/**
 * This is the main/default page template for the "custom" skin.
 *
 * This skin only uses one single template which includes most of its features.
 * It will also rely on default includes for specific dispays (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).
 *
 * @package evoskins
 * @subpackage terrafirma
 *
 * @version $Id: index.main.php,v 1.4.2.2 2008/04/27 02:19:19 fplanque Exp $
 */
if( !defined('EVO_MAIN_INIT') ) die( 'Please, do not access this page directly.' );

if( version_compare( $app_version, '2.4.1' ) < 0 )
{ // Older 2.x skins work on newer 2.x b2evo versions, but newer 2.x skins may not work on older 2.x b2evo versions.
	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 );


// -------------------------- HTML HEADER INCLUDED HERE --------------------------
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.
// -------------------------------- END OF HEADER --------------------------------
?>
<div id="wrapper">
	<div id="upbg"></div>
	<div id="inner">

		<div class="pageHeader">
			<?php
				// ------------------------- "Header" CONTAINER EMBEDDED HERE --------------------------
				// Display container and contents:
				skin_container( NT_('Header'), array(
						// The following params will be used as defaults for widgets included in this container:
						'block_start'       => '<div class="$wi_class$">',
						'block_end'         => '</div>',
						'block_title_start' => '<h1>',
						'block_title_end'   => '</h1>',
					) );
				// ----------------------------- END OF "Header" CONTAINER -----------------------------
			?>
		</div>
		<div id="splash">
			<div class="PageTop">
			<?php
				// ------------------------- "Page Top" CONTAINER EMBEDDED HERE --------------------------
				// Display container and contents:
				skin_container( NT_('Page Top'), array(
						// The following params will be used as defaults for widgets included in this container:
						'block_start'         => '<div class="$wi_class$">',
						'block_end'           => '</div>',
						'block_display_title' => false,
						'list_start'          => '<ul>',
						'list_end'            => '</ul>',
						'item_start'          => '<li>',
						'item_end'            => '</li>',
					) );
				// ----------------------------- END OF "Page Top" CONTAINER -----------------------------
			?>
			</div>
		</div>
			<div class="top_menu">
				<ul>
				<?php
					// ------------------------- "Menu" CONTAINER EMBEDDED HERE --------------------------
					// Display container and contents:
					// Note: this container is designed to be a single <ul> list
					skin_container( NT_('Menu'), array(
							// The following params will be used as defaults for widgets included in this container:
							'block_start'         => '',
							'block_end'           => '',
							'block_display_title' => false,
							'list_start'          => '',
							'list_end'            => '',
							'item_start'          => '<li>',
							'item_end'            => '</li>',
						) );
					// ----------------------------- END OF "Menu" CONTAINER -----------------------------
				?>
				</ul>
				<?php if ( true /* change to false to hide the search box */ ) { ?>
				<div id="search">
				<form action="<?php $Blog->gen_blogurl() ?>" method="get" class="search">
				<input name="s" size="15" value="Search" class="form_text_input" type="text" />&nbsp;<input name="submit" class="searchsubmit" value="Go" type="submit" /></form></div>
				<?php } ?>
			</div>

			<!-- =================================== START OF LEFT SIDEBAR =================================== -->
			<div class="aSideBar">

				<?php
					// ------------------------- "Left Sidebar" CONTAINER EMBEDDED HERE --------------------------
					// Display container contents:
					skin_container( NT_('Sidebar 1'), array(
							// The following (optional) params will be used as defaults for widgets included in this container:
							// This will enclose each widget in a block:
							'block_start' => '<div class="bSideItem $wi_class$">',
							'block_end' => '</div>',
							// This will enclose the title of each widget:
							'block_title_start' => '<h2>',
							'block_title_end' => '</h2>',
							// If a widget displays a list, this will enclose that list:
							'list_start' => '<ul>',
							'list_end' => '</ul>',
							// This will enclose each item in a list:
							'item_start' => '<li>',
							'item_end' => '</li>',
							// This will enclose sub-lists in a list:
							'group_start' => '<ul>',
							'group_end' => '</ul>',
							// This will enclose (foot)notes:
							'notes_start' => '<div class="notes">',
							'notes_end' => '</div>',
						) );
					// ----------------------------- END OF "Left Sidebar" CONTAINER -----------------------------
			?>
			</div>

			<!-- =================================== START OF MAIN AREA =================================== -->
			<div class="bPosts">

				<?php
					// ------------------------- MESSAGES GENERATED FROM ACTIONS -------------------------
					messages( array(
							'block_start' => '<div class="action_messages">',
							'block_end'   => '</div>',
						) );
					// --------------------------------- END OF MESSAGES ---------------------------------
				?>

				<?php
					// ------------------------ TITLE FOR THE CURRENT REQUEST ------------------------
					if ($disp != 'page')
					{
						request_title( array(
								'title_before'=> '<h2 class="pagetitle">',
								'title_after' => '</h2>',
								'title_none'  => '',
								'glue'        => ' - ',
								'title_single_disp' => false,
								'format'      => 'htmlbody',
							) );
					}
					// ----------------------------- END OF REQUEST TITLE ----------------------------
				?>

				<?php
					// --------------------------------- 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="bPost bPost<?php $Item->status_raw() ?>" lang="<?php $Item->lang() ?>">

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

						<div class="bSmallHead">
						<div class="date">
						<?php
							$Item->author( array(
							'before'    => '<em class="user">',
							'after'     => '</em><br />',
									) );

							$Item->issue_date( array(
									'before'    => '<em class="bPostdate">',
									'after'     => '</em>',
								));
						?>
						</div>
						<h2 class="bTitle"><?php $Item->title(); ?></h2>
						</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.
							// -------------------------- END OF POST CONTENT -------------------------
						?>

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

						<div class="bSmallPrint">
							<ul>
							<?php
							$Item->edit_link( array( // Link to backoffice for editing
								'before'    => '<li>',
								'after'     => '</li>',
							) ); ?>

							<li class="readmore">
							<?php
							$Item->categories( array(
								'before'          => '',
								'after'           => '',
								'include_main'    => true,
								'include_other'   => true,
								'include_external'=> true,
								'link_categories' => true,
							) );
							 ?>
							</li>
							<li class="comments">
							<?php
							// Link to comments, trackbacks, etc.:
							$Item->feedback_link( array(
											'type' => 'comments',
											'link_before' => '',
											'link_after' => '',
											'link_text_zero' => '#',
											'link_text_one' => '#',
											'link_text_more' => '#',
											'link_title' => '#',
											'use_popup' => false,
										) );

							// Link to comments, trackbacks, etc.:
							$Item->feedback_link( array(
											'type' => 'trackbacks',
											'link_before' => ' &bull; ',
											'link_after' => '',
											'link_text_zero' => '#',
											'link_text_one' => '#',
											'link_text_more' => '#',
											'link_title' => '#',
											'use_popup' => false,
										) );
							?>
							</li>
							</ul>
							</div>

						<?php
							// ------------------ FEEDBACK (COMMENTS/TRACKBACKS) INCLUDED HERE ------------------
							skin_include( '_item_feedback.inc.php', array(
									'before_section_title' => '<h3>',
									'after_section_title'  => '</h3>',
								) );
							// 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>',
						'prev_text' => '&lt;&lt;',
						'next_text' => '&gt;&gt;',
						) );
					// ------------------------- END OF PREV/NEXT PAGE LINKS -------------------------
				?>


				<?php
					// -------------- MAIN CONTENT TEMPLATE INCLUDED HERE (Based on $disp) --------------
					skin_include( '$disp$', array(
							'disp_posts'  => '',		// We already handled this case above
							'disp_single' => '',		// We already handled this case above
							'disp_page'   => '',		// We already handled this case above
						) );
					// Note: you can customize any of the sub templates included here by
					// copying the matching php file into your skin directory.
					// ------------------------- END OF MAIN CONTENT TEMPLATE ---------------------------
				?>

			</div>


			<!-- =================================== START OF RIGHT SIDEBAR =================================== -->
			<div class="bSideBar">

				<?php
					// ------------------------- "Sidebar" CONTAINER EMBEDDED HERE --------------------------
					// Display container contents:
					skin_container( NT_('Sidebar'), array(
							// The following (optional) params will be used as defaults for widgets included in this container:
							// This will enclose each widget in a block:
							'block_start' => '<div class="bSideItem $wi_class$">',
							'block_end' => '</div>',
							// This will enclose the title of each widget:
							'block_title_start' => '<h2>',
							'block_title_end' => '</h2>',
							// If a widget displays a list, this will enclose that list:
							'list_start' => '<ul>',
							'list_end' => '</ul>',
							// This will enclose each item in a list:
							'item_start' => '<li>',
							'item_end' => '</li>',
							// This will enclose sub-lists in a list:
							'group_start' => '<ul>',
							'group_end' => '</ul>',
							// This will enclose (foot)notes:
							'notes_start' => '<div class="notes">',
							'notes_end' => '</div>',
						) );
					// ----------------------------- END OF "Sidebar" CONTAINER -----------------------------
				?>

				<?php
					// Please help us promote b2evolution and leave this logo on your blog:
					//powered_by( array(
							//'block_start' => '<div class="powered_by">',
							//'block_end'   => '</div>',
							// Check /rsc/img/ for other possible images -- Don't forget to change or remove width & height too
							//'img_url'     => '$rsc$img/powered-by-b2evolution-120t.gif',
							//'img_width'   => 120,
							//'img_height'  => 32,
						//) );
				//?>
			</div>


			<!-- =================================== START OF FOOTER =================================== -->
			<div id="pageFooter">
				<?php
					// Display container and contents:
					skin_container( NT_("Footer"), array(
							// The following params will be used as defaults for widgets included in this container:
						) );
					// Note: Double quotes have been used around "Footer" only for test purposes.
				?>
				<p class="baseline">
					<span class="author_credits">
					<?php
						// Display a link to contact the owner of this blog (if owner accepts messages):
						$Blog->contact_link( array(
								'before'      => '',
								'after'       => '',
								'text'   => T_('Contact'),
								'title'  => T_('Send a message to the owner of this blog...'),
							) );
					?>
					<?php
						// Display footer text (text can be edited in Blog Settings):
						$Blog->footer_text( array(
								'before'      => ' &bull; ',
								'after'       => '',
							) );
					?>
					</span>
					<br />
					&bull;
					<br />

				</p>
		</div>
	</div>
</div>

<?php
// ------------------------- HTML FOOTER INCLUDED HERE --------------------------
skin_include( '_html_footer.inc.php' );
// Note: You can customize the default HTML footer by copying the
// _html_footer.inc.php file into the current skin folder.
// ------------------------------- END OF FOOTER --------------------------------
?>

Now, I can tweak the widths later but for now, I just want to get the positioning right. Any ideas?!?![/code]

3 Sep 23, 2009 11:48

UPDATE:

I've since learnt that the issue appears to be related to the name of the container.

If I change the part of the index.main.php code:

skin_container( NT_('Sidebar')

to

skin_container( NT_('Sidebar1') [for the left sidebar aka "aSideBar" and 'Sidebar2' for the right one "bSideBar"]

and reload the skin containers (confirming they have been added to the widget list and added widgets to it), i get nothing. Yet as soon as I change the container reference back, let's say to 'Sidebar' for both new sidebars walla! They appear!

So, still not sure of the way around this!

4 Sep 23, 2009 12:22

Right the containers are now appearing.

NOTE: I will go back and rationalise this post once I'm done, at the moment I'm using it to track my thoughts. (Which are all over the place!)

5 Sep 23, 2009 18:51

Your skin containers need to have unique names. You also need unique ID's for css and you probably want to play with classnames ;)

¥

6 Jan 10, 2010 14:19

Finally came back to this. It's sorted now. Basically, it was a case of following the instructions above to add a 3rd column. Once the column had been added, a number of the image files and css attributes need to be size adjusted to meet the dimensions of the desired new look. Add your widgets and voila! Happy to be contacted about this if you're going to attempt it.

Best.

7 Jul 06, 2010 19:54

/*spam removed*/


Form is loading...

CMS + user community – This forum is powered by b2evolution CMS, a complete engine for your website.