vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)
-   -   Help with fitting logo to other resolutions (https://vborg.vbsupport.ru/showthread.php?t=287389)

znightmare 09-02-2012 06:01 PM
Help with fitting logo to other resolutions
 
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 09-02-2012 08:49 PM
Try putting the two images/links into a <div> (crude example below)

Code:
<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 09-02-2012 09:03 PM
No I don't think it worked, thanks though, hmmm I don't know what I could do :/

Stefan118 09-02-2012 09:20 PM
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.

HTML Code:
<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 09-02-2012 09:36 PM
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 09-02-2012 09:47 PM
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:

HTML 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
HTML Code:
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
and
HTML Code:
    <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:
HTML Code:
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
and replace EVERYTHING between that and
HTML Code:
    <div id="toplinks" class="toplinks">
        <vb:if condition="$show['member']">
            <ul class="isuser">
with this:

HTML Code:
<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


All times are GMT. The time now is 10:55 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01144 seconds
  • Memory Usage 1,745KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (7)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (6)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete