1
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.ukIf 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-width: 980px) {
}
@media screen and (max-width: 650px) {
}
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}
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.
