Mobile theme

Permalink
Hi there,
Can I use the same theme for mobiles but with some differences? (I'm using the sameone but the W3C validator doesn't like my big image and my _blank links

 
Blenderite replied on at Permalink Reply
Blenderite
Technically you can use it, but it will not be optimized for display on a mobile device.
ednella replied on at Permalink Reply
If I go to Dashboard > Themes, I can use the same one but I can't duplicate it to customize the second one. Is there any possibility to do that?
mhawke replied on at Permalink Reply
mhawke
There are a lot of misconceptions about this. You need to tell C5 what theme to use for mobile but it has to be a different theme than your regular theme. C5 doesn't perform any magic on it's own to make this new theme mobile-friendly. You must make the appropriate HTML/CSS/JS changes to make it mobile-friendly. It might be easy to use your regular theme as a basis for your mobile theme or it might be easier to start with a mobile-friendly theme and make the necessary changes to make it reflect your regular theme. You choose.

To use your regular theme as a starting point, copy it to [root]/themes/mobile_theme (you can call the destination folder anything you want). In this new folder, open 'description.txt' and change the first line so it's identical to the name on your new folder (leave out the underscores so a folder called mobile_theme would have the first line read 'Mobile Theme'). Visit 'Dashboard->Themes' and install this new theme but don't 'activate' it for your site. Now you tell C5 to use this new theme for mobile. You can now make the necessary changes to this new theme to make it mobile-friendly.

Clear as mud?
ednella replied on at Permalink Reply
Clear. I'll try, but it seems to be the definite solution ;)
Thanks a lot
ednella replied on at Permalink Reply
Hi again.
Anything is working for me...
I put the theme in other folder into /Themes, I changed the description.txt file, I went to the Dashboard>Themes and it's not there...

I went to the marketplace and the only "mobile-friendly" free theme I can find is one called "Sex 'n Chocolate" which is not very clean and simple.

I have found an addon called "Mobile Theme Switcher" but is not available for the new C5 version, and still there in my "Add Functionality" page.

Bad day...

Anyway, I've being thinking (for a moment, it's quite late here) and my main poblems for mobile optimization are _blank links and my too big (in MB terms) picture. Well... if I change the theme for mobiles those elements will still there because they're not part of the theme, but of the content of my page... So? So what I need is another version of my own site. How do I do that? Do I need /root/concrete and /root/concrete1 or something like that? do I need to different "accounts" of C5?

Please help, I'm lost
Blenderite replied on at Permalink Reply
Blenderite
What I would do in your situation is make another site for the mobile users. You could try copying your current site and it's database to a new location, such as the one you mentioned.

Then you need a way to direct the mobile user to the mobile sight. I did a quick search and found this code. This would go in the header.php:

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "www.mysite.com/mobile/";
}
//-->
</script>


You should change the
document.location = "www.mysite.com/mobile/
to what ever the url of your mobile version is. I tested this and it works flawlessly. Let me know if it works for you.
mhawke replied on at Permalink Best Answer Reply
mhawke
Although this idea does work, I think it's overkill. Maintaining a separate installation of concrete5 is a pain. Add-ons that are common to both 'sites' have to be installed and maintained twice. Backups are twice as complicated and upgrading to new versions of C5 is twice as complicated. Clients will hate it.

The easiest solution is to start with a 'responsive' theme. These themes adjust to smaller screen sizes. Search for 'responsive' on the Themes page of concrete5.org.

Failing this, copying the current theme and selecting this new theme as the mobile theme is a viable solution. We just have to get that second theme working.
mhawke replied on at Permalink Reply
mhawke
@ednella...I just noticed something in your post. It appears you might be working with themes in '[root]/concrete/themes'. All files under the concrete folder are 'core' files and will be over-written when you upgrade your site to a new version so you don't want to customize that stuff. Your regular theme and your new mobile theme need to be placed in '[root]/themes' (not inside the concrete folder).
ednella replied on at Permalink Reply
Ok. I've installed a responsive theme and apparently it's working :)

About the path, I have everything in /www/concrete/. So should I delete it and put it all in /www/? In both?
mhawke replied on at Permalink Reply
mhawke
If you installed a responsive theme automatically from the concrete5 marketplace then it will already be in the right place. Probably [root]/packages/theme_name/themes/theme_name. You will find all the theme files in there.

The reason you stay out of the concrete folder is because all those files get written over when you upgrade to a newer version of concrete5. You will notice that all the folders inside the 'concrete' folder are duplicated outside the 'concrete' folder. All the stuff outside the 'concrete' folder is not touched when you upgrade C5 so it's safe to customize files ONLY outside the 'concrete' folder.
ednella replied on at Permalink Reply
So should I put the other theme (not mobile devices) into /www/packages too?
mhawke replied on at Permalink Reply
mhawke
If you are using a truly responsive theme then you don't need a separate mobile theme. The 'responsive' part means that it will automatically collapse and work on any size screen. If you have activated a responsive theme then you can visit Dashboard->themes and UNcheck the Mobile theme option.
ednella replied on at Permalink Reply
Sorry, I didn't explain very well.
I'm using Greek Yogurt Theme (very customized) as a "normal" theme, and this new one, "responsive" one (called Rigid Light) as "mobile version".

Should I move the "normal" one to /www/packages?
mhawke replied on at Permalink Reply
mhawke
Well that's not really the best way to use a responsive theme. The point of using a responsive theme is so you only have to worry about working with a single theme; the responsive one. The same theme will work from 24" monitor to a 3" smartphone screen. I don't want to tell you to start over with only the responsive theme but I think that's what you might want to do.
mhawke replied on at Permalink Reply
mhawke
I guess if you've already customized the Greek Yogurt theme a lot you might get away with using both but I think you will save time in the long run by only using one theme. If you use two themes then any styling changes you make in one theme might have to be duplicated in the mobile theme. You also have to learn the quirks of each theme and which files do what. If it's your own site then that might be fine but if it's for a client, I wouldn't foist that on them.
waroly replied on at Permalink Reply
Hello mhawke,

I have a custom theme that my client is very happy with, but now they want the site to be more mobile friendly. It sounds as if the best solution is to start with a "responsive theme" an then customize it. Can you recommend a responsive theme that can be easily restyled to match an existing site?

Best,

waroly
mhawke replied on at Permalink Reply
mhawke
I can't make any specific recommendations because I have no idea what your client requires in a website. It's obviously easier to customize a theme whose design is already pretty close to the client's wishes.

Head over to the concrete5.org marketplace (http://www.concrete5.org/marketplace/themes/... ) and use the check boxes on the right to select 'responsive'. Most responsive themes are pretty new and it takes a fairly good knowledge of theme-building to make them responsive so most of them are being built by knowledgeable and experienced concrete5 developers. Most have demo sites so you can try them out on your iPad or adjust the size of your browser to see how they handle the smaller screen sizes.