Adaptivetheme 7.x-2.x includes a new layout engine that drives both responsive and adaptive layouts using media queries. We've made it super easy to configure layouts for standard desktops and laptops, and tablet and smartphone size screens. This video features Pixture Reloaded, an Adaptivetheme subtheme available for free download on Drupal.org and shows off the layout settings and a brief run down on how it all works.
You can view our documentation page for more help with setting up layouts in Adaptivetheme 7.x-2.x.
Comments
Just tried out the new
Just tried out the new Corolla theme today, gotta say its very nice and works flawlessly, the new layout options are just what it needed. One question, if I want to build my own subtheme how does it work with the style changes needed for tablet and smartphone - I mean where do I put those styles?
The sub-theme includes two
The sub-theme includes two files for placing styles:
repsonsive-style.css
responsive-gpanels.css
The gpanels file includes default layout CSS for each screen size (so the gpanels automatically change their layout) and the responsive-style.css file contains empty media query blocks where you can place your styles. Note that if you change the media query in the theme settings you should update the media query in both these files so they match perfectly.
Just for reference the responsive-style.css file contains these media queries which are the defaults the sub-theme ships with:
/*** Use this file to conditionally override styles for devices.
* If you adjust the media queries in the theme settings you should
* adjust them here so they match.
*/
/* Smartphone portrait */
@media only screen and (max-width:320px) {
}
/* Smartphone landscape */
@media only screen and (min-width:321px) and (max-width:480px) {
}
/* Tablet portrait */
@media only screen and (min-width:481px) and (max-width:768px) {
}
/* Tablet landscape */
@media only screen and (min-width:769px) and (max-width:1024px) {
}
/* Standard layout */
@media only screen and (min-width:1025px) {
}
Responsive
It all looks great, but can we see a tutorial on how to set up skins
I like this approach in favor
I like this approach in favor of having a "mobile version" of my Drupal site. Two comments:
-How to keep the CSS for mobile users neat and small? Almost all CSS is loaded to any client.
-How to prevent redundancy in CSS? e.g. not having to change styles in more than one size-specific CSS file.
Thanks!
Kees
-----
kinder beddengoed
I will try to do this and i
I will try to do this and i hope i will do as well...
Add new comment