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
https://vborg.vbsupport.ru/external/2012/09/62.png

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 1346626923 at 1346626923 ---------------

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 1346627529 at 1346627529 ---------------

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