Getting logo to scale?

[JoeBrodsky]

I just recently uploaded my very own logo onto my site, however the logo isn't scaling for people with different size screens, or phones.  For example, my website logo looks perfectly sized for me, but either undersized or oversized for others.  I'll post photos.  Any help would be appreciated as I am very new to the whole website world. 

[Deaks]

this is cause you have it set as a fixed size, can you provide the code around where you logo is, you can get this in your themes index.template.php

[JoeBrodsky]

I was just uploading it via the logo image url under theme options and preferences. See below

[mashby]

How about a link to the site where this logo is?

[Deaks]

Ah ok, can you attach your themes index.template.php please

[JoeBrodsky]

How about a link to the site where this logo is?

the link to my website is oghl.net

the link to my logo is http://i1350.photobucket.com/albums/p780/THExSWAGGxCHAMP/Logo5_zpsfb1a760a.png

[JoeBrodsky]

Ah ok, can you attach your themes index.template.php please

I'm not quite sure if this is what you mean as I just started about 2 days ago haha but I hope its what you are asking for!

Code Select Expand

<?php
/**
 * Simple Machines Forum (SMF)
 *
 * @package SMF
 * @author Simple Machines
 * @copyright 2011 Simple Machines
 * @license http://www.simplemachines.org/about/smf/license.php BSD
 *
 * @version 2.0
 */

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context, $settings, $options, $txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as opposed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = true;

/* Does this theme use the strict doctype? */
$settings['strict_doctype'] = false;

/* Does this theme use post previews on the message index? */
$settings['message_index_preview'] = false;

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = true;
}

// The main sub template above the content.
function template_html_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>';

// The ?fin20 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'], '/css/index', $context['theme_variant'], '.css?fin20" />';

// Some browsers need an extra stylesheet due to bugs/compatibility issues.
foreach (array('ie7', 'ie6', 'webkit') as $cssfix)
if ($context['browser']['is_' . $cssfix])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/', $cssfix, '.css" />';

// RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
 <script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_default_theme_url = "', $settings['default_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'], '";', $context['show_pm_popup'] ? '
var fPmPopup = function ()
{
if (confirm("' . $txt['show_personal_messages'] . '"))
window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
}
addLoadEvent(fPmPopup);' : '', '
var ajax_notification_text = "', $txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>';

echo '
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title_html_safe'], '" />', !empty($context['meta_keywords']) ? '
<meta name="keywords" content="' . $context['meta_keywords'] . '" />' : '', '
<title>', $context['page_title_html_safe'], '</title>';

// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />';

// Present a canonical url for search engines to prevent duplicate content in their indices.
if (!empty($context['canonical_url']))
echo '
<link rel="canonical" href="', $context['canonical_url'], '" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="', $scripturl, '?action=help" />
<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']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']))
echo '
<link rel="alternate" type="application/rss+xml" title="', $context['forum_name_html_safe'], ' - ', $txt['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" />';

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

echo '
</head>
<body>';
}

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

echo '
  <div id="wrapper">
 <div id="t_bar">';
 if ($context['user']['is_logged'])
 {
  echo'
<div class="time_bar">
<span>', $context['current_time'], '</span>
</div>
 <div class="user_bar">
<p class="your_avatar"><a href="', $scripturl, '?action=profile">'.$context['user']['avatar']['image'].'</a></p>
 <span>', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></span> |
  <span><a href="', $scripturl, '?action=unread">', $txt['unread'], '</a></span> |
 <span><a href="', $scripturl, '?action=unreadreplies">', $txt['unread_replies'], '</a></span>
</div>';
 }
 else
 {
 echo '
<div class="user_bar">
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
 <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<span>'.$txt['username'].': </span><input type="text" name="user" size="10" class="input_text" />
<span>'.$txt['password'].': </span><input type="password" name="passwrd" size="10" class="input_password" />
<input type="submit" value="', $txt['login'], '" class="button_submit" />
</form>
</div>';
}
echo '
<div id="s_bar">
<ul>';

if(!empty($settings['twitter_url']))
echo '
<li><a class="icons_social twitter" href="', $settings['twitter_url'] , '" target="_blank"></a></li>';

if(!empty($settings['facebook_url']))
echo '
<li><a class="icons_social facebook" href="', $settings['facebook_url'] , '" target="_blank"></a></li>';

if(!empty($settings['youtube_url']))
echo '
<li><a class="icons_social youtube" href="', $settings['youtube_url'] , '" target="_blank"></a></li>';

if(!empty($settings['google_url']))
echo '
<li><a class="icons_social google" href="', $settings['google_url'] , '" target="_blank"></a></li>';

echo '
<li><a class="icons_social rss" href="', empty($settings['rss_url']) ? '' . $scripturl . '?action=.xml;type=rss' : '' . $settings['rss_url'] . '', '" target="_blank"></a></li>';

echo '

</ul>
</div>';

 echo'
</div>
<div id="header">';

  // Show a random news item? (or you could pick one from news_lines...)
  if (!empty($settings['enable_news']))
  {
 echo '<div id="news">
<br /><b>', $txt['news'], ':</b> ', $context['random_news_line'], '</div>';
  }
echo '
 <div id="logo">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
 </div>';
 echo '
  </div>

<div id="toolbar">
  ',template_menu(),'
</div>
<div id="bodyarea">';
 theme_linktree();

//SMFPacks Shoutbox -->
if (function_exists('template_shoutbox')) template_shoutbox('main');
// <-- SMFPacks Shoutbox
}

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

echo '
  </div>';

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
  echo '
<div id="footerarea">
 <div id="footer_section">
  <div class="frame">
<ul class="reset">
<li class="copyright">', theme_copyright(), '</li>
<li><strong>Carbon</strong> by, <a href="http://www.skin-box.com/" target="_blank" class="new_win" title=""><span>Skin-Box</span></a></li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="', $txt['valid_xhtml'], '"><span>', $txt['xhtml'], '</span></a> 
</li>
', !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<li><a id="button_rss" href="' . $scripturl . '?action=.xml;type=rss" class="new_win"><span>' . $txt['rss'] . '</span></a></li>' : '', ' 
<li class="last"><a id="button_wap2" href="', $scripturl , '?wap2" class="new_win"><span>', $txt['wap2'], '</span></a></li><br/>
<li><a href="#" target="_self" class="new_win" title=""><span>Privacy Policy</span></a> | <a href="#" target="_self" class="new_win" title=""><span>Contact</span></a> | <a href="#" target="_self" class="new_win" title=""><span>About Us</span></a></li>
 </ul>';

// Show the load time?
if ($context['show_load_time'])
echo '
<p>', $txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</p>';

echo '
  </div>
 </div>
</div>';
}

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

echo '
</div>
</body></html>';
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

// Reverse the linktree in right to left mode.
if ($context['right_to_left'])
$context['linktree'] = array_reverse($context['linktree'], true);

echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';

// Don't show a separator for the last one (RTL mode)
if ($link_num != count($context['linktree']) - 1 && $context['right_to_left'])
echo '&#38;#171;&nbsp;';

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] .'</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1 && !$context['right_to_left'])
echo '&nbsp;&#38;#187;';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="topnav">
<ul>';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', '" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>', $button['title'], '</a>';

if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</a>';

// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>', $grandchildbutton['title'], '</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
</div>';
}

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $strip_options = array())
{
global $settings, $context, $txt, $scripturl;

if (!is_array($strip_options))
$strip_options = array();

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '<a ' . (isset($value['active']) ? 'class="active" ' : '') . 'href="' . $value['url'] . '" ' . (isset($value['custom']) ? $value['custom'] : '') . '><span>' . $txt[$value['text']] . '</span></a>';
}

// No buttons? No button strip either.
if (empty($buttons))
return;

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);

echo '
<div class="buttonlist', !empty($direction) ? ' align_' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>
<li>', implode('</li><li>', $buttons), '</li>
</ul>
</div>';
}

?>

[Deaks]

ok this is easy

look for

Code Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>

Replace with

Code Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" width="99%" />', '</a>

This should scale it to meet the different resolutions

[JoeBrodsky]

ok this is easy

look for

Code Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>

Replace with

Code Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" width="99%" />', '</a>

This should scale it to meet the different resolutions

Thanks so much I got it to work! The only other question I have, how can i make the logo larger?  It's a bit small for my liking as I wanted it to take up that grey box almost entirely.  Thanks again!

[Deaks]

try increasing the 99% to a higher number.

[JoeBrodsky]

try increasing the 99% to a higher number.

Works like a charm!  I'm actually learning more from the community here then I have from my teachers last semester lol

[Deaks]

Glad I could help

If you feel this is sorted please click on "Mark Topic Solved" at the bottom of this page.

[JoeBrodsky]

Glad I could help

If you feel this is sorted please click on "Mark Topic Solved" at the bottom of this page.

One last question! How do I center the logo ? Its a bit to the left still

[Deaks]

ok a dirty trick thats not good practice but add this before the word width

style="margin: 0 auto;"

make sure their is a space after the last second "

[JoeBrodsky]

ok a dirty trick thats not good practice but add this before the word width

style="margin: 0 auto;"

make sure their is a space after the last second "

I put the code in

Code Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '"style="margin: 0 auto;" width="150%" />', '</a>
</div>';

However it didn't center, maybe I did something wrong?

[Deaks]

add a space before style ...

[JoeBrodsky]

add a space before style ...

Ahh ok i thought you meant a space in a different place lol this is what it looks like now 

Code Select Expand

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" style="margin: 0 auto;" width="150%" />', '</a>

[Deaks]

that should work :/

ok remove the style code you added and can you attach your index.css located in the css folder

[JoeBrodsky]

that should work :/

ok remove the style code you added and can you attach your index.css located in the css folder

I went to attach it, but it says its over the character limit by 65,000 lol so I can't post it

[Deaks]

add it as an attachment on the post.