Skinning phpbb help

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
Locked
kennethk
Registered User
Posts: 14
Joined: Fri Mar 19, 2010 2:15 am
Name: kenneth keen

Skinning phpbb help

Post by kennethk » Tue Apr 20, 2010 8:21 pm

This is more of a wordpress flaw but since im using phpbb as a community maybe someone could help.

Issue I'm having is that I'm trying to skin my stylesheet from my wordpres theme to phpbb. This way it will match the sites theme. My question being would anyone know how to do this? I tried from this example [ur=http://css-tricks.com/video-screencasts ... ing-phpbb/]Video[/url] and my headers/footers look different from his.

Heres what my Header.php (If I remember correctly looks like)

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<!--[if IE 6]>
<style type="text/css">
img, div, h1, h2, h3, h4 {
behavior: url(<?php bloginfo('stylesheet_directory'); ?>/iepngfix.htc);
}
</style>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>

http://www.wediction.com/wp > http://www.wediction.com/forum

Thanks and if you guy's think this topic shouldnt be here please move it or lock it with reason ;)

User avatar
Christian 2.0
Former Team Member
Posts: 4458
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Skinning phpbb help

Post by Christian 2.0 » Tue Apr 20, 2010 9:18 pm

I just finished watching that video which was terrific, with the exception of the completely problematic advice regarding the "cache" folder.

Your site code it never going to be the same as his, the idea of the video is to teach you the principal so you can apply it to your own site. I see you've already added your stylesheet link to overall_header.html:

Code: Select all

<link rel="stylesheet" href="http://wediction.com/wp/wp-content/themes/cellar-heat-light/style.css" type="text/css" media="screen" />
Although you've added it inside the <body> tag, you need to add it right before the </head> tag.

Something that wasn't outlined in the video (although was mentioned in the comments below) is the "Recompile Style Components" feature. I suggest you enable this whilst creating your style:
Admin Panel -> Load Settings -> Recompile Style Components -> Yes.

Enabling this setting will stop the need to keep refreshing your template cache (or as the video demonstrated, deleting your overall_header.html file from the "cache" folder). With Recompile Style Components enabled you can simply edit a file, upload it (if you're developing online) and refresh the browser to immediately see the changes. :)

kennethk
Registered User
Posts: 14
Joined: Fri Mar 19, 2010 2:15 am
Name: kenneth keen

Re: Skinning phpbb help

Post by kennethk » Wed Apr 21, 2010 10:15 am

Christian 2.0 wrote:I just finished watching that video which was terrific, with the exception of the completely problematic advice regarding the "cache" folder.

Your site code it never going to be the same as his, the idea of the video is to teach you the principal so you can apply it to your own site. I see you've already added your stylesheet link to overall_header.html:

Code: Select all

<link rel="stylesheet" href="http://wediction.com/wp/wp-content/themes/cellar-heat-light/style.css" type="text/css" media="screen" />
Although you've added it inside the <body> tag, you need to add it right before the </head> tag.

Something that wasn't outlined in the video (although was mentioned in the comments below) is the "Recompile Style Components" feature. I suggest you enable this whilst creating your style:
Admin Panel -> Load Settings -> Recompile Style Components -> Yes.

Enabling this setting will stop the need to keep refreshing your template cache (or as the video demonstrated, deleting your overall_header.html file from the "cache" folder). With Recompile Style Components enabled you can simply edit a file, upload it (if you're developing online) and refresh the browser to immediately see the changes. :)

Thanks alot for the help so it would be added like this?

</head>

<link rel="stylesheet" href="http://wediction.com/wp/wp-content/them ... /style.css" type="text/css" media="screen" />

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Also how would I be able to remove the banner and add the menu links like the way the template is set up at the wordpress theme?

Edit I found out how to remove the banner and menu links but a question I have is will I have o reedit overall header each time i make a new link in my wordpress?

NathanFtw
Registered User
Posts: 247
Joined: Mon Jun 15, 2009 7:59 am

Re: Skinning phpbb help

Post by NathanFtw » Wed Apr 21, 2010 1:38 pm

kennethk wrote:

Thanks alot for the help so it would be added like this?

</head>

<link rel="stylesheet" href="http://wediction.com/wp/wp-content/them ... /style.css" type="text/css" media="screen" />

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Nope it'll be:

Code: Select all

<link rel="stylesheet" href="http://wediction.com/wp/wp-content/themes/cellar-heat-light/style.css" type="text/css" media="screen" />

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
</head>

User avatar
Christian 2.0
Former Team Member
Posts: 4458
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Skinning phpbb help

Post by Christian 2.0 » Wed Apr 21, 2010 2:11 pm

You've got your overall_header.html all mixed up.

Replace your entire overall_header.html with this code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:

	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

    <link rel="stylesheet" href="http://wediction.com/wp/wp-content/themes/cellar-heat-light/style.css" type="text/css" media="screen" />

</head>



<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="container">
	<ul id="nav">

    <li class="current_page_item"><a href="http://wediction.com/wp/">Home</a></li>
	<li class="page_item page-item-9"><a href="http://wediction.com/wp/albumsdownloads" title="ALBUMS/DOWNLOADS">ALBUMS/DOWNLOADS</a></li>

	<li class="page_item page-item-5"><a href="http://wediction.com/forum/" title="COMMUNITY">COMMUNITY</a></li>

<li class="page_item page-item-5"><a href="http://wediction.com/forum/ucp.php?mode=logout&sid=46fc534a2819845e923d5a6dfba3e64b" title="LOGOUT">LOGOUT</a></li>
    </ul>


		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->

			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->

					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>

			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->

					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>

	</div>

	<a name="start_here"></a>

	<div id="page-body">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
Edit I found out how to remove the banner and menu links but a question I have is will I have o reedit overall header each time i make a new link in my wordpress?
That's correct.

kennethk
Registered User
Posts: 14
Joined: Fri Mar 19, 2010 2:15 am
Name: kenneth keen

Re: Skinning phpbb help

Post by kennethk » Wed Apr 21, 2010 10:31 pm

Works like a charm thanks guy's last requests I have is fixing up the headers/footers images. Anyone know how I would properly fix this up? Also I'd like it pushed to the left so I can adda table box like how its set up on the wordpress.

Locked

Return to “[3.0.x] Styles Support & Discussion”