Responsive Ambassador

[trams]

Back up everything first, place another theme default before you start, if you are able to!


First in you index.template.php you add this, in the meta find

Code Select Expand


// 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" />';


add this:

Code Select Expand

echo '
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/responsive', $context['theme_variant'], '.css?fin20" />
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

I did it, so you add

Code Select Expand

<meta name="viewport" content="width=device-width, initial-scale=1" />

by your choice, right?

In addition, do you know why in my file there is ".css?rc5" instead of ".css?fin20"? What does it mean?

Now open the responsive package and up load files where they belong:
the responsive in the CSS folder.

The image in the images folder!

Done, i copied responsive.css and responsive_menu.png to related folders.

NOTE: I found it works better if you copy the responsive css from note pad ad add it to the bottom of the index.css
you can see better on http://smf.surfacethemes.com... but I'm working on the image sprite seems to not fetch it properly

If you add the responsive css to the index the... take it out of the Css folder until I settle things out!

regards,
Maxx

At the moment i tried the first solution, i mean to copy responsive.css file...

[trams]

I'm experiencing some difficultes due TinyPortal mod. Now i removed it but the site still doesn't appear well by mobile devices. Please have a look at it and tell me what could be the reason...

Thank you.

[trams]

My Ambassador version was RC5. Now i replaced it with final 1.0 that i downloaded from here.

But my site is still not responsive if you try to read a thread. Please have a look at it...

Have you made further modification to your site to make it responsive?

[trams]

Solved! I forgot to remove Beta3 before installing Beta5!

[maxx]

Look great to me... good job!

Then the top of you pages will look better. If you have issue with the logo , you may need to make it smaller, other than this the site looks good to me.

Good luck Friend!

regards,
Maxx

[trams]

Thank you for your great support!

Do you know a way to make logo and ads banner responsive too?

[maxx]

At the moment I can not think of an easy way..

Some themes I do have Text Logo or headers!

Now days Images are over rated, and I feel large logos are not really pro like IMHO!

If you have a Text logo, it better suites the SEO also!

If find some I'll try to post it,

It's been year sense I've used the Photoshop, try not to use many images in the themes! mostly all CSS and CSS3.

You may want search the web for responsive Images or logo!

regards,
Maxx

[maxx]

If you'd like to shrink the size of BIG logo you do the following

in your index.css, find this:

Code Select Expand

a, a img {
    border: 0 none;
    outline: medium none;
}

And change to this:

Code Select Expand

a, a img {
    border: 0 none;
    margin: 0 auto;
    max-width: 320px;
    outline: medium none;
}

the 320px you tweak to 400 and see how it looks in the phone?

regards,
Maxx

[trams]

If you'd like to shrink the size of BIG logo you do the following

in your index.css, find this:

Code Select Expand

a, a img {
    border: 0 none;
    outline: medium none;
}

And change to this:

Code Select Expand

a, a img {
    border: 0 none;
    margin: 0 auto;
    max-width: 320px;
    outline: medium none;
}

the 320px you tweak to 400 and see how it looks in the phone?

regards,
Maxx

This does the trick! Thank you so much.
About handling images with CSS i will see it later, thanks for the hint.

Finally, what about this?

but I'm working on the image sprite seems to not fetch it properly.

What's wrong with responsive_menu.png file?

[maxx]

Trams, Glad you got it done.. and on the img, it's only with some sites and there set up, I'll need to dig in to their core and other stuff.  I fixed one by over writing the core theme with and new one, I did not want delete it, (just me) and the other I'll get later. On my themes they have my custom menu and CSS without the sprite img. that smf uses! But it does look good on your site! ( the Smf Sprite)

Thanks for letting me know!

regards,
Maxx