How To Add Banner Next to Logo Image to the Website Created Using Pligg?

Some times it is required to add Banner/Affiliate Link/Ad to the Header in the Website created using Pligg CMS software. The following steps explain how to add this. It tested with wistie template.

Step (1) Login to the website as Admin.

Step (2) Click on Template menu from the Admin Panel.

Step (3) Select header.tpl file from “Choose a file to open:” drop down box and Open the file.

Step (4) Look for the following line of code:

<div id="logo"><a href="{$my_base_url}{$my_pligg_base}">{#PLIGG_Visual_Name#}</a></div>

Step (5) After the above line of the code add the following code:

<div id="banner"><a target="_blank" href="<<URL>>"><img src="<<image url>>" border="0" width="<<width>>"  height="<<height>>" alt="<<alt text>>"/></a></div>

Replace  the following with valid values:

<<URL>> – What URL to open when user clicks on the Image.

<<image url>> – URL of the Image you want to display.

<<width> – Width of the Image.

<<height>> – Height of the Image.

<<alt text>> – Alternate text for the Image.

Step (6) Save your changes. Now need to modify the style.css stylesheet file. Go back to Template Editor.

Step (7): Select ../templates/wistie/css/style.css file from “Choose a file to open:” drop down box and Open the file.

Step (8) Look for the following code:

#logo {
padding: 10px;
font-size: 24px;
font-weight: bold;
color: #000;
}

and replace the code with the following:

#logo {
padding: 10px;
font-size: 24px;
font-weight: bold;
color: #000;
float: left;
}

Step (9) After the below line of code:

#logo a{color: #000; text-decoration:none;}

add the below banner code:

/* Banner */
#banner {
float: right;
padding-right: 250px;
padding-top: 10px;
}

observe that this banner is used in Step (5) to adjust the banner properly.

Step (10) Save your changes and Refresh your home page to see your banner on the website.