Post by Tallowman » Mon Nov 28, 2011 10:57 pm

Hi all,

I've put together a responsive stylesheet for opencart default theme. Targets ipad Portrait, iphone landscape and portrait. I haven't tested it with Android, but imagine it would be pretty similar - not familar with their sizings.

Get the stylesheet here:

http://www.visionrig.com/responsive.css

Simpliest thing to do is to include it in the bottom of your stylesheet.css.

More info is available from my accompanying blog :

http://www.visionrig.com/blog/2011/11/2 ... stylesheet

Please, let me know what you think. Very happy to hear any suggestions, ideas for improvement, and polite criticism!

cheers,
Tallowman

Newbie

Posts

Joined
Thu Oct 06, 2011 7:14 pm

Post by maurotto » Sat Dec 17, 2011 8:17 pm

hi thx for your css but i tried to use a media query and doesnt work
so I separated to create 3 css called iphoneland.css - iphoneportrait.css and tablet.css, i put this file in steelsheet folder then i modified header.tpl in catalog/view/theme/default/template/common and i added after <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<![endif]-->

text added
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 321px) and (max-width: 480px)”
href="catalog/view/theme/default/stylesheet/iphoneland.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (max-width: 320px)” href="catalog/view/theme/default/stylesheet/iphoneportrait.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 481px) and (max-width: 768px)”
href="catalog/view/theme/default/stylesheet/tablet.css">
<!--<![endif]-->

Is it right? (sorry for my english)

thx

Newbie

Posts

Joined
Mon Dec 12, 2011 2:48 am

Post by bikermunda » Tue Apr 03, 2012 12:53 am

maurotto wrote:hi thx for your css but i tried to use a media query and doesnt work
so I separated to create 3 css called iphoneland.css - iphoneportrait.css and tablet.css, i put this file in steelsheet folder then i modified header.tpl in catalog/view/theme/default/template/common and i added after <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<![endif]-->

text added
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 321px) and (max-width: 480px)”
href="catalog/view/theme/default/stylesheet/iphoneland.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (max-width: 320px)” href="catalog/view/theme/default/stylesheet/iphoneportrait.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 481px) and (max-width: 768px)”
href="catalog/view/theme/default/stylesheet/tablet.css">
<!--<![endif]-->

Is it right? (sorry for my english)

thx
Is this working correctly for you ? then it is right and i will like to implement the same as well if it is working good

New member

Posts

Joined
Sat Jan 28, 2012 8:58 am

Post by maurotto » Fri Jun 01, 2012 5:10 am

no not working for me

Newbie

Posts

Joined
Mon Dec 12, 2011 2:48 am

Post by morktron » Wed Aug 01, 2012 7:47 am

Hi Tallowman, it looks like your website has gone down, are you still around?

I'm using Opencart via Joomla / Aceshop - so I'm stuck with modifying the default theme, hence my interest in your responsive CSS.

I hope you are still around, if so please could you put your website backup? ;)

Goodbye Virtuemart! Hello Opencart! :)


New member

Posts

Joined
Tue Jun 12, 2012 1:48 pm
Location - Ballina, NSW, Australia
Who is online

Users browsing this forum: No registered users and 7 guests