Different logo sizes?

[okami91]

I am using a custom theme for SMF.

My issue is that my logo looks different on different screen sizes. For example the logo shows up completely on my 23" screen but only the text shows up on my 13" screen. The logo also looks different on an old dell 17" square screen.

Is there any way to make the logo resize for different screen sizes?

Is this something I would need to change in the theme/css code?

[kat]

Depends on how you put the logo there.

[okami91]

Depends on how you put the logo there.

Currently I am using the WIP theme flatlines.

I put the logo image in the theme folder.

I think this css code is for the logo/top part:

Code Select Expand

#top_section
{
/*min-height: 30px;*/
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 0;
padding: 20px 0;
}

here is the link to my beta site:
revolutionclan.org/forum2

[kat]

You replaced the theme's logo image with your own, yes?

I've just download the theme, to take a look...

[okami91]

Here is what it looks like on a 23" screen: http://gyazo.com/2566a4bbca10d31b662de54a302fd42b [nofollow]

it looks different on smaller screens and weird screen shapes.

And yes I switched it with my own logo.

[kat]

I think the problem is that the image you're using is a LOT bigger than the one you replaced.

The css you mentioned controls aspects of the header, sure. I'm not so sure that it controls the logo, though.

The code in index.template, to display the logo, is:

Code Select Expand

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">
            <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>
    </h1>';

I have to think that you might do best, if you post in the theme's topic, about this.

http://www.simplemachines.org/community/index.php?topic=516392.0

[okami91]

okay. thanks.

I'll just use a smaller logo until I can figure it out.

[kat]

Sorry that I couldn't be of more help, okami.

[Hj Ahmad Rasyid Hj Ismail]

You will need to fix a class for your image. Then apply css to it. A container that is already there shall be able to control you image size not to go beyond it.

Code Select Expand

img.myimageclass {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Note: This is just a rough idea. I haven't check your site or code or tested this.

[okami91]

You will need to fix a class for your image. Then apply css to it. A container that is already there shall be able to control you image size not to go beyond it.

Code Select Expand

img.myimageclass {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Note: This is just a rough idea. I haven't check your site or code or tested this.

Thank-you. I'll look at it later.