How to put Image or Advert Banner above the Actual Forum in SMF

A friend of mine told me about how He wanted to add an image above his entire forum like shown in the image above. So i decided to write this post just to help.

Log into your cpanel, File manager, locate index.template.php , find the code below :

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">

Replace the above code with the one below :

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

And also add this third code below anywhere in your index.css

 
#header_img {
 background: url(../images/theme/header_img.png) no-repeat;
 border: none; border-radius: 3px;
 padding: 0 6px 10px 6px;
 margin: 0 auto;
 height: 120px;
 width: 900px;
}

Adjust the height and width of your banner or image to suit what you want and also

add your image "header_img.png" to the images/theme folder.

Note - Back up your files before making these changes.

Enjoy 

A friend of mine told me about how He wanted to add an image above his entire forum like shown in the image above. So i decided to write this post just to help.

Log into your cpanel, File manager, locate index.template.php , find the code below :

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">

Replace the above code with the one below :

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

And also add this third code below anywhere in your index.css

 
#header_img {
 background: url(../images/theme/header_img.png) no-repeat;
 border: none; border-radius: 3px;
 padding: 0 6px 10px 6px;
 margin: 0 auto;
 height: 120px;
 width: 900px;
}

Adjust the height and width of your banner or image to suit what you want and also

add your image "header_img.png" to the images/theme folder.

Note - Back up your files before making these changes.

Enjoy