Recent Topics

Members
Stats
  • Total Posts: 10,737
  • Total Topics: 1,372
  • Online today: 229
  • Online ever: 879
  • (Jan 21, 20, 05:49:15 PM)
Users Online
Users: 0
Guests: 206
Total: 206

Responsive Ambassador

Started by trams, May 23, 15, 02:48:40 PM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

trams

Quote from: maxx on Jul 02, 15, 03:34:40 PM
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



// 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:

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

<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?

QuoteNow 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.

QuoteNOTE: 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

#14
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? :D

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:

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


And change to this:

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

Quote from: maxx on Jul 05, 15, 02:38:04 PM
If you'd like to shrink the size of BIG logo you do the following

in your index.css, find this:

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


And change to this:

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?
Quote from: maxx on Jul 02, 15, 03:34:40 PM
but I'm working on the image sprite seems to not fetch it properly.
What's wrong with responsive_menu.png file?

maxx

#19
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