[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Locked
Glenn I
Registered User
Posts: 172
Joined: Wed Apr 20, 2005 6:11 am

Re: [How To] Modify prosilver's header

Post by Glenn I » Fri Jan 04, 2008 10:26 pm

I added a 3 image banner using the method described earlier. The problem now is that firefox is displaying it different to IE7. I haven't tried any other browser.

In firefox it shows a white line under the right part of the logo, whereas IE7 doesn't. It's not supposed to be there. Does anyone know a fix to get firefox to display it correctly? See screenshots.

Firefox displaying white line under logo
Image

IE7 displaying no white line. How I want it to look
Image

This is the code I used for the banner

Code: Select all

<td width="541"><a href="index.php"><img src="http://www.theaussieaviator.net/forum/phpBB3/styles/Aussie/theme/images/aussieaviator.gif" width="541" height="146" 

border="0"></a></td>
    <td background="http://www.theaussieaviator.net/forum/phpBB3/styles/Aussie/theme/images/aussieback.gif"><div align="right">
		<a href="index.php"><img src="http://www.theaussieaviator.net/forum/phpBB3/styles/Aussie/theme/images/aviation.gif" width="423" height="146"></div></td>
  </tr>
</table>
Thanks in advance

morteg
Registered User
Posts: 10
Joined: Fri Jan 04, 2008 11:50 am

Re: [How To] Modify prosilver's header

Post by morteg » Sat Jan 05, 2008 12:21 am

great, work perfect in Ie and Mozilla.

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Sat Jan 05, 2008 2:29 am

Glenn I wrote:I added a 3 image banner using the method described earlier. The problem now is that firefox is displaying it different to IE7. I haven't tried any other browser...
Use this code:

Code: Select all

<table cellpadding="0" cellspacing="0" width="100%" style="background: url('{T_THEME_PATH}/images/aussieback.gif') repeat-x; margin-bottom: 4px;">
		    <tr>
          <td style="text-align: left;"><a href="index.php"><img src="{T_THEME_PATH}/images/aussieaviator.gif" alt=""></a></td>
          <td style="text-align: right;"><a href="index.php"><img src="{T_THEME_PATH}/images/aviation.gif" alt=""></a></td>
       </tr>
     </table>
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye » Sat Jan 05, 2008 3:12 am

prototech wrote:I'll add a tutorial on that later on today. :)
Excitedly awaiting the arrival of this tutorial! :o :lol:

Glenn I
Registered User
Posts: 172
Joined: Wed Apr 20, 2005 6:11 am

Re: [How To] Modify prosilver's header

Post by Glenn I » Sat Jan 05, 2008 3:14 am

Working perfectly. Much appreciate it, thanks :)

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Sat Jan 05, 2008 6:44 am

The original post has been updated with the tutorial. :)
Add a Random Header Image
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

Nicopoon
Registered User
Posts: 6
Joined: Fri Jan 19, 2007 6:02 am

Re: [How To] Modify prosilver's header

Post by Nicopoon » Sat Jan 05, 2008 7:51 am

Good tutorial... I have 2 issues with the site.
1/ the logo, instead of being clean and centered, replicates as mosaic to the right, endlessly
2/ the forum's width is inconsistent and too large. I would like it to be boxed like the phpbb.com site, instead it takes all the width available on a 1680x1050 screen.

See https://www.productevo.com/performancehrforums/

Any suggestion to fix these 2 problems?

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Sat Jan 05, 2008 8:01 am

Open colours.css and find:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/productevohrforums.gif");
	color: #FFFFFF;
}
Replace with:

Code: Select all

.headerbar {
	background: url("{T_THEME_PATH}/images/productevohrforums.gif") no-repeat center;
	color: #FFFFFF;
}
Open overall_header.html and find:

Code: Select all

<div style="height: 241px;>
Replace with:

Code: Select all

<div style="height: 241px;">
If you want a fixed width similar to phpbb.com, take a look at this..
Knowledge Base - Fixed width prosilver
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

morteg
Registered User
Posts: 10
Joined: Fri Jan 04, 2008 11:50 am

Re: [How To] Modify prosilver's header

Post by morteg » Sat Jan 05, 2008 10:33 am

i said early the code is working great, but have one problem...

with this on board page is great :
header in board

but on topic pages you'll see the problem :
header is ok but something other from down is not

how i fix it?

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Sat Jan 05, 2008 10:46 am

bg_header.gif is also used for the topics list... I'm guessing you replaced bg_header.gif with your image. Rename your header image and change the name in colours.css (.headerbar). Then replace bg_header.gif with the original image that came with prosilver. ;)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye » Sat Jan 05, 2008 11:39 am

prototech wrote:The original post has been updated with the tutorial. :)
Add a Random Header Image
Just followed this tut and I now have NO images. Just a blue banner.

Any thoughts?

Here is a link to my board:

http://www.louisvillediscgolf.com/phpbb/

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech » Sat Jan 05, 2008 11:56 am

Where did you upload the images to?
http://www.louisvillediscgolf.com/phpBB ... ndom_1.png
The link above gives a 404, which means that the images are in the wrong directory. Also post the content style.php. :)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye » Sat Jan 05, 2008 12:01 pm

They were upload here:

http://www.louisvillediscgolf.com/phpBB ... ndom_1.png

and here:

http://www.louisvillediscgolf.com/phpBB ... ndom_2.png

Does it need to be site_header_random_1 and 2?

Here is the code:

Code: Select all

<?php
/**
*
* @package phpBB3
* @version $Id: style.php,v 1.51 2007/08/19 15:58:31 acydburn Exp $
* @copyright (c) 2005 phpBB Group
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
require($phpbb_root_path . 'config.' . $phpEx);

if (version_compare(PHP_VERSION, '6.0.0-dev', '<'))
{
	set_magic_quotes_runtime(0);
}

// Load Extensions
if (!empty($load_extensions))
{
	$load_extensions = explode(',', $load_extensions);

	foreach ($load_extensions as $extension)
	{
		@dl(trim($extension));
	}
}


$sid = (isset($_GET['sid']) && !is_array($_GET['sid'])) ? htmlspecialchars($_GET['sid']) : '';
$id = (isset($_GET['id'])) ? intval($_GET['id']) : 0;

if (strspn($sid, 'abcdefABCDEF0123456789') !== strlen($sid))
{
	$sid = '';
}

// This is a simple script to grab and output the requested CSS data stored in the DB
// We include a session_id check to try and limit 3rd party linking ... unless they
// happen to have a current session it will output nothing. We will also cache the
// resulting CSS data for five minutes ... anything to reduce the load on the SQL
// server a little
if ($id)
{
	if (empty($acm_type) || empty($dbms))
	{
		die('Hacking attempt');
	}

	// Include files
	require($phpbb_root_path . 'includes/acm/acm_' . $acm_type . '.' . $phpEx);
	require($phpbb_root_path . 'includes/cache.' . $phpEx);
	require($phpbb_root_path . 'includes/db/' . $dbms . '.' . $phpEx);
	require($phpbb_root_path . 'includes/constants.' . $phpEx);

	$db = new $sql_db();
	$cache = new cache();

	// Connect to DB
	if (!@$db->sql_connect($dbhost, $dbuser, $dbpasswd, $dbname, $dbport, false, false))
	{
		exit;
	}
	unset($dbpasswd);

	$config = $cache->obtain_config();
	$user = false;

	if ($sid)
	{
		$sql = 'SELECT u.user_id, u.user_lang
			FROM ' . SESSIONS_TABLE . ' s, ' . USERS_TABLE . " u
			WHERE s.session_id = '" . $db->sql_escape($sid) . "'
				AND s.session_user_id = u.user_id";
		$result = $db->sql_query($sql);
		$user = $db->sql_fetchrow($result);
		$db->sql_freeresult($result);
	}

	$recompile = $config['load_tplcompile'];
	if (!$user)
	{
		$id			= $config['default_style'];
		$recompile	= false;
		$user		= array('user_id' => ANONYMOUS);
	}

	$sql = 'SELECT s.style_id, c.theme_data, c.theme_path, c.theme_name, c.theme_mtime, i.*, t.template_path
		FROM ' . STYLES_TABLE . ' s, ' . STYLES_TEMPLATE_TABLE . ' t, ' . STYLES_THEME_TABLE . ' c, ' . STYLES_IMAGESET_TABLE . ' i
		WHERE s.style_id = ' . $id . '
			AND t.template_id = s.template_id
			AND c.theme_id = s.theme_id
			AND i.imageset_id = s.imageset_id';
	$result = $db->sql_query($sql, 300);
	$theme = $db->sql_fetchrow($result);
	$db->sql_freeresult($result);

	if (!$theme)
	{
		exit;
	}

	if ($user['user_id'] == ANONYMOUS)
	{
		$user['user_lang'] = $config['default_lang'];
	}

	$user_image_lang = (file_exists($phpbb_root_path . 'styles/' . $theme['imageset_path'] . '/imageset/' . $user['user_lang'])) ? $user['user_lang'] : $config['default_lang'];

	$sql = 'SELECT *
		FROM ' . STYLES_IMAGESET_DATA_TABLE . '
		WHERE imageset_id = ' . $theme['imageset_id'] . "
		AND image_lang IN ('" . $db->sql_escape($user_image_lang) . "', '')";
	$result = $db->sql_query($sql, 3600);

	$img_array = array();
	while ($row = $db->sql_fetchrow($result))
	{
		$img_array[$row['image_name']] = $row;
	}
	$db->sql_freeresult($result);

	// gzip_compression
	if ($config['gzip_compress'])
	{
		// IE6 is not able to compress the style (do not ask us why!)
		$browser = (!empty($_SERVER['HTTP_USER_AGENT'])) ? strtolower(htmlspecialchars((string) $_SERVER['HTTP_USER_AGENT'])) : '';

		if ($browser && strpos($browser, 'msie 6.0') === false && @extension_loaded('zlib') && !headers_sent())
		{
			ob_start('ob_gzhandler');
		}
	}

	// Expire time of seven days if not recached
	$expire_time = 7*86400;
	$recache = false;

	// Re-cache stylesheet data if necessary
	if ($recompile || empty($theme['theme_data']))
	{
		$recache = (empty($theme['theme_data'])) ? true : false;
		$update_time = time();

		// We test for stylesheet.css because it is faster and most likely the only file changed on common themes
		if (!$recache && $theme['theme_mtime'] < @filemtime("{$phpbb_root_path}styles/" . $theme['theme_path'] . '/theme/stylesheet.css'))
		{
			$recache = true;
			$update_time = @filemtime("{$phpbb_root_path}styles/" . $theme['theme_path'] . '/theme/stylesheet.css');
		}
		else if (!$recache)
		{
			$last_change = $theme['theme_mtime'];
			$dir = @opendir("{$phpbb_root_path}styles/{$theme['theme_path']}/theme");

			if ($dir)
			{
				while (($entry = readdir($dir)) !== false)
				{
					if (substr(strrchr($entry, '.'), 1) == 'css' && $last_change < @filemtime("{$phpbb_root_path}styles/{$theme['theme_path']}/theme/{$entry}"))
					{
						$recache = true;
						break;
					}
				}
				closedir($dir);
			}
		}
	}

	if ($recache)
	{
		include_once($phpbb_root_path . 'includes/acp/acp_styles.' . $phpEx);

		$theme['theme_data'] = acp_styles::db_theme_data($theme);
		$theme['theme_mtime'] = $update_time;

		// Save CSS contents
		$sql_ary = array(
			'theme_mtime'	=> $theme['theme_mtime'],
			'theme_data'	=> $theme['theme_data']
		);

		$sql = 'UPDATE ' . STYLES_THEME_TABLE . ' SET ' . $db->sql_build_array('UPDATE', $sql_ary) . "
			WHERE theme_id = $id";
		$db->sql_query($sql);

		$cache->destroy('sql', STYLES_THEME_TABLE);
	}

	// Only set the expire time if the theme changed data is older than 30 minutes - to cope with changes from the ACP
	if ($recache || $theme['theme_mtime'] > (time() - 1800))
	{
		header('Expires: 0');
	}
	else
	{
		header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time() + $expire_time));
	}

	header('Content-type: text/css; charset=UTF-8');

	// Parse Theme Data
	$replace = array(
		'{T_THEME_PATH}'			=> "{$phpbb_root_path}styles/" . $theme['theme_path'] . '/theme',
		'{T_TEMPLATE_PATH}'			=> "{$phpbb_root_path}styles/" . $theme['template_path'] . '/template',
		'{T_IMAGESET_PATH}'			=> "{$phpbb_root_path}styles/" . $theme['imageset_path'] . '/imageset',
		'{T_IMAGESET_LANG_PATH}'	=> "{$phpbb_root_path}styles/" . $theme['imageset_path'] . '/imageset/' . $user_image_lang,
		'{T_STYLESHEET_NAME}'		=> $theme['theme_name'],
		    'RANDOM_HEADER'      => mt_rand(1, NUMBER-OF-IMAGES),
          '{S_USER_LANG}'            => $user['user_lang'],
          '{RANDOM_HEADER}'      => mt_rand(1, 2)
	);

	$theme['theme_data'] = str_replace(array_keys($replace), array_values($replace), $theme['theme_data']);

	$matches = array();
	preg_match_all('#\{IMG_([A-Za-z0-9_]*?)_(WIDTH|HEIGHT|SRC)\}#', $theme['theme_data'], $matches);

	$imgs = $find = $replace = array();
	if (isset($matches[0]) && sizeof($matches[0]))
	{
		foreach ($matches[1] as $i => $img)
		{
			$img = strtolower($img);
			$find[] = $matches[0][$i];

			if (!isset($img_array[$img]))
			{
				$replace[] = '';
				continue;
			}

			if (!isset($imgs[$img]))
			{
				$img_data = &$img_array[$img];
				$imgsrc = ($img_data['image_lang'] ? $img_data['image_lang'] . '/' : '') . $img_data['image_filename'];
				$imgs[$img] = array(
					'src'		=> $phpbb_root_path . 'styles/' . $theme['imageset_path'] . '/imageset/' . $imgsrc,
					'width'		=> $img_data['image_width'],
					'height'	=> $img_data['image_height'],
				);
			}

			switch ($matches[2][$i])
			{
				case 'SRC':
					$replace[] = $imgs[$img]['src'];
				break;
				
				case 'WIDTH':
					$replace[] = $imgs[$img]['width'];
				break;
	
				case 'HEIGHT':
					$replace[] = $imgs[$img]['height'];
				break;

				default:
					continue;
			}
		}

		if (sizeof($find))
		{
			$theme['theme_data'] = str_replace($find, $replace, $theme['theme_data']);
		}
	}

	echo $theme['theme_data'];

	if (!empty($cache))
	{
		$cache->unload();
	}
	$db->sql_close();
}

exit;

?>

User avatar
*Christian*
I've Been Banned!
Posts: 884
Joined: Sat Nov 03, 2007 1:35 pm
Location: Location, Location.

Re: [How To] Modify prosilver's header

Post by *Christian* » Sat Jan 05, 2008 12:03 pm

I've just encountered a problem.

I've used the guide step by step, although have this problem, everything is removed from the banner (which is what i want) although the colours.css file wont pick up my new banner image:

Image


I can't seem to find what's wrong, here's my code - if anybody can pick up anything i've missed out on i'd sure appreciate it

Common.css

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	height: 195px;
}

Colours.css

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/banner.jpg");
	color: #FFFFFF;
}

Overall_header.html

Code: Select all

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div style="height: 185px ;">
			<div id="site-description">
				
			
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		</div>

I get the impression my </div> is in the wrong place on this one?
Proud owner of Bertie 3.0
:: No support via PM or IM ::

morteg
Registered User
Posts: 10
Joined: Fri Jan 04, 2008 11:50 am

Re: [How To] Modify prosilver's header

Post by morteg » Sat Jan 05, 2008 12:11 pm

prototech wrote:bg_header.gif is also used for the topics list... I'm guessing you replaced bg_header.gif with your image. Rename your header image and change the name in colours.css (.headerbar). Then replace bg_header.gif with the original image that came with prosilver. ;)
if i rename bg_header.gif with name of my logo for example bg_logo.gif , the logo don't show up in header

- i reback bg_header , now ... i need to know how to put bg_logo.gif in header ...

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif"); /*( if this is bg_logo.gif- the logo don't come in header , and upload image is in the right directory ) */
	color: #FFFFFF;
}

.forumbg {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}

- becouse i have too only bg_header in logo, not the image , like guyskankrye and *Christian* ...
Last edited by morteg on Sat Jan 05, 2008 12:31 pm, edited 1 time in total.

Locked

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