TheCripZone SMF Themes Site

All Things Public => Theme Support => Topic started by: trams on May 23, 15, 02:48:40 PM

Title: Responsive Ambassador
Post by: trams on May 23, 15, 02:48:40 PM
Hello, i'm using Ambassador theme since its creation by Crip.
Now i need to use a responsive theme for my forum but i would keep this theme.
Since Ambassador is based on Curve Theme, is there any fix to apply to make it responsive?

I hope you can help me.

Thank you.
Title: Re: Responsive Ambassador
Post by: maxx on Jun 03, 15, 07:01:25 AM
Very sorry for the late reply, very busy and over looked :(

Please Check this link for the new SMF responsive mod, if you have issues with the mod you ask over there in the support section for this mod , if that does not work, please le me know I see what can be done. ( most say the beta 3 is the best mod!
http://www.simplemachines.org/community/index.php?topic=535720.0
Note we do not have all Crip's themes installed here so we may need to visit you site!

Hope this helps@!

regards,
Maxx
Title: Re: Responsive Ambassador
Post by: trams on Jul 02, 15, 06:24:25 AM
Sorry for late reply and thank you for keeping up this support site :)

Why do you suggest Beta 3? I see the latest version is Beta 5.
Anyway my site uses Ambassador theme, you can have a look at it here: m*neywantersf*rum DOT com (* = o).

Thank you!
Title: Re: Responsive Ambassador
Post by: maxx on Jul 02, 15, 11:13:13 AM
That was a while back Now, beta 4 had some issue as I can recall, and yes it's beta five.

Please not that if it does install to you current theme , you can un zip the beta 5 package open the css in note pad and copy and paste all test to the bottom of that themes index.css and save... now if you have problems them please let me know! or zip the index.css and upload here and I'll make the change for you! :)

Kind regards,
Maxx
Title: Re: Responsive Ambassador
Post by: trams on Jul 02, 15, 11:50:28 AM
I did try to apply Beta3 and it found a problem with index.template.php file of Ambassador theme. It looks for the following row:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

that it wants to replace to:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/responsive', $context['theme_variant'], '.css?fin20" />';


It found error because my index.template.php has this row instead:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?rc5" />

So i manually fix it replacing with this:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?rc5" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/responsive', $context['theme_variant'], '.css?fin20" />';


Shoud it be right?
I also tried to use ".css?rc5" for both rows, but seems to be the same.
Maybe my modification is wrong, in fact nothing is changed with my forum: i tried to open it by phone and it looks like before.
Title: Re: Responsive Ambassador
Post by: trams on Jul 02, 15, 02:38:36 PM
Are you using Ambassador theme right now? :o
Can you please tell me how to do it? Is this Beta5?
Title: Re: Responsive Ambassador
Post by: 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" />';




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

The image in the images folder!

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



Title: Re: Responsive Ambassador
Post by: trams on Jul 03, 15, 08:13:59 AM
First i want to remove my previous installation of Beta 5... but there is not button to uninstall it in my package list. My SMF version is 2.0.10, i tried to see in the package-info.xml file and all is ok:

<uninstall for="2.0 - 2.0.99">
<modification type="file" reverse="true">install.xml</modification>
<remove-file name="$boarddir/Themes/default/css/responsive.css" />
<remove-file name="$boarddir/Themes/default/images/responsive_menu.png" />
</uninstall>


How to remove it?
After that i will able to try your solution...
Title: Re: Responsive Ambassador
Post by: maxx on Jul 03, 15, 08:24:22 AM
I'm not sure what you did there, but I would not worry, because, this will still work...Now keep in mind the menu images, I'm still trying solve they do not get fetched from the CSS, how ever they are not really need by the mobile user, because the navigation tree is visible for them and they can select the Category they desire!

regards,
Maxx
Title: Re: Responsive Ambassador
Post by: maxx on Jul 03, 15, 08:26:13 AM
Oh BTW I get the my test site on the windows phone and looks great! :

regards,
Maxx
Title: Re: Responsive Ambassador
Post by: trams on Jul 03, 15, 09:16:15 AM
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...
Title: Re: Responsive Ambassador
Post by: trams 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.
Title: Re: Responsive Ambassador
Post by: trams 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 (http://custom.simplemachines.org/themes/index.php?lemma=2365).

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?
Title: Re: Responsive Ambassador
Post by: trams on Jul 04, 15, 12:01:50 PM
Solved! I forgot to remove Beta3 before installing Beta5!
Title: Re: Responsive Ambassador
Post by: maxx 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
Title: Re: Responsive Ambassador
Post by: trams 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
Title: Re: Responsive Ambassador
Post by: maxx 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
Title: Re: Responsive Ambassador
Post by: 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
Title: Re: Responsive Ambassador
Post by: trams on Jul 07, 15, 04:24:52 AM
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?
Title: Re: Responsive Ambassador
Post by: maxx 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
Title: Re: Responsive Ambassador
Post by: trams on Jul 08, 15, 07:35:40 AM
Thank you for your great support!
Title: Re: Responsive Ambassador
Post by: maxx on Jul 08, 15, 08:16:55 AM
Trans,

You are Welcome friend!, and if you need a mobile friendly portal, I'm on the support team at ezportal.com.
And it will close the side panels  on mobile detect...

regards,
Maxx
Title: Re: Responsive Ambassador
Post by: trams on Jul 10, 15, 02:55:43 PM
It seems to be great? What's is it? An SMF mod like TinyPortal?
Title: Re: Responsive Ambassador
Post by: maxx on Jul 10, 15, 03:05:38 PM
Yes Sir... and we have many free add ons also! :) blog , contact page , simple audio video and much more!
Title: Re: Responsive Ambassador
Post by: maxx on Jul 10, 15, 03:08:26 PM
On my theme test site you see some of the stuff in action:
http://smf.surfacethemes.com

My classic rock site is
http://www.buildandtell.com

maxx
corrected link
Title: Re: Responsive Ambassador
Post by: maxx on Jul 14, 15, 06:27:56 PM
For all concerned! SMF responsive Mod!

If you have issues with the core theme,  having many errors before installing the New SMF responsive Mod, do the following,
get a copy of the core theme fro m the SMF 2.0 + package and upload over righting the current copy, then try to re install the responsive mod again!

It will install with the errors but you will not get the Icon sprite installed to your system!

regards,
Maxx
Title: Re: Responsive Ambassador
Post by: trams on Jul 26, 15, 01:04:05 PM
Quote from: maxx on Jul 08, 15, 08:16:55 AM
Trans,

You are Welcome friend!, and if you need a mobile friendly portal, I'm on the support team at ezportal.com.
And it will close the side panels  on mobile detect...

regards,
Maxx

Now i'm busy and i cannot deepen it. Anyway i will use it and i will contact you.
Thank you!
Title: Re: Responsive Ambassador
Post by: trams on Aug 22, 15, 08:27:11 AM
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 hint works, but it is applied even when user visit the site from large screen.
Do you know how to apply it only when user is from device with small screen?
I want that the logos and banners are shrinked only on small screens...
Title: Re: Responsive Ambassador
Post by: maxx on Aug 22, 15, 10:04:56 AM
You could try an add the >   min-width: 120px;   or so see if that works. I need to check into the more on you theme!

Been real sick lately! {

regards,
Maxx
Title: Re: Responsive Ambassador
Post by: trams on Aug 22, 15, 11:48:13 AM
I think it will not affect at all, because now if i see the site from desktop computer all the images are 320px and i would like to see them larger.

Very sorry to see you sick, hope you heal.
Title: Re: Responsive Ambassador
Post by: maxx on Aug 24, 15, 09:30:25 AM
Trans will need some time..but 2 things that will need to change one is in php file and the other in the CSS and it will need to change the way the logo image, is called by the Index.Template.php need to add a separate Class Custom edit.

So it alone can be adjust via the index.css!

regards,
Maxx

Title: Re: Responsive Ambassador
Post by: trams on May 31, 19, 04:11:44 PM
Hello again! :D

I'm still using this theme for my forum and now Google Search Console is warning me about selectable elements too close to each other, visible area not set and text too small to read.

Since last time I wrote here have you made any improvements for Ambassador theme?

Thank you in advance for your reply!
Title: Re: Responsive Ambassador
Post by: Skhilled on Jun 02, 19, 11:11:55 AM
Hi, sorry I've missed this. Exactly what selectable elements? Not sure what you mean by "visible area not set". Not sure exactly what text your are referring to but the main font for the body should by around line 38 which can be adjusted there.
Title: Re: Responsive Ambassador
Post by: lesmond on Jun 02, 19, 11:39:19 AM
Font size can be increased across the theme, find this line in index.css

font: 73%/130% "Verdana", "Arial", "Helvetica", sans-serif;

change the font: 73% to suit what you need or looks best for you :)
Title: Re: Responsive Ambassador
Post by: trams on Jun 03, 19, 08:54:17 AM
Thank you for your replies.
Do you have any download link for my theme? I can't find it...
Title: Re: Responsive Ambassador
Post by: Skhilled on Jun 03, 19, 12:37:33 PM
Here you go. :)

https://www.jpr62.com/theme/index.php?action=downloads;sa=view;down=7
Title: Re: Responsive Ambassador
Post by: Skhilled on Jun 06, 19, 11:28:44 AM
I understand. I got an email saying the same thing for my website. I'll look at it so I can see what it means.
Title: Re: Responsive Ambassador
Post by: trams on Jun 15, 19, 07:30:23 AM
Quote from: Skhilled on Jun 06, 19, 11:28:44 AM
I understand. I got an email saying the same thing for my website. I'll look at it so I can see what it means.
OK, thank you for letting me know it.
Title: Re: Responsive Ambassador
Post by: Skhilled on Jun 15, 19, 08:42:42 AM
Quote from: lesmond on Jun 02, 19, 11:39:19 AM
Font size can be increased across the theme, find this line in index.css

font: 73%/130% "Verdana", "Arial", "Helvetica", sans-serif;

change the font: 73% to suit what you need or looks best for you :)
Have you tried this?
Title: Re: Responsive Ambassador
Post by: trams on Jun 19, 19, 03:15:20 PM
No, I didn't, because I tried another theme and when I switched back to Ambassador I had a problem and I could not install it back! :'(
Title: Re: Responsive Ambassador
Post by: Ken. on Jun 19, 19, 07:43:14 PM
@Skhilled:
Just installed this theme in case you need to tweak it on a live site.
https://www.ourfamilyforum.org/FamilyForum/index.php?action=forum;theme=82