Add an extra image to the right of prosilver site_logo
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.
In Categories: Styles
- Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/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:
After add:
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 103)
After add:
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:In #banner-pos
If you find the image doesn't sit correctly in the vertical you can add:
Like this:
To #banner-pos
Adjust:
In #banner-pos accordingly
I hope that's clear enough
Edited 23/9/2011 - added 'prosilver' to title - Mixstar
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 103)
Code: Select all
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><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;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;
}Adjust:
Code: Select all
margin-top: 5px;I hope that's clear enough
Edited 23/9/2011 - added 'prosilver' to title - Mixstar