Best practice for altering standard adaptive panel layouts

As it so happens I am preparing some documentation on this subject, which includes an example plugin, I can use your requirement for this example and thus kill two birds with one stone. Back shortly...

I have created a custom plugin to your requiremets (afaikt):

1. Add this to your subthemes info file, it must point to the directory where you plan to keep this plugin, relative to your subthemes root, for example:

plugins[panels][layouts] = custom_layout/panels

2. Add some defaults for it in the info file, i.e.:

  ; Two brick 66/33
  settings[bigscreen_two_brick_66_33]            = 'two-brick-66-33'
  settings[tablet_landscape_two_brick_66_33]     = 'two-brick-66-33'
  settings[tablet_portrait_two_brick_66_33]      = 'two-brick-66-33-stack'
  settings[smartphone_landscape_two_brick_66_33] = 'two-brick-66-33-stack'

3. In two_brick_66_33.inc there are two functions, the first is the one we want to change to match your theme name, i.e.:

MY_THEME_NAME_two_brick_66_33_panels_layouts()

4. Upload the attached plugin to custom_layout/panels, and the clear the cache

Now the plugin will be available in theme settings and to Panels and/or Display Suite for usage.

Can you test with this please, I did minimal testing but all seems to be working fine, if anything is going to be a problem its the selectors for the layout, which you can find in two_brick_66_33.inc, generally they should specific enough and problems only tend to come if you nest layouts, such as a mini-panel in a panel (the CSS is designed to account for this).

To answer your original question - this is the best practice - create a new plugin and keep it in your sub-theme. An alternative is to brutally override the layout CSS in the responsive stylesheets - which is doable of course if switching panels layouts is not an option for some reason.

Personally I tend to avoid nesting panels at all cost, I know its very tempting and useful but the markup gets pretty verbose pretty quickly.

Heh, forgot to add the panel layout...

You have to clear the cache, i mean really really clear the cache, not the theme registry, a full clear cache on the performance settings page - then it will show up.

If you don't see this in Panels then clearly you have done something wrong, like the path is wrong or the files are simply not there - you said you placed files, you mean the whole directory right?

Is your theme really called "foo"?

The settings should actually be the following (I made a mistake copy and pasting), however this does not actually affect the layout showing up in the theme or Panels, it merely sets a radio button to checked for an option in theme settings:

  ; Two brick 66/33
  settings[bigscreen_two_brick_66_33]            = 'two-brick-66-33'
  settings[tablet_landscape_two_brick_66_33]     = 'two-brick-66-33'
  settings[tablet_portrait_two_brick_66_33]      = 'two-brick-66-33-stack'
  settings[smartphone_landscape_two_brick_66_33] = 'two-brick-66-33-stack'

That would need a CSS override to reverse the float for that regions blocks, float them right instead of left and swap the order in the block configuration.

Sorry, would this procedure add a new layout to admin/appearance/settings/my_theme page?

i think i followed all of the steps:

1: added these lines to my_theme.info (the default theme of my site):

  ; custom layouts
  plugins[panels][layouts] = custom_layouts/panels
  ; Two brick 66/33
  settings[bigscreen_two_brick_66_33]            = 'two-brick-66-33'
  settings[tablet_landscape_two_brick_66_33]     = 'two-brick-66-33'
  settings[tablet_portrait_two_brick_66_33]      = 'two-brick-66-33-stack'
  settings[smartphone_landscape_two_brick_66_33] = 'two-brick-66-33-stack'

2: extracted the folder you attached to sites/all/theme/my_theme/custom_layouts/panels, so that the files are now in: sites/all/themes/my_theme/custom_layouts/panels/two_brick_66_33/
3: renamed at2_subtheme_two_brick_66_33_panels_layouts function to my_theme_two_brick_66_33_panels_layouts
4: cleared the cache

but can't see the new layout in my admin/appearance/settings/my_theme page.

I tried to add a dpm to the my_theme_two_brick_66_33_panels_layouts and it gets called after clearing the cache, which is good... but still i can't see the new layout.

Oh, can it be i am using 7.x-2.2 version?

thanks

Sorry, still no luck...

Oh, can it be i am using 7.x-2.2 version?

Yes, this only works with Adaptivetheme 7.x-3.x, and yes you will see the layout in theme settings and in Panels etc.

I want to make a 2 gpanel with custom size such as 40-60 or 70-30. Please show me how to do this, thank you

Hint Hint:
plugins[panels][layouts] = custom_layouts/panels

custom_layoutS

Important notice from adaptivetheme/at_core/layouts/panels/_README.txt

# CSS

Each of the layouts includes an admin CSS file, however the CSS for the front
end view of the panel comes from Adaptivetheme core and is generated when
you save the theme settings. This is the main trick in making responsive
panels work inside this theme - by omitting front end CSS from the actual
layout plugin and instead wrangling all CSS inside the theme.

Thank you for this, it helps a lot.

I would like to contribute two more AT panels layouts to the community -- 75-25% width columns and a 25-75% width columns.

You just need to add these lines to your info file:

; Custom Layout
  plugins[panels][layouts] = panels/layouts
  settings[bigscreen_two_75_25]            = 'two-75-25'
  settings[tablet_landscape_two_75_25]     = 'two-75-25'
  settings[tablet_portrait_two_75_25]      = 'two-75-25-stack'
  settings[smalltouch_landscape_two_75_25] = 'two-75-25-stack'
  
  settings[bigscreen_two_25_75]            = 'two-25-75'
  settings[tablet_landscape_two_25_75]     = 'two-25-75'
  settings[tablet_portrait_two_25_75]      = 'two-25-75-stack'
  settings[smalltouch_landscape_two_25_75] = 'two-25-75-stack'

However, I would like to ask Jeff what the best practice is for adding the front end CSS for these panels layouts?

Not sure this will do much tchopshop. I have tried to get 75/25 working as a custom layout but i get errors. I tried to use the files that Jeff created and replaced file content and names with 75 and 25 where 66 and 33. My layout shows up but it needs info from core. Obviously it isnt wise to hack the core theme because of updates etc but I tried to get it to work out of interest by adding the relevant files and info to the panels, gpanels folders and info file but i think it goes deeper into get.inc so I have given up. I'm going to try and achieve what I want using gpanels only in my sub-theme but I would be interested to see if anyone knows a way to do this.

I'm sorry, I kept meaning to return to this issue and make some notes. You don't have to hack the core theme. You have to go into these two .inc files (two_25_75.inc and two_75_25.inc} and change the function to your theme name. (I inadvertently left my theme name in one of the files).

So Line 7 Instead of being

function monopoly_two_25_75_panels_layouts() {

...would be:

function YOURTHEMENAME_two_25_75_panels_layouts() {

You have to put this in your .info file of course, but you have to make sure that the path to the two directories is correct (in mine it's "panels/layouts" in my theme folder, so you'd have to change the first line to wherever in your theme that you put the two extra layouts.

plugins[panels][layouts] = panels/layouts
settings[bigscreen_two_75_25] = 'two-75-25'
settings[tablet_landscape_two_75_25] = 'two-75-25'
settings[tablet_portrait_two_75_25] = 'two-75-25-stack'
settings[smalltouch_landscape_two_75_25] = 'two-75-25-stack'

settings[bigscreen_two_25_75] = 'two-25-75'
settings[tablet_landscape_two_25_75] = 'two-25-75'
settings[tablet_portrait_two_25_75] = 'two-25-75-stack'
settings[smalltouch_landscape_two_25_75] = 'two-25-75-stack'

I just have to add that this is just for the administrative back-end, but you still have to add extra CSS for the two panels to work to your theme CSS.

I'm still wondering if Jeff could tell us the best practice for adding the front-end CSS for the various responsive breakpoints.

It would be nice if one could change the column percentages for panels much like you can for the base theme.

Hey, thank you, post #7 brought me a step forward. I had the same problem, trying to float the right block of a "AT Two column 66/33" layout to the top instead of stacking it underneath the left block on smalltouch devices. I followed the steps and tested it in the core template first. Worked!

My problem now is, that when I change the layout of my already finalized pages (66/33 with wrong stacking) to my custom template, all the placed content seems to lose its position, gets kicked out. Is there a way to simply duplicate the 66/33 layout to my theme so that I can easily switch the layout without having to place the content again?

Thanks in advance for your help.