Help with fitting logo to other resolutions

[znightmare]

So I made my logo to fit the resolution that I use (1366x768), it fits perfectly at that resolution but it get all messed up on any other screen resolution. The way I put my banner on my site was to just add a picture to the very top of the header template, so is there a code I can use before the picture to make it expand or get smaller depending on the resolution?

Here's a pic of it on 1440x900


my url is http://anime-forum.net

[John Lester]

Try putting the two images/links into a <div> (crude example below)

<div>
a href="http://anime-forum.net/forum.php"><img src="http://i150.photobucket.com/albums/s118/beefsalad1/derff.jpg">


</a>
<a href="http://anime-forum.net/forum.php">
<img src="http://i150.photobucket.com/albums/s118/beefsalad1/piotuiymtnrgbef.jpg">


</a>
</div>

[znightmare]

No I don't think it worked, thanks though, hmmm I don't know what I could do :/

[Stefan118]

I used this on my ads.
This script is for resolution under 1100 pixels <> (1024x768)
and for a resolution above 1100 pixels <> (1280x1024)

It eighter places a banner with a width of 350 or 430 pixels.

<script language="javascript" type="text/javascript" src="/templates/high_javascript.js">
<!--
//var iWidth = 0;
//var iHeight = 0;
//-->
</script>
 <center>
<script type="text/Javascript">
<!--
/*initialization for IE! Leave this funtion after the body tag */
 /*if(!window.Width && document.body && document.body.offsetWidth)
  {
   //window.onresize = recal;
 	 //alert("line114!");
   Width = windowWidth();
   Height = windowHeight();
   //alert(Width + "<br>" + Height);
   //alert("width");
 }
 */
//-->
var iWidth, iHeight, sRes;
if (window.innerWidth != null) {
	//alert("first");
	iWidth = window.innerWidth;
	iHeight = window.innerHeight; 
}
else if (document.body.clientWidth != null) {
	//alert("second");
	iWidth = document.body.clientWidth;
	iHeight=document.body.clientHeight;
} else {
	//alert("third");
	}

var imgPath = "banner.jpg";
var imgAlt = "Alt text.";

if (iWidth <= 1100) {
     document.write("<a href=http://www.google.comenter a site url target=_new><img src='enter image sourcepath WITHOUT image name!" + imgPath + "' alt='" + imgAlt + "' width='350'></a>");

	}

else

 {
     document.write("<a href=http://www.google.com target=_new><img src='enter image sourcepath WITHOUT image name!" + imgPath + "' alt='" + imgAlt + "' width='430'></a>");
  }

[znightmare]

Oh nice, so this will work for my banner? Will it work for resolution of 1440x900? and where exactly do I put it, sorry I'm not all that great with coding.

[Stefan118]

In the ACP, goto Styles and templates --> Style maneger
In the right screen select: Edit templates.
In the Header template you see the folowing code:

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">

After that your banner / logo is loaded.

I have edited my template, so i don't know anymore what the original code is what follows under the code above here...

But everithing between

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">

and

    <div id="toplinks" class="toplinks">
        <vb:if condition="$show['member']">
            <ul class="isuser">

can be edited for your banner if i'm correct.

To be sure, you can copy and past the whole template to a textfile so if it doesn't work you can put the file back.

--------------- Added [DATE]1346626923[/DATE] at [TIME]1346626923[/TIME] ---------------

I just found out that it doesn't work...
Tried it in my testforum, and it doesn't show my banner.

Working on it....

--------------- Added [DATE]1346627529[/DATE] at [TIME]1346627529[/TIME] ---------------

it works... I forgot 2 closing tags lol.

This is what you have to do...

Find in the Header template:

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">

and replace EVERYTHING between that and

    <div id="toplinks" class="toplinks">
        <vb:if condition="$show['member']">
            <ul class="isuser">

with this:

<script language="javascript" type="text/javascript" src="/templates/high_javascript.js">
<!--
//var iWidth = 0;
//var iHeight = 0;
//-->
</script>
 <center>
<script type="text/Javascript">
<!--
/*initialization for IE! Leave this funtion after the body tag */
 /*if(!window.Width && document.body && document.body.offsetWidth)
  {
   //window.onresize = recal;
 	 //alert("line114!");
   Width = windowWidth();
   Height = windowHeight();
   //alert(Width + "<br>" + Height);
   //alert("width");
 }
 */
//-->
var iWidth, iHeight, sRes;
if (window.innerWidth != null) {
	//alert("first");
	iWidth = window.innerWidth;
	iHeight = window.innerHeight; 
}
else if (document.body.clientWidth != null) {
	//alert("second");
	iWidth = document.body.clientWidth;
	iHeight=document.body.clientHeight;
} else {
	//alert("third");
	}

var imgPath = "banner.jpg";
var imgAlt = "Alt text.";

if (iWidth <= 1100) {
     document.write("<a href=http://www.google.com target=_new><img src='/enter image sourcepath WITHOUT image name!/" + imgPath + "' alt='" + imgAlt + "' width='350'></a>");

	}

else

 {
     document.write("<a href=http://www.google.com target=_new><img src='/enter image sourcepath WITHOUT image name!/" + imgPath + "' alt='" + imgAlt + "' width='430'></a>");
  }
</script>

</center>

Note:
Replace google.com for your own URL
Replace the name of the banner
Replace the imagepath like this: /images/logo/
Resize the width of your logo (1440 and a lower resolution) where i have 350 and 430