full-width caroussel like slideshow

[parijke]

Hi all,

Is this the place for support questions as well?

If a am using a panel for almost anything in content, how do I define if the panel header for example should be full width of boxed?

[maxplus]

Hi, I used a custom Panel template for this that I found in another post (in the Radix issue cue) and edited that a little bit, is is the mars-template. See for more info here: https://www.drupal.org/node/2181975

[pirog]

@parijke yes! this is the place. We are trying github out as an alternative spot for code dev and issue handling.

i think kalatheme takes basically the same approach to radix here so i think the resolution posted by @maxplus should be quiet sufficient. If not please feel free to reopen!

[maxplus]

Hi, I'm OK with the fact that we need a custom Panel layout to get the full width slider at the top of the page, no problem with that. The only thing that would be cool is that you could get the full width effect by apply-ing a style with the style plugin. In that way you have so much more power because:

1. you could also get full width somewhere in the middle of the page
2. you can keep on using the default layouts (without creating custom ones with full width regions)

Now I'm using the Jumbotron class from bootstrap on my top region to get the full-width slider in my custom layout, and it works great. The problem is that you cannot use this in the middle of the page because you need to get outside all .containers (see Bootstrap documentation below:)

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

...

[parijke]

Got it up and running using a slightly customized version of mars.zip (wrapped the first row in a div with class container-fluid)

Ok, it isn't dynamic with the styles plugin (which can be done I guess) but it will work for now.

Thx all

[pirog]

@maxplus a style plugin would be very cool. Is there a CSS class you could write that does this even if you are inside a .container? If not where would we need to move the container elements to do this without making full-width the default appearance?

Ideally we could target container classes appropriately and then provide a simple "full width" class via the kalacustomize plugin to allow users to "full width" a panels region.

Does that make sense or am i missing something?

[maxplus]

Hi Pirog,

the bootstrap documentation says the following: http://getbootstrap.com/components/#jumbotron

The problem is that once you choose a Panopoly layout, I think the second default DIV inside a region is always a container-class. So all panes that you place in there are always wrapped inside a container. So you cannot "undo" a individual panel of its master wrapping container so you cannot go full width. Maybe there is javascript or some other trick to do this, but I'm not expierienced enough to find that out...

It would already be fantastic if you just could give a panel a full width background-image or background-color. The actual content can stay inside the default container wrapper.

[pirog]

Got it.... kind of what i suspected but was hoping maybe i'd missed something.

It might be more possible to do your later suggestion if we change the panopoly layouts so each "row" inside a layout has a container class vs the entire layout.

[labboy0276]

We did do this on another project by creating a custom layout template.

in sites/all/themes in your subtheme create a layouts folder if it isnt there.

Then in that folder create another folder for your template (I added a link to the repo of a template we used on a project as this is easier to figure out on your own). You can play around with the css to fit your needs.

https://github.com/labboy0276/product_jumbo

[pirog]

@labboy0276 thanks for the code sample

@maxplus, do you think my container class for each panels layout row could be advantageous at all? could be a good short term, easy to implement fix.

[parijke]

@labboy0276 Why not using container-fluid instead so you don't have to create custom css? Or do I miss something here?

[parijke]

@labboy0276 also, I believe that in your case the theme.info file needs to be changed as well. The documentation says that this line needs to be added to the .info file: plugins[panels][layouts] = layouts

[maxplus]

Hi parijke, I think you are correct, using .container-fluid looks the right approach to me. Bootstrap docs: "Use .container-fluid for a full width container, spanning the entire width of your viewport."

You could also use the "jumbotron full width" element, depending on your needs.

[labboy0276]

Yes,

In your subtheme.info file, this is needed plugins[panels][layouts] = layouts, which is in the docs and I didnt put it in here.

Also, .container-fluid doesnt go the full-width, neither does jumbotron full width element. They still have the padding and hence why we used the custom panel layout. When we built this site, we tried all the normal bootstrap recommendations, but they didnt fit what the client needed.

This could of changed since we built the site, but this is what worked for us. You can use whatever you feel you think is right. This was just a suggestion to help you achieve your goal.

[parijke]

@labboy0276 I think the padding is reversed when you define a row in the container, then it uses full width (as a row uses negative magins)

This is a great resource about it http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Or do you mean something else?

[labboy0276]

@parijke I dont remember, we built the site 6+ months ago. We did it that way for a reason at the time. Like I said they could of changed some things, but that is how we got it to work based on everything we tried via the docs.

[parijke]

@labboy0276 John I appreciate the codesample very much. I didn't mean to be pedantic, I just want to get it myself and for others who read this post/issue. Hope I didn't offend you?

[labboy0276]

Negative ghostrider, no offense was taken.

[pirog]

could also have a settings on the theme to switch between container and container fluid for a bunch of things

[parijke]

@pirog that would be awesome Mike, to make it switchabke

[bjdevil21]

@pirog @maxplus Did anyone decide on an official/codified way to approach this? We're facing this issue (as described on Aug 4 by maxplus) with Webspark, and we're trying to decide on the best course of action. We can make it work with a jQuery hack, but I'd like to take care of it in the theme. And I also want to avoid negative margins/padding. I was leaning towards the "force everything to 100% and shrink down to the set container width by row", but toggling the container-fluid/container class with a styling option seems interesting - and I don't want to implement something that isn't the way Kalatheme is going.

[parijke]

Official way not.... But I think this is a suitable way

Create a panels layout like de mars-template mentioned by @maxplus Make sure you create a container-fluid/row combination for the stretched area Make sure you create a container/row combination for the fixed area

Always make sure to use container and row together as they use eachother's (negative) margins

See http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

That's all folks

[thiagodemellobueno]

Is this perhaps an issue of having the .container class a default property of layouts, and not part of page.tpl ?

Then selectively centering panels in layouts becomes possible, but going full width doesnt require effortful workarounds?