Simple Machines Community Forum

Afternoon all,

I have a image which I would like to add to the head of my forum. This is an advert or anything clickable like that, I just want to place an image in the head of my forum.

My fourm (2.01)is at www.apieandpint.co.uk/Down the pub/ (http://www.apieandpint.co.uk/Down%20the%20pub/) and runs on the Astonished template

The image I'd like to show in the head of the forum and centered is:



I've tried to add the global header mod and it keeps showing an error.

Can I add this directly into the template code myself? If I can, where would it go?

Any help would be appreciated.

Simplest way could be to simply stitch together the logo you currently have there with this extra bit.

Note ideally you should not change your original template, create a new copy of it with a new name and use that and modify that one, you then have an escape route should anything go wrong.

The other option is to go into your template /Themes/yourTemplate/index.template.php file and look for the function template_body_above and you will find code like this (this is from the default template yours may be a bit different note I have added two comment lines which are not in the original code):

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">

// This next line is the logo ---- I have added this line //


<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>


// You can put in your required second banner here   -------- //


</h1>';

// the upshrink image, right-floated

I'm not quite sure what to do there, being a newbie.  :(

I've a direct url to the image I want to add

http://i1123.photobucket.com/albums/l554/apieandpint/next5.jpg (http://i1123.photobucket.com/albums/l554/apieandpint/next5.jpg)

or if needed, the html code

<a href="http://s1123.photobucket.com/albums/l554/apieandpint/?action=view&amp;current=next5.jpg" target="_blank"><img src="http://i1123.photobucket.com/albums/l554/apieandpint/next5.jpg" border="0" alt="Photobucket"></a>

The index template is attached.

That theme is rather different to the default, it appears to use CSS background images in the header. This means you may have to mess around with the CSS to get it to align correctly. If you look from line 200 on in your file you can add the img in the top_section div.
You could try the code below, just add the img source line, be careful of the apostrophe and semicolon at the end of the line the img tag must go inside it or your script will crash.
Without looking at the CSS though I suspect if you do this it will go over the top of your current top left logo, you could either create a new image which includes it or play around with the CSS or insert another image in the code below before the next5 one to put it back.
You could try editing Themes/YourTheme/css/index.css find #top_section and add a line margin-left:320px; to push the image to the right. If you make this change be careful though and keep a backup of index.css to put back in an emergency, a small error could knock out all the CSS. All this is a bit of a hack though.

The correct solution requires quite a bit of changing. I would also not host the image on photobucket but upload it to your server.


<div id="collapse_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<div id="header">
<div id="top_section">
<a class="forumtitle" href="', $scripturl, '"></a>
                                                           <img src="http://i1123.photobucket.com/albums/l554/apieandpint/next5.jpg" border="0" alt="Photobucket" />';

echo '
<div class="user">';


Simple. You can place this code anywhere in your index.template.php file where ever you want the image to display. Experiment until you get it where you want it.
<div class="centertext">
<a href="http://url goes here/"target="_blank"><img title="hover title goes here" src="', $settings['images_url'], '/image url goes here"/>

Place your image in your themes images folder. Make necessary path changes. No css changes required.

Note: Keep a backup of your file before making any changes.