1. SP Page Builder 1.x (not supported version)
  2. Thursday, 16 July 2015
Hi, I test SP Page Builder in others template, like warp and T3. Work fine, but when I need fullwidth, no work... the bootstrap container class, is before sp-page-builder class, therefore, fullwidth have a container class width...
as you can fix that?

Regards
Accepted Answer
Hello Gonzalo,
Regarding Joomlart T3 v3 framework, you have different options and solutions for this task. Somewhat strange that T3 does not provide respective layouts/blocks, or at least parameters to turn layout areas into fluid mode. It seems to build upon the .container class, which is "hard-coded" into each block. AFAIK, Bootstrap 3 re-invented the .container-fluid class for easy fluid layouts without padding etc. This is not considered in T3 at all, which is strange in regards of all the other versatile options and vast amount of features. Anyways... you have the following options:

A.) Create a new layout and blocks without the .container class, or make use of .container-fluid.

B.) Make the whole template style and content 100%. Use ThemeMagic to change grid max-width for all screen sizes. Save it as a new Theme setting. Choose the setting in "Theme tab". Save template style and apply to your MenuItems.

C.) CSS override: You can easily determine the PageBuilder page context! Either by adding a special PAGE CLASS SUFFIX in your MenuItem parameters.
Or in regards of T3: There is a TemplateHook, which adds many infos as .classnames in your HTML section! Investigate the source, and you will find .com_sppagebuilder. You can use this class name + any T3 section classname to override any css property you want... so, mixing contained and fullwidth areas is a snap.

So, my suggestion is method C.)

Example CSS to make ALL main body container fluid:

.com_sppagebuilder #t3-mainbody {
width: 100%;
padding-left: 0px;
padding-right: 0px;
}


If you want to change the behavior for different pages/MenuItems you could use the PAGE CLASS SUFFIX instead,
or add the MenuItem ID to the CSS rule. You will find it as a classname in the HTML section as well!

Hope this helps.
Responses (11)
Regarding WARP 7, which template are you referring to? The themes structure seem to differ from template to template. For instance, the free MASTER2 has a container wrapper for all sections. Other themes have separate stacked sections, which have containers inside.

I guess, you have to think about a specific solution... either create a new style or override the default layout.

The default MASTER2 layout is not optimal, but you could change it through the "Customizer" or add a custom class to the outer wrapper DIV, and change this wrapper to 100%. So, other inner containers are not affected.
Hey pepperstreet, thanks for you complete answer! work fine, with sames tweaks ;)
Alternatively, it is possible to solve it with Components Anywhere plugin. I can call SP-PB from a fullwidth module.

Regards
Gonzalo wrote:
Alternatively, it is possible to solve it with Components Anywhere plugin. I can call SP-PB from a fullwidth module.


Thanks for the headsup. Nice idea and workaround.
Seems there uis some glitch, it is pushing the site so that it is a bit bigger than the browser window we this css override. You can now slide the browser to the left/right.:(
How about t4 framework?
How about t4 framework?

As far as I know, T4 layout editor has options per position/section. It is possible to have fullwidth areas, and also container areas.
Yes you right but other site also have fullwidth page
https://prnt.sc/p8kd7z
https://prnt.sc/p8kdv9
In SP Page Builder 3.x Options there is an option (switcher) to disable default container.

Guys, this topic was about SPPB 1.x (!) It's time to close it.
... but other site also have fullwidth page

Sorry, don't understand your issue and screenshots.
In SP Page Builder 3.x Options there is an option (switcher) to disable default container.
Guys, this topic was about SPPB 1.x (!) It's time to close it.


As far as I know, this makes no difference. The pagebuilder runs INSIDE the component area. If you don't use HELIX and you have another template framework, it depends on that surrounding markup. Some templates have flexible options, some do not.


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.