1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Banner Next To A Logo ?

Discussion in 'Templates, HTML, CSS, and Design Help' started by howinfo, Feb 12, 2010.

  1. howinfo Customer

    I am using v4.1.6 default layout.

    I have been trying to but a banner ad on the top of the nav bar at the right side of the logo. I was assuming that the right file was layout.tpl so I tried to stick the ad code in different places but it just ended up in the wrong location and messed up the page.

    Can somebody tell me please if the layout.tpl is the right file and between which line of code I should but the ad code in order to it appear at the right side of the logo.

    Thank You
  2. Mike-N-Tosh Owner

    Yes, the layout.tpl file is the correct file. More than likely the issue is in the CSS file (style.css) as the template logo is big to accommodate larger logos. You may need to decrease the width of the logo declaration and consider adding in a new class for your advertisement banner as well.
  3. howinfo Customer

    Thanks Mike-N-Tosh It will be too complicated for me do it myself as I do not know anything about the code. The problem could be what you said but I think I was just sticking my banner code to a wrong place, as I was just randomly putting it anywhere in hope that it will end up in the right location.:(
  4. seymourjames All Hands On Deck

    You will need to adjust several elements in the css file to do this which include putting in a height for the #header, adjusting the css for the #logo as well. It also becomes easier to do if you move a couple of things around in the layout.tpl file such as the welcome guest part.
  5. Dragline Customer

    Bringing this thread back instead of starting a new one. Im trying to ad a banner rotator to the blank space to the right of the logo.

    I have already decreased the logo width in the style.css from 960 to 400.

    I know next I have to edit the layout.tpl though Im not sure exactly where to add the javascript I have. Ive tried adding it below the code for logo and ended up making my site give a 500:error. Obviously i did something wrong. Im not sure what adding a new class is. Any help would be appreciated.

    Here is the javascript I got off the web.

    Code:
    <script type="text/javascript">
    <!-- Begin
    rnd.today=new Date();
    rnd.seed=rnd.today.getTime();
    
    function rnd() {
            rnd.seed = (rnd.seed*9301+49297) % 233280;
            return rnd.seed/(233280.0);
    };
    
    function rand(number) {
    	var result = Math.ceil(rnd()*number);
    	if (!result)result++;
            return result
    };
    var ad_cnt1 = 2;
    var ad1 = rand(ad_cnt1);
    var link1;
    var adBanner1;
    var width1
    var height1
    if (ad1==1) {
    link1="http://www.mayhemmotorsports.net";
    adBanner1="http://www.horsepowerjunkies.com/banners/M2Logo.gif";
    width1="468";
    height1="60";
    alt1="mayhem";
    }
    if (ad1==2) {
    link1="http://fastlanemotorsports.us";
    adBanner1="http://www.horsepowerjunkies.com/banners/fastlane_banner.JPG";
    width1="468";
    height1="60";
    alt1="fastlane";
    }
    document.write('<center><a href="' + link1 + '" target="_blank">');
    document.write('<img src="' + adBanner1 + '" width=' + width1 + ' height=' + height1 + ' border=0 alt="' + alt1 + '"></a>');
    document.write('</center>');
    // End -->
    </SCRIPT>
    
  6. seymourjames All Hands On Deck

    Which template?

    You may have to increase the header height too?

    Are you using literal tags to enclose the javascript?

    I am afraid you are not giving enough info really to help.
  7. Dragline Customer

    I am using Sigma Silver. I did not wrap it in literal tags but will try that.
  8. seymourjames All Hands On Deck

    Here is the css you should be looking at in terms of making it fit height wise.

    #header {
    clear:both;
    float:left;
    width:960px;
    height:140px;
    }


    So you get the hang of it, just position a test image image there first. Exactly where you want it. and get a copy of web developer for Firefox and use the outline tool to see what css is involved in what you are trying to do. It makes it so much easier and the tool is free.
  9. Dragline Customer

    Using the literal tags made the banners appear in the header. Without editing #header height or width it is in the middle. Editing #header width did place it over to the right side of the header. But it is at the very top of the page. This also relocated the Welcome Guest over to the left above the main logo. Increasing the #header height didn't do anything but just increase the height of the header area.

    At least im making progress in the right direction I think. Hopefully i will be able to mess around with it more a little later.
  10. seymourjames All Hands On Deck

    Yes but you are not explaining your real issue. Is it display, is it positioning?
  11. roofie71 New Member

    Hi, I have a banner positioning question. I have some code that I have obtained through an affiliate programme. I am wanting to place banner ads to the left top and right top of my page. I have seen that you add banner code in the layout.tpl, but I am a bit slow on the uptake! If for example I wanted to add a banner to my Modena Blue page at the top right side bar how and where would I put it? Running v4.2.3 Developer.
  12. freeze2 Super Moderator

    I'm not exactly sure of where you were wanting to put your ad code or what the size of the ad is, but if you put it in the header, you would probably do something like this:

    CSS:

    Code:
    #header {
        overflow: hidden;
        width: 960px;
        height: 115px;
    }
    #logo {
        float: left;
        margin: 10px 0 0 0;
        padding: 0;
        color: #fff;
        text-align: left;
        width: 400px;
    }
    #adcode {
        width: 200px;
        float: left;
    }
    #bookmarks {
        float: right;
        margin-top: 15px;
        width: 100px;
    }
    Insert code below logo div something like:

    Code:
    <div id="adcode">
     
    Your code here
         
    </div>
    This is just a guideline, but may give you an idea of how you want to implement your ad code.

Share This Page