In Responsive v 2.2.3, we were able to use the "right" module position to stack modules in a position that spanned multiple grid rows. (See the first picture attached.)

Is there a way to do this in Responsive2?

Responsive2 doesn't appear to have any positions similar to v 2.2.3's "right" position that lets modules span multiple grid rows. (See the second picture attached.)

Jim Nanczek

Hi

Are you able to add a second module to grid1 and then order the modules in module manager so the first grid1 module is above the other?

Cheers
Paul

In addition to the 2nd module, Paul, we have a 3rd and 4th. We want modules 2, 3, and 4 positioned next to each other horizontally (as shown in the advert4, advert5, and advert6 positions above).

If we assign all these modules to position grid1, they'll appear next to each other vertically, not horizontally.

JRN

Modules added to the same position will sit below any other modules in the position.

You would need some custom css to make the modules sit next to each other.

I would use a module suffix to do this.

In your custom.css file write:

.third-horizontal {width:32%;float:left;margin-right:1%}

then applying the class third_horizontal would make them sit next to eachother.
You may need to tweak the css some more but that will get you headed in the right direction.
Thanks

Thanks for the CSS detail, Anthony.

One challenge I have with your approach:

In Template Manager > Layout > Widths, we've set grid1 to a width of 9 units (of the available 12 width units). (See the attached screen shot.)

This is because we're placing our front page's "feature article" module in this position.

The "subfeature" modules we want to appear below the "feature article" module would each have a width of 3 units. So if we assign these modules to grid1, they'll be too wide.

Am I missing something?

JRN

I'd use a custom html module and use loadposition combined with shortcodes to display the two modules along side each other

{zen-row}
{zen-3}
{/zen3}
{zen-9}
{zen-9}
{/zen-row}

docs.joomlabamboo.com/zen-grid-framework-4/theme/Using-shortcodes.html

Is that an option?

Cheers
Paul

Paul,

Thanks for the suggestion.

It's not apparent to me, after reading the documentation, how to implement shortcodes.

Where does one place the code? E.g., inside a module's content, or in custom CSS?

JRN

Hi JRN,

You install and enable the shortcodes plugin from the template download page

You may need to go to plugin manager to enable it

Create the modules you are going to load in the single custom html module

The modules will be loaded using loadposition so its the same method as for this

www.joomlabamboo.com/blog/tutorials/using-the-loadposition-plugin-to-load-joomla-content

Create a custom html module and add it to the template position as required

Make sure prepare content option is enabled (in the options tab)

{zen-row}
{zen-3}
{/zen3}
{zen-9}
{zen-9}
{/zen-row}

docs.joomlabamboo.com/zen-grid-framework-4/theme/Using-shortcodes.html

Is the syntax you add to the custom html module - the numbers being the position widths and need to add up to 12

It will divide the space up for the other modules you previously created

You may want to add the syntax using the html option in the editor you are using

Inside the width tags add the loadposition syntax together with the unique positions

Cheers
Paul

{zen-row}
{zen-3}
{loadposition myPosition1}
{/zen3}
{zen-9}
{loadposition myPosition2}
{zen-9}
{/zen-row}

For example

Paul,

Please check whether I'm understanding this.

Say I want three modules (mod1, mod2, mod3) to appear side-by-side horizontally--each spanning 3 units of width.

According to the method you suggest, I would do the following.

1. Create a single custom module.

2. Using the HTML editor inside the custom module, insert the content for each of mod1, mod2, and mod3.

3. Precede all the content with the tag
{zen-row}
and end all the content with the tag
{/zen-row}

4. Precede mod1's content with the tag
{zen-3}
and end mod1's content with the tag
{/zen3}

5. Repeat step 4 for each of mod2 and mod3.

What am I missing?

Jim

{zen-row}

{zen-3}
{loadposition mod1}
{/zen3}

{zen-3}
{loadposition mod2}
{/zen3}

{zen-3}
{loadposition mod3}
{/zen3}

{zen-3}
{loadposition mod4}
{/zen3}

{/zen-row}

In the custom html module turn on prepare content

Is that what you have?

Cheers
Paul

I haven't coded anything yet, Paul.

I infer that in your example you left out the modules' HTML code. So check me on this:

---

{zen-row}

{zen-3}
{loadposition [mod1 position name]}
[mod1 HTML code]
{/zen3}

{zen-3}
{loadposition [mod2 position name]}
[mod2 HTML code]
{/zen3}

{zen-3}
{loadposition [mod3 position name]}
[mod3 HTML code]
{/zen3}

{/zen-row}

---

Is that right?

Jim

Hi Jim,

With using loadposition it loads the module that is published to that named position so it would include any html

Equally you could add whatever content you wanted

Cheers
Paul

Paul, I created a master "loadposition" module as you recommended (with "prepare content" turned on), which calls the modules to be displayed.

The modules display on the front end. However, they display with the {zen3} tags appearing (see attached).

How do I tell Joomla that the tags are code, not content?

Jim

Hi Jim,

Are any modules displayed correctly?

Cheers
Paul

The modules don't display side by side, Paul. They display vertically (see attached).

Also, each one is preceded by
{zen-3}
and is followed by
{/zen-3}

Here's the content of the loadposition module:

{zen-row}

{zen-3}
{loadposition subfeat1}
{/zen3}

{zen-3}
{loadposition subfeat2}
{/zen3}

{zen-3}
{loadposition subfeat3}
{/zen3}

{/zen-row}


Jim

Hi Jim,
Sorry if Ive missed this but do you have a link?
Thanks