Author Topic: Responsive Ambassador  (Read 15924 times)

0 Members and 1 Guest are viewing this topic.

Offline trams

  • Newbie
  • *
  • Posts: 16
Re: Responsive Ambassador
« Reply #10 on: Jul 03, 15, 09:16:15 AM »
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]
// 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]
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]
<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?

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

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

Offline trams

  • Newbie
  • *
  • Posts: 16
Re: Responsive Ambassador
« Reply #11 on: Jul 04, 15, 06:13:12 AM »
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.

Offline trams

  • Newbie
  • *
  • Posts: 16
Re: Responsive Ambassador
« Reply #12 on: Jul 04, 15, 10:37:40 AM »
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?

Offline trams

  • Newbie
  • *
  • Posts: 16
Re: Responsive Ambassador
« Reply #13 on: Jul 04, 15, 12:01:50 PM »
Solved! I forgot to remove Beta3 before installing Beta5!

Offline maxx

  • VIP -MIA
  • Full Member
  • *****
  • Posts: 169
  • Gender: Male
    • surfacethemes
Re: Responsive Ambassador
« Reply #14 on: Jul 04, 15, 12:45:32 PM »
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

Offline trams

  • Newbie
  • *
  • Posts: 16
Re: Responsive Ambassador
« Reply #15 on: Jul 05, 15, 10:49:55 AM »
Thank you for your great support!

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

Offline maxx

  • VIP -MIA
  • Full Member
  • *****
  • Posts: 169
  • Gender: Male
    • surfacethemes
Re: Responsive Ambassador
« Reply #16 on: Jul 05, 15, 01:40:53 PM »
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

Offline maxx

  • VIP -MIA
  • Full Member
  • *****
  • Posts: 169
  • Gender: Male
    • surfacethemes
Re: Responsive Ambassador
« Reply #17 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:

Code: [Select]
a, a img {
    border: 0 none;
    outline: medium none;
}

And change to this:

Code: [Select]
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

Offline trams

  • Newbie
  • *
  • Posts: 16
Re: Responsive Ambassador
« Reply #18 on: Jul 07, 15, 04:24:52 AM »
If you'd like to shrink the size of BIG logo you do the following

in your index.css, find this:

Code: [Select]
a, a img {
    border: 0 none;
    outline: medium none;
}

And change to this:

Code: [Select]
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?

Offline maxx

  • VIP -MIA
  • Full Member
  • *****
  • Posts: 169
  • Gender: Male
    • surfacethemes
Re: Responsive Ambassador
« Reply #19 on: Jul 07, 15, 08:25:22 AM »
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