1
playsome
Responsive xoops theme using CSS3 media queries
  • 2012/2/21 2:14

  • playsome

  • Not too shy to talk

  • Posts: 197

  • Since: 2009/4/15


Hi Xoopsers,

I have been working on a new theme for my site the last few hours and I thought i would share it with you all since I cant find any posts regarding responsive xoops themes.

The theme is by no means finished but you can view it here playsome.co.uk

If you reduce the browser window you can see the responsive theme in action, especially if you reduce it down to about 480 px wide.

Heres a quick tutorial on how to get started with responsive design.

First thing we need is this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Basically it tells the browser to use the default device width and to not scale the page to the browser window (e.g iphone will fit the entire page into a window wihc is very difficult to read and requires zooming in, this stops this)

Secondly we need a css file with the media queries, for example you could call it queries.css and include it in your theme.html. The content of the queries.css looks like this:

@media screen and (max-width980px) {

    
}

@
media screen and (max-width650px) {

    
    
    
}

@
media screen and (max-width480px) {

    
html {
        -
webkit-text-size-adjustnone;
    }
    
}


Then inside the different max-width sizes you need to write rules for the elements you want to change, you dont need to write an entire set of rules as elements will still inherit from the main css file, for example you would need to change rules for say you had a left column floated left and a right column floated right in the main css file, in the queries file you would right a rule to say float:none; so when the browser window is small it will be a one column layout.

Anyway, take a look at the theme on the site playsome.co.uk and let me know what you think.

2
Mamba
Re: Responsive xoops theme using CSS3 media queries
  • 2012/2/22 8:27

  • Mamba

  • Moderator

  • Posts: 11251

  • Since: 2004/4/23


Very nice!

Please post the theme when you're done with it.
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

Login

Who's Online

67 user(s) are online (31 user(s) are browsing Support Forums)


Members: 0


Guests: 67


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Jul 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits