phpBB • Add an extra image to the right of prosilver site

Knowledge Base

Add an extra image to the right of prosilver site_logo
Article ID: 725
Written By: Mick
Written On: Fri Sep 23, 2011 8:45 am
Description: Why? Well maybe you want to place an animated image for advertising purposes there or an image you change on a regular basis. Whatever the reason this is how to do it.

link to this article on phpbb.com: Select All: [kb=add-an-extra-image-to-the-right-of-prosilver-site-logo]Add an extra image to the right of prosilver site_logo[/kb]

link to this article on your own board: Select All: [url=http://www.phpbb.com/kb/article/add-an-extra-image-to-the-right-of-prosilver-site-logo/]Knowledge Base - Add an extra image to the right of prosilver site_logo[/url]

Add code to position your image

Open styles/yourstyle/theme/common.css and find:

Code: Select all: /* Search box --------------------------------------------- */

After add:

Code: Select all: #banner-pos { position: relative; margin-right: 90px; float: right; }

Refresh your theme.

Open styles/yourstyle/template/overall_header.html

Find: (this may only be a partial search if you have made changes previously but it is about line 96)

Code: Select all: <div id="wrap"> <div class="border-left"> <div class="border-right"> <div class="border-top"> <div class="border-top-left"> <div class="border-top-right"> <div class="inside" style="direction: {S_CONTENT_DIRECTION}; "> <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 id="site-description"> <a id="logo">{SITE_LOGO_IMG}</a> <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p> </div>

After add:

Code: Select all: <div id="banner-pos"> <img src="/url_image_location/ur_image.gif" alt="" /> </div>

Refresh your template and imageset.

Note: You can adjust the position of your image relative to the right hand side by playing with the value:

Code: Select all: margin-right: 90px;

In #banner-pos

If you find the image doesn't sit correctly in the vertical you can add:

Code: Select all: margin-top: 5px;

Like this:

Code: Select all: #banner-pos { position: relative; margin-right: 90px; float: right; margin-top: 5px; }

To #banner-pos

Adjust:

Code: Select all: margin-top: 5px;

In #banner-pos accordingly

I hope that's clear enough

Edited 23/9/2011 - added 'prosilver' to title - Mixstar

	What:	Where:	Country:
vacatures php arbeit php jobs php lavoro php emploi php trabajo php jobs php arbeit php

Knowledge Base

Advertisements