making my logo fit all screens

guv · April 20, 2008, 04:41:52 PM

Hello everyone

my hands up ...i am new ...

but before you run and hide could a kind soul please help on making my site banner stretch and contract when the forum is used on different user screens

i personaly use dual screens here and on my 19" screen the banner looks fine on my 22" screen it looks to short on the right

if i make the banner longer by editing it to the size of my 22" screen its too long for my 17"

i have searched around the forum to find an answer and although this is covered in various places i just cant quite sort it out

i am using the ( goes of to check ) 1.1.4 smf software with the Dilber multicolour theme , my forum is not yet public due to various reasons political but that asside i realy would like to make my logo sit up top nicely and shrink and grow to the users settings or screen , the board does it fine but not my logo

i am adding my logo in , in this place within SMF > Theme Options and Preferences > Logo image URL:

i can change my permissions on the index.template.php file for the dilbert theme ( hopefully that is the right file to look in ) and i have looked through the various HTML codes trying to find how or where i can change things ...alas i have failed and so i am asking for help

this is my first ever venture into web design and forum so please be gentle

i guess you may need to see the thing so here it is
hxxp:www.paulajane.ukfsn.org/Forum/index.php [nonactive]

Deaks · April 20, 2008, 04:54:25 PM

I would advise asking in the authors Dilber MC thread on the Theme Site board, the author Harzem will be able to help you better as he knows coding best for that theme.

guv · April 20, 2008, 04:57:04 PM

dagnabit i asked in the wrong place

i will and thank you for the reply

Deaks · April 20, 2008, 05:47:37 PM

always happy to redirect

or is it help never to sure these days

guv · April 20, 2008, 05:51:17 PM

does look like an answer may not come unfortunately , a few peeps have commented on where Harzel has got to ... no matter , its not life or death

i`l just have to have a rethink of how i can get round it

Deaks · April 20, 2008, 05:58:05 PM

can you post the code from you themes index.template.php then

guv · April 20, 2008, 06:43:05 PM

sorry about posting all this , i see that others have been sensible and used a scrolling box , seems i missed the boat somewhere on that

this is from the box ..beginning line 77

oh well here goes and sorry about this

Code Select


// The main sub template above the content.
function template_main_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;
   
   // Show right to left and the character set for ease of translating.
   echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '><head>
   <meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
   <meta name="description" content="', $context['page_title'], '" />', empty($context['robot_no_index']) ? '' : '
   <meta name="robots" content="noindex" />', '
   <meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
   <script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?fin11"></script>
   <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var smf_theme_url = "', $settings['theme_url'], '";
      var smf_images_url = "', $settings['images_url'], '";
      var smf_scripturl = "', $scripturl, '";
      var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
      var smf_charset = "', $context['character_set'], '";
   // ]]></script>
   <title>', $context['page_title'], '</title>';
   
   // Any color set by user?
   if (isset($options['theme_color']))
      $settings['theme_main_color'] = $options['theme_color'];

   // If not set, or if not allowed to set
   if(!isset($options['theme_color']) || (isset($settings['allow_color_change']) && $settings['allow_color_change'] == 'no'))
   {
      // Defaults.
      $options['theme_color'] = isset($settings['theme_main_color']) ? $settings['theme_main_color'] : 'lightblue';
      $settings['theme_main_color'] = $options['theme_color'];
   }

   // The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
   echo '
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style_' , $settings['theme_main_color'] , '.css?fin11" />
   <link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';

   /* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
      Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
      Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
      Standards compliance mode happens when you use xhtml... */
   if ($context['browser']['needs_size_fix'])
      echo '
   <link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />';

   // Show all the relative links, such as help, search, contents, and the like.
   echo '
   <link rel="help" href="', $scripturl, '?action=help" target="_blank" />
   <link rel="search" href="' . $scripturl . '?action=search" />
   <link rel="contents" href="', $scripturl, '" />';

   // If RSS feeds are enabled, advertise the presence of one.
   if (!empty($modSettings['xmlnews_enable']))
      echo '
   <link rel="alternate" type="application/rss+xml" title="', $context['forum_name'], ' - RSS" href="', $scripturl, '?type=rss;action=.xml" />';

   // If we're viewing a topic, these should be the previous and next topics, respectively.
   if (!empty($context['current_topic']))
      echo '
   <link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />
   <link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';

   // If we're in a board, or a topic for that matter, the index will be the board's index.
   if (!empty($context['current_board']))
      echo '
   <link rel="index" href="' . $scripturl . '?board=' . $context['current_board'] . '.0" />';

   // We'll have to use the cookie to remember the header...
   if ($context['user']['is_guest'])
      $options['collapse_header'] = !empty($_COOKIE['upshrink']);

   // Output any remaining HTML headers. (from mods, maybe?)
   echo $context['html_headers'], '

   <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var current_header = ', empty($options['collapse_header']) ? 'false' : 'true', ';

      function shrinkHeader(mode)
      {';

   // Guests don't have theme options!!
   if ($context['user']['is_guest'])
      echo '
         document.cookie = "upshrink=" + (mode ? 1 : 0);';
   else
      echo '
         smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "', $context['session_id'], '");';

   echo '
         document.getElementById("upshrink").src = smf_images_url + '  . '"/'. $settings['theme_main_color'] . '" + (mode ? "/expand.gif" : "/collapse.gif");

         document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
         document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

         current_header = mode;
      }
   // ]]></script>';

   // the routine for the info center upshrink
   echo '
      <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
         var current_header_ic = ', empty($options['collapse_header_ic']) ? 'false' : 'true', ';

         function shrinkHeaderIC(mode)
         {';

   if ($context['user']['is_guest'])
      echo '
            document.cookie = "upshrinkIC=" + (mode ? 1 : 0);';
   else
      echo '
            smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "', $context['session_id'], '");';

   echo '
            document.getElementById("upshrink_ic").src = smf_images_url + '  . '"/'. $settings['theme_main_color'] . '" + (mode ? "/expand.gif" : "/collapse.gif");

            document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

            current_header_ic = mode;
         }
      // ]]></script>
</head>
<body>';

   echo '
   <div class="maindiv" style="width: ' , (isset($settings['page_div_width']) && !empty($settings['page_div_width'])) ? $settings['page_div_width'] : '99%' ,  ';">
      <div style="width: 100%;" class="topbar">
         <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
            <tr>
               <td style="padding:0;" width="1" height="120">';

   if(!($settings['logo_not_show']))
   {
      if (empty($settings['header_logo_url']))
         echo '
                  <a href="', $scripturl, '"><img src="', $settings['images_url'] . '/'. $settings['theme_main_color'], '/logo.jpg" style="margin: 0px;" alt="', $context['forum_name'], '" title="', $context['forum_name'], '"/></a>';
      else
         echo '
                  <a href="', $scripturl, '"><img src="', $settings['header_logo_url'], '" style="margin: 5px;" alt="', $context['forum_name'], '" /></a>';
   }
   echo '
               </td>';

   if (!empty($settings['show_name_near_logo']))
      echo '   
               <td>
                  <span style="font-family: \'Trebuchet MS\', Verdana, sans-serif; font-size: 150%; color: white; padding-top: 30px; padding-left: 30px; white-space: normal;">', $context['forum_name'], '</span>
               </td>';
   if (!empty($settings['top_right_html']))
      echo '
               <td valign="top" align="right">
                  <div style="color: white; padding-top: 10px; float:right;">', $settings['top_right_html'], '</div>
               </td>';

   echo '
            </tr>
         </table>
      </div>
      <div style="width: 100%; padding-top: 4px;" class="topbar2">
         <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
            <tr>';

   // Show a random news item? (or you could pick one from news_lines...)
   if (!empty($settings['enable_news']))
      echo '

               <td valign="middle" height="30" class="smalltext" style="padding-left:10px; padding-top:0px; padding-bottom:0px;">
                  <b>', $txt[102], '</b>: ', $context['random_news_line'], '
               </td>
         ';
   echo '
               <td valign="middle" height="30" style="padding-top:0px; padding-bottom:0px; padding-right:20px;" class="middletext" align="right">
            <form action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0px;">
               <a href="', $scripturl, '?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0px;" alt="" /></a>
               <input type="text" name="search" value="" style="width: 190px;" />&nbsp;
               <input type="submit" name="submit" value="', $txt[182], '" style="width: 11ex;" />
               <input type="hidden" name="advanced" value="0" />';

   // Search within current topic?
   if (!empty($context['current_topic']))
      echo '
               <input type="hidden" name="topic" value="', $context['current_topic'], '" />';

      // If we're on a certain board, limit it to this board ;).
   elseif (!empty($context['current_board']))
      echo '
               <input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

   echo '
            </form>

               </td>
            </tr>
         </table>
      </div>
      <div class="menubar">
         <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>';
               // Show the menu here, according to the menu sub template.
                  template_menu();
      echo '
            </tr>
         </table>
      </div>';
      
   // Here we start the main page, after the menu bar.
   // Unfortunately, IE 6 couldn't handle a div here with a CSS background property, no matter how much I tried. So we use a table for IE here. I love Firefox ^_^ visit getfirefox.com for more info.
   // It is time for Microsoft to get rid of IE and make Firefox their primary browser :P
   // Ok, Opera can also display the div properly. I love both FF & Opera :)

   echo '
         ', $context['browser']['is_ie'] ? '<table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr><td class="mainpage">' : '<div class="mainpage">', '
         <a style="float:right;" href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="', $settings['images_url'], '/', $settings['theme_main_color'], '/', empty($options['collapse_header']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>      

         <div class="memberbardiv">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
               <tr>
                  <td width="20">
                  </td>
                  <td class="memberbar">';
                  
            if($context['user']['is_logged'])
               echo '
                  ', $txt['hello_member_ndt'], ' <b>', $context['user']['name'] , '</b>';
            else
               echo $txt['welcome_guest'];
               
            echo '
                  </td>

                  <td class="middletext" align="right" valign="top" style="padding-right:10px; padding-left:10px;">
                     ' , $context['current_time'], '
                     <br/>
                  </td>

               </tr>
               
               <tr id="upshrinkHeader"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
                  <td valign="middle" width="1" style="padding-right:10px; padding-left:10px;">', !empty($context['user']['avatar']) ? $context['user']['avatar']['image'] : '', '</td>
                  
                  <td class="memberbar">';
      
         if($context['user']['is_logged'])
            echo '
                  <br/>
                  <span class="middletext">'
                  , $context['allow_pm'] ? '<b>' . $txt[152] . ' <a href="' . $scripturl . '?action=pm">' . $context['user']['messages'] . ' ' . ($context['user']['messages'] != 1 ? $txt[153] : $txt[471]) . '</a>' . $txt['newmessages4'] . ' ' . $context['user']['unread_messages'] . ' ' . ($context['user']['unread_messages'] == 1 ? $txt['newmessages0'] : $txt['newmessages1']).'</b>' : '<br/>', '.<br/><br/>
                  > <a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a> <br />
                  > <a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a><br />
                  
                  </span>';
                  
         echo '
                  </td>
                  <td class="middletext" align="right" valign="top" style="padding-right:10px; padding-left:10px;">
                     <br/>';
            // Are they logged in?
            if ($context['user']['is_logged'])
            {   
                  // Show the total time logged in?
                  if (!empty($context['user']['total_time_logged_in']))
                  {
                     echo '
                                    ', $txt['totalTimeLogged1'];
            
                     // If days is just zero, don't bother to show it.
                     if ($context['user']['total_time_logged_in']['days'] > 0)
                        echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];
            
                     // Same with hours - only show it if it's above zero.
                     if ($context['user']['total_time_logged_in']['hours'] > 0)
                        echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];
            
                     // But, let's always show minutes - Time wasted here: 0 minutes ;).
                     echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
                  }
                  // Is the forum in maintenance mode?
                  if ($context['in_maintenance'] && $context['user']['is_admin'])
                     echo '
                                    <b>', $txt[616], '</b><br />';
            
                  // Are there any members waiting for approval?
                  if (!empty($context['unapproved_members']))
                     echo '
                                    ', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '<br />';
   
            }
            // Otherwise they're a guest - this time ask them to either register or login - lazy bums...
            else
            {
               echo '
                                 <script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/sha1.js"></script>
         
                                 <form action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
                                    <input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
                                    <select name="cookielength">
                                       <option value="60">', $txt['smf53'], '</option>
                                       <option value="1440">', $txt['smf47'], '</option>
                                       <option value="10080">', $txt['smf48'], '</option>
                                       <option value="43200">', $txt['smf49'], '</option>
                                       <option value="-1" selected="selected">', $txt['smf50'], '</option>
                                    </select>
                                    <input type="submit" value="', $txt[34], '" /><br />
                                    <span class="middletext">', $txt['smf52'], '</span>
                                    <input type="hidden" name="hash_passwrd" value="" />
                                 </form>
                                 <br/><br/>';
            }
         
         echo '
                  </td>
               </tr>
               <tr id="upshrinkHeader2"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
                  <td colspan="3" class="memberbardivbottom">';
               
               // color selection box
               if(isset($settings['allow_color_change']) && $settings['allow_color_change'] == 'box')
                 echo '
                    <div style="position: relative; bottom: 13px; right:15px; float:right; ">
                     <form action="', $scripturl, '" method="post" class="smalltext">
                     <select name="options[theme_color]">
                     <option value="lightblue" '         ,$settings['theme_main_color'] == 'lightblue' ? 'selected="selected"': '', '>Light Blue</option>
                     <option value="lightnavy" '         ,$settings['theme_main_color'] == 'lightnavy' ? 'selected="selected"': '', '>Light Navy</option>
                     <option value="lightsilver" '      ,$settings['theme_main_color'] == 'lightsilver' ? 'selected="selected"': '', '>Light Silver</option>
                     <option value="lightturquoise" '   ,$settings['theme_main_color'] == 'lightturquoise' ? 'selected="selected"': '', '>Light Turquoise</option>
                     <option value="lightgreen" '      ,$settings['theme_main_color'] == 'lightgreen' ? 'selected="selected"': '', '>Light Green</option>
                     <option value="lightolive" '      ,$settings['theme_main_color'] == 'lightolive' ? 'selected="selected"': '', '>Light Olive</option>
                     <option value="lightgolden" '      ,$settings['theme_main_color'] == 'lightgolden' ? 'selected="selected"': '', '>Light Golden</option>
                     <option value="lightbrown" '      ,$settings['theme_main_color'] == 'lightbrown' ? 'selected="selected"': '', '>Light Brown</option>
                     <option value="lightred" '         ,$settings['theme_main_color'] == 'lightred' ? 'selected="selected"': '', '>Light Red</option>
                     <option value="lightrose" '         ,$settings['theme_main_color'] == 'lightrose' ? 'selected="selected"': '', '>Light Rose</option>
                     <option value="lightlilac" '      ,$settings['theme_main_color'] == 'lightlilac' ? 'selected="selected"': '', '>Light Lilac</option>
                     <option value="lightviolet" '      ,$settings['theme_main_color'] == 'lightviolet' ? 'selected="selected"': '', '>Light Violet</option>
                     </select>
                     <input type="submit" name="submit" value="Change" style="width: 11ex;" />
                     </form>
                  </div>';
               if(isset($settings['allow_color_change']) && $settings['allow_color_change'] == 'bars')
               echo '
                  <div style="position: relative; bottom: 15px; right:15px; float:right; ">
                     <form action="', $scripturl, '" method="post" class="smalltext">
                     <input style="border: solid 2px #6699CC; background-color: #6699CC; color: #6699CC; width: 20px; font-size: 1px;" type="submit" value="lightblue" name="options[theme_color]"/>
                     <input style="border: solid 2px #5371AD; background-color: #5371AD; color: #5371AD; width: 20px; font-size: 1px;" type="submit" value="lightnavy" name="options[theme_color]"/>
                     <input style="border: solid 2px #6C7F93; background-color: #6C7F93; color: #6C7F93; width: 20px; font-size: 1px;" type="submit" value="lightsilver" name="options[theme_color]"/>
                     <input style="border: solid 2px #53ADAD; background-color: #53ADAD; color: #53ADAD; width: 20px; font-size: 1px;" type="submit" value="lightturquoise" name="options[theme_color]"/>
                     <input style="border: solid 2px #4DB45D; background-color: #4DB45D; color: #4DB45D; width: 20px; font-size: 1px;" type="submit" value="lightgreen" name="options[theme_color]"/>
                     <input style="border: solid 2px #93A659; background-color: #93A659; color: #93A659; width: 20px; font-size: 1px;" type="submit" value="lightolive" name="options[theme_color]"/>
                     <input style="border: solid 2px #D8A259; background-color: #D8A259; color: #D8A259; width: 20px; font-size: 1px;" type="submit" value="lightgolden" name="options[theme_color]"/>
                     <input style="border: solid 2px #a67259; background-color: #a67259; color: #a67259; width: 20px; font-size: 1px;" type="submit" value="lightbrown" name="options[theme_color]"/>
                     <input style="border: solid 2px #E15050; background-color: #E15050; color: #E15050; width: 20px; font-size: 1px;" type="submit" value="lightred" name="options[theme_color]"/>
                     <input style="border: solid 2px #D47BC5; background-color: #D47BC5; color: #D47BC5; width: 20px; font-size: 1px;" type="submit" value="lightrose" name="options[theme_color]"/>
                     <input style="border: solid 2px #A185D6; background-color: #A185D6; color: #A185D6; width: 20px; font-size: 1px;" type="submit" value="lightlilac" name="options[theme_color]"/>
                     <input style="border: solid 2px #7F88B2; background-color: #7F88B2; color: #7F88B2; width: 20px; font-size: 1px;" type="submit" value="lightviolet" name="options[theme_color]"/>
                     </form>
                  </div>';
         echo '
                  </td>
               </tr>

            </table>
         </div>';
         
      if(!empty($settings['custom_global_html']))
      echo '
         <div align="center" style="width: 90%; margin-left: auto; margin-right: auto; margin-top:10px; border: 0px solid;" class="middletext">
            ', $settings['custom_global_html'], '
         </div>';
         
      // Donation request!
      if($context['current_action'] == 'admin' && $context['user']['is_admin'])
      {
         global $language;
         echo '<div align="center">
            <a target="_blank" href="http://www.harzem.com/themes/dilbermc.php?click&amp;lang=',$language,'"><img src="http://www.harzem.com/themes/dilbermc.php?image&amp;lang=',$language,'" alt="DilberMC" /></a>
         </div>';
      }
      
   // The main content should go here.
   echo '
   <div id="bodyarea" style="padding: 1ex 25px 2ex 25px;">';
}

Rumbaar · May 06, 2008, 09:37:50 PM

If you want to make sure it's the same size in all browser and it's a fixed width image you'll need to specify the size in the HTML. Though this might result in some distorted looking banners.

Code Select

<a href="', $scripturl, '"><img src="', $settings['header_logo_url'], '" style="margin: 5px;" alt="', $context['forum_name'], '" /></a>';

Change too:

Code Select

<a href="', $scripturl, '"><img src="', $settings['header_logo_url'], '" style="margin: 5px;" alt="', $context['forum_name'], '" width="100%" /></a>';

Where you change width="100%" to width="600px" or whatever you want it to fixed at.
I would look to design a banner that allows for greater range of resolutions though.

guv · May 07, 2008, 02:14:37 PM

Thanks for the reply

will have a look at this now and get it sorted

m3talc0re · May 07, 2008, 03:44:19 PM

The best and really, only way to make a "logo" image is to make a fixed width image and then tile a background behind it and blend them together.

News:

making my logo fit all screens