Joomla Templates Club 406,261 posts

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#947745

How would I write a class suffix for the module to extend to full width, overflowing the boundaries of the t3 content container?
Here some sample code from an existing module deployed to homepage via Modules Anywhere.
.bubblesleft {
border-radius: 12px;
background: #1f2e2e;
padding: 8px;
width: 300px;
height: 250px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
I tried changing the width to 100% but that only expanded the module to the edges of the content container. I added max-width of 1920px, but that had no effect either. Neither did adding overflow: visible. I see this done all the time on other sites, so there must be an easy way. The full-width slideshow we are using overrides the container width automatically. We want to start taking advantages of the cool graphic possibilities which come from larger screens.
Thanks for any help,
-JG

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#947844

Hi
may I know the URL of the page where u published this module ?
If the parent container does have a specific width , you can not make it full width , because the container uses the default width of the template , that is maximum .
If you want to full-width module position , you need to create a separate block in the tpls/blocks/
and add the new position in them,
then load this block into the layout files of /tpls folder . This way you can achieve this .
Here is documentation .

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#947866

I appreciate you taking the time to reply, and I thought this might be the suggested course of action, but it is a huge amount of complicated coding, with so many things that can go wrong and take down the site, that I would never undertake it. Does anyone know a less involved CSS trick to override default max container width? I agree that default max width of parent container is the constraining factor. The other reason I prefer this approach is that I rarely use the module position layout anymore because it doesn’t render so great on mobile. Custom div classes and Modules Anywhere gives far better results.
But again I do thank you for taking an interest.
-Jim G.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#947876

Hi
its about the PHP code , becuase the container div is defined in code it used the width of container .
You can give me the direct url of page where u published the module with a screenshot
so that i can check the possibility of this part via css .

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#948051

Hi, I haven’t tried to publish my module yet. I’ve been playing with code edits in Chrome and Firefox to see if it’s doable. For testing purposes I’ve been using one of the "bubble" modules here on the home page at javelincommunications.com. Being able to do this override would give tremendous layout flexibility, versus creating the custom layout position. I could insert the wide module anywhere in an article and create infinite style permutations. I see this all the time in WordPress sites.
Thanks again,
-Jim G.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#948056

It seems to me that there could be an elegant and simple answer. Create the custom position. Then use {loadposition} to put the module anywhere. So let’s name the position "widescreen." And I insert {loadposition widescreen}. But the drawback is that I can have only module assigned to this position. The command will load all "widescreen" modules. I’d like to be able to selectively make any module "widescreen" via class suffix.
-JG

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#948587

Hi Paul ,
I am afraid you can not load different module using module suffix , its feature of Joomla and how it works is load module position in articles .
Suffix are used to apply only custom style code .

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#980171

The relatively easy solution to this is a third-party parallax module which uses Jquery to override container boundaries. Several good ones are out there. We like Aikon’s version. See it here: http://javelincommunications.com/
You will probably have to install and configure the Jquery Easy plugin.
-JG

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980352

Hi
Did u solved your issue with a 3rd party extension ?

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#980387

Yes, Aikon Easy Parallax works like a dream. Nordmograph Parallax Module has more dynamic features but may not work with all templates. I continue to experiment with it. View the Aikon module in service at our company website, javelincommunications.com.
I hear that Joomlart now is offering their own parallax module.
-JG

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980400

Hi
JA Universtiy does not have any extension of Parallax , not sure which about which extension you heard you may check the present extension Here .
Best Regards

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#980403

I thought I saw that one of the new templates includes parallax. If you have an older template, you’ll need to use a third-party extension like I did.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980407

This reply has been marked as private.

[Author]

Posts