I am using at-commerce http://drupal.org/project/at-commerce subtheme of AT.
Trying to theme sidebars depending on the theme setting "Choose sidebar positions" .../admin/appearance/settings/at_commerce left and right, stacked on the left, stacked on the right.

What is the best way to add image blur separators to sidebars and align it with CSS? The problem is to add images and put them correctly on the right or left position in the sidebars.
I am using body CSS classes suggestions "one-sidebar" and "two-sidebars" but there is no class to detect either sidebars left and right, stacked on the left or stacked on the right.
Guessing it mat be one of the page classes
page ssc-n ssw-n ssa-l sss-n btc-n btw-b bta-l bts-n ntc-n ntw-n nta-l nts-w ctc-n ctw-n cta-l cts-n ptc-n ptw-b pta-l pts-n
but cannot find documentation

Currently i am using this code:

.one-sidebar.sidebar-first .content-inner  {
background: url(images/blur-separator_sidebar_left.png) -5px top no-repeat;
padding-left: 25px;
}

.one-sidebar.sidebar-second #content-column .content-inner {
background: url(images/blur-separator_sidebar_left.png) right top no-repeat;
padding: 0 10px 0 0 ;
}

.two-sidebars .content-inner  {
background: url(images/blur-separator_sidebar_left.png) right top no-repeat;
padding-right: 10px;
}

.two-sidebars #content-column .content-inner  {
padding-left: 10px;
}

.two-sidebars .region-sidebar-first .region-inner  {
background: url(images/blur-separator_sidebar_left.png) right top no-repeat;

}

but it is not completely suite

Comments

Jeff Burnz’s picture

In effect what you are saying is that we should have a class for the layout, i.e. if you have 2 sidebars stacked right then we have a class "two-sidebars-right" sort of thing?

Is that going to help your cause?

BTW these...

ssc-n ssw-n ssa-l sss-n btc-n btw-b bta-l bts-n ntc-n ntw-n nta-l nts-w ctc-n ctw-n cta-l cts-n ptc-n ptw-b pta-l pts-n

are all to do with title styles, e.g.

ssc-n = site slogan case normal
ssw-n = site slogan weight normal
ssa-l = site slogan alignment left
sss-n = site slogan shadow none
Jeff Burnz’s picture

Actually I am not quite sure that will help your cause that much, since different breakpoints have different layouts, hmmm, unless they were injected with JS.

So, how to do this, well its pretty easy really:

1) enable the Responsive JavaScript polyfil

2) In at commerce scripts directory find the media_queries.js file and open it up, then...

- delete all the console.log calls, or comment them out
- for each breakpoint add some code that will inject a class to the #page wrapper, eg

  // Standard desktop
  {
    context: 'standard',
    callback: function() {
      // Debug
      // console.log('standard desktop');
      document.getElementById("page").className += " two-sidebars-right";
    }
  },

If you do this for each breakpoint then you can theme away, sort of, we need to remove the classes as well, more on that later, I want to think about using drupal_add_js settings so we can grab the classes automatically.

Jeff Burnz’s picture

Yes this can be done with drupal_add_js settings, then using media queries js system to inject the class responsively, meaning the class on the #page element will change in response to the width of the page, i.e. for each breakpoint the right class for the actual layout will be injected into the page.

Still need to think of a cleanish way to add and remove the classes, the above code is not that great because it only adds classes, they are not removed if the user switches orientation etc.

joomlerrostov’s picture

In effect what you are saying is that we should have a class for the layout, i.e. if you have 2 sidebars stacked right then we have a class "two-sidebars-right" sort of thing

You are absolutely right. I need two additional classes "two-sidebars-left" and "two-sidebars-right" then combining them with "one-sidebar" and "two-sidebars" from the body tag i will be able to handle all variations: one sidebar on the left, two sidebars stacked on the left ... etc. for exmple:
.two-sidebars .two-sidebars-left .sidebar-second .content-inner {code}

I see you suggested a more complete way, supporting responsive layouts settings, before i wouldn't guess that will be so complicated)). But sorry i still don't know how to handle sidebars inside Standart desktop layout. I have done all from comment #2 http://drupal.org/node/1871680#comment-6866610 and see two-sidebars-right class is added to the #page. But it still there when i am switching to different sidebars position (alll these for Standard Layout). (currently i am not willing to handle tablet and smartphone layouts)

I assume maybe a new function should be added to template.php similar to 67-72 strings:

<?php
 
if ($show_taxopage_grid == TRUE) {
   
$cols_tpg = at_get_setting('content_display_grids_taxonomy_pages_colcount');
   
$vars['classes_array'][] = $cols_tpg;
   
drupal_add_js($path_to_theme . '/scripts/eq.tp.grid.js');
  }
?>

but i have not enouth experience on how to write it. Or css function, that adds some classes to ids depending on the theme setting.

joomlerrostov’s picture

Trying to slove myself:
i have added this code to the function at_commerce_preprocess_html(&$vars)

<?php
 
if (at_get_setting('bigscreen_layout_two_sidebars_right') == 1){
      
drupal_add_css($path_to_theme . '/css/two.sidebars.right.css', array(
     
'preprocess' => TRUE,
     
'group' => CSS_THEME,
     
'media' => 'screen',
     
'every_page' => TRUE,
      )
    );
 }
?>

then created file two.sidebars.right.css in the theme's css folder. added some css, but this file was not included, checked in page source. Here is the trick: i don't know the name of AT setting, and guessing it bigscreen_layout_two_sidebars_right for sidebars right, i have tried layout_two_sidebars_right and two_sidebars_right - no luck.
What i am doing wrong ? (all caches cleared)

Jeff Burnz’s picture

The setting is wrong, here is the list of settings:

at_get_setting('bigscreen_layout')
at_get_setting('tablet_landscape_layout')
at_get_setting('tablet_portrait_layout')
at_get_setting('smalltouch_landscape_layout')
at_get_setting('smalltouch_portrait_layout')

These all return a string - the actual name of the layout, i.e. three_col_grail, one_col_vert, and so on.

I understand what you are tyring to do, I think you want something like this - this is the entire required code, if your theme is already declaring the global theme key stuff and path_to_theme then you can remove it, I add it here for completedness in case someone else wants to use this in a raw at subtheme:

What this does is load (if it exists) a stylesheet for the actual layout being used AND wraps it in media query so it only is used by the browser when that layout would actually be invoked.

Note the dsm() calls that are commented out, if you uncomment those Devel module will print to screen all the names of the files you need.

This takes advantage of AT Cores at_load_subtheme_responsive_styles() function which does the actual heavy lifting of loading the files via drupal_add_css().

You should run this in preprocess html, not preprocess page, however it actually doesn't matter that much.

<?php
 
global $theme_key;
 
$theme_name = $theme_key;
 
$path_to_theme = drupal_get_path('theme', $theme_name);

 
// Add layout settings as JS settings
 
$settings_array = array(
   
'bigscreen',
   
'tablet_landscape',
   
'tablet_portrait',
   
'smalltouch_landscape',
   
'smalltouch_portrait',
   
'smartphone_landscape', // smartphone is deprecated for smalltouch in dev
   
'smartphone_portrait',
  );
  foreach (
$settings_array as $setting) {
   
$layout = at_get_setting($setting . '_layout', $theme_name);
   
$media_query = at_get_setting($setting . '_media_query', $theme_name);
    if (
$layout && $media_query) {
     
$file = $path_to_theme . '/css/' . $setting . '-' . str_replace('_', '-', $layout) . '.css';
     
// uncomment dsm calls to see the output in Krumo, requires Devel module
      // dsm($file);
     
if (file_exists($file)) {
       
at_load_subtheme_responsive_styles($file, $media_query, $theme_name, $weight = 0);
      }
    }
  }
?>

This will attempt to load something like these files, but only if they exist, and it will load them wrapped in the correct media query. As you know it will depend on which layout you actually set.

Not that my subtheme is called "at4_subtheme", and this is just an example:

   
    sites/all/themes/at4_subtheme/css/bigscreen-three-col-grail.css
    sites/all/themes/at4_subtheme/css/tablet_landscape-three-col-grail.css
    sites/all/themes/at4_subtheme/css/tablet_portrait-one-col-vert.css

So, if you create the correct files in your themes CSS folder they will get loaded.

Jeff Burnz’s picture

I will also follow up and say that I perfected the idea of adding the layout class name to the page, I have this code ready to go but I want to write a proper help page about it because it requires a number of steps to achieve, and I am going to include it as a feature in the next release of AT Core.

Because its Christmas and I have family commitments I will have to say this will be after the 26 some time.

joomlerrostov’s picture

It works! Big thanks for your help. I just updated to the adaptivetheme lates dev and all is ok, files are loaded depending on setting!
Merry Christmas!
I'll keep monitor updates. Assume you can add a donation button (Paypal maybe) to your site, then I or anyone will be able to send you some appreciation.

Jeff Burnz’s picture

I can't use a donate button because I am not a non-profit, lots of people have asked in the past and generally I suggest they just join the theme club if they want to make a donation. Hey, you even get access to some new themes!

mrtoner’s picture

I can't use a donate button because I am not a non-profit, lots of people have asked in the past and generally I suggest they just join the theme club if they want to make a donation. Hey, you even get access to some new themes!

Just wanted to note that if you use Buy Now you can either provide a form field where the user supplies the amount or -- better yet -- make the amount 0.00 and PayPal will ask the user for the amount.