What is the best way to make a sub-theme responsive? Currently the panels change from '/css/mytheme.css' to '/css/versatile_w640.css' and '/css/versatile_w480.css' when I shrink the browser.

In the versatile template.php there is Preprocess function for site template layout and it includes

$responsive = theme_get_setting('versatile_responsive');
if ($responsive) {
  $module_path = drupal_get_path('theme', 'versatile');
  drupal_add_css($module_path . '/css/versatile_w640.css', array('media' => 'screen and (max-width:640px) and (min-width:481px)'));
  drupal_add_css($module_path . '/css/versatile_w480.css', array('media' => 'screen and (max-width:480px)'));
}

I am still using the versatile_site_template for mytheme.

Ideally it would be nice to use '/css/mytheme_w640.css' and '/css/mytheme_w480.css' but configuring this so far has not been successful for me...

Any ideas would be appreciated, thanks.

Comments

peter törnstrand’s picture

peter törnstrand commented
Status: Active » Fixed

You should probably disable the responsive features of Versatile and just add your own... when I look back on this feature I don't think it's a good idea to have this as part of the theme. Responsiveness is much to depending on the design of the page to make assumptions as those made in Versatile.

dig1’s picture

dig1 commented

Yes I agree. I reckon its always best to keep it simple. So in template.php I added

/**
* Preprocess function for site template layout.
*/
function mytheme_preprocess_mytheme_site_template(&$vars) {
  versatile_preprocess_versatile_site_template($vars);

$module_path = drupal_get_path('theme', 'mytheme');
drupal_add_css($module_path . '/css/mytheme_w640.css', array('media' => 'screen and (max-width:640px) and (min-width:481px)'));
drupal_add_css($module_path . '/css/mytheme_w480.css', array('media' => 'screen and (max-width:480px)'));
}

and that seems to do the job.

Thanks

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.