We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Container class in other templates

Featured Lock Resolved
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

12 Answers

pepperstreet

More than a month ago #Permalink
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.

pepperstreet

More than a month ago #Permalink
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.

Gonzalo Suez

More than a month ago #Permalink
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

pepperstreet

More than a month ago #Permalink
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.

interacoustics

More than a month ago #Permalink
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.:(

michcio29

More than a month ago #Permalink
How about t4 framework?

pepperstreet

More than a month ago #Permalink
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.

michcio29

More than a month ago #Permalink
Yes you right but other site also have fullwidth page
https://prnt.sc/p8kd7z
https://prnt.sc/p8kdv9

Paul Frankowski - Staff

More than a month ago #Permalink
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.

pepperstreet

More than a month ago #Permalink
... but other site also have fullwidth page

Sorry, don't understand your issue and screenshots.

pepperstreet

More than a month ago #Permalink
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!

123

Templates

327411

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us