Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Aiheen aloitti: ericrose - marraskuu 24, 2011, 12:25:15 IP

Otsikko: Need help with banner resizing - please
Kirjoitti: ericrose - marraskuu 24, 2011, 12:25:15 IP


As you can see the banner is a bit short on both sides.  Due to the nature of the image I can't use repeating elements to make the banner expand and shrink with the main body of the forum.  However I need to find a way to make it stay full width with the forum if at all possible whether someone is using a tablet or a large desktop screen.  I have included a snippet of the code from the index.template.php file that appears to control the banner size but I could be wrong.

Any help would be greatly appreciated!

Eric


function template_body_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings, $user_info;

   echo '
   <div id="wrapper"', !empty($settings['forum_width']) ? ' style="width: ' . $settings['forum_width'] . '"' : '', '>
   <div id="headerlink" , <a href="http://blahblahblah.com"></a></div>
      <div id="header"', !empty($settings['header_logo_url_html_safe']) ? ' style="background-image: url(' . $settings['header_logo_url_html_safe'] . ')"' : '', '>
         <h1>', $context['forum_name'], '</h1>';
Otsikko: Re: Need help with banner resizing - please
Kirjoitti: Sir Osis of Liver - marraskuu 24, 2011, 02:08:46 IP

Set width to 100%.  You'll need a high resolution image to prevent degradation at higher screen res.

Otsikko: Re: Need help with banner resizing - please
Kirjoitti: ericrose - marraskuu 24, 2011, 03:46:02 IP
Sorry to be such a noob but where exactly do I put the 100%?  Can you show me please?  In the code above or in the CSS that controls the header?

Eric
Otsikko: Re: Need help with banner resizing - please
Kirjoitti: Sir Osis of Liver - marraskuu 24, 2011, 09:03:35 IP

Try this -



<div id="header"', !empty($settings['header_logo_url_html_safe']) ? ' style="background-image: url(' . $settings['header_logo_url_html_safe'] . '); width: 100%;"' : '', '>