Adding a new template position to Cassiopeia Topic is solved

[DJBenz]

I want to add a new position to Joomla 4 Casseopeia Template because I have filled bottom-a and bottom-b with two modules each and adding a third squeezes them too much horizontally.

So if I want to add bottom-c how do I go about it?

I tried duplicating the code in index.php to simply add another instance thus:

Code: Select all

<?php if ($this->countModules('bottom-a', true)) : ?>
        <div class="grid-child container-bottom-a">
            <jdoc:include type="modules" name="bottom-a" style="card" />
        </div>
        <?php endif; ?>

        <?php if ($this->countModules('bottom-b', true)) : ?>
        <div class="grid-child container-bottom-b">
        <jdoc:include type="modules" name="bottom-b" style="card" />
        </div>
        <?php endif; ?>
        
        #ADDED CODE
        <?php if ($this->countModules('bottom-c', true)) : ?>
        <div class="grid-child container-bottom-c">
        <jdoc:include type="modules" name="bottom-c" style="card" />
        </div>
        #ADDED CODE
        <?php endif; ?>    

Then adding to templateDetails.xml

Code: Select all

<position>bottom-a</position>
	<position>bottom-b</position>
	#ADDED CODE
	<position>bottom-c</position>
	#ADDED CODE
        <position>footer</position>
	<position>debug</position>

But when I assign the position bottom-c to my module it appears somewhere at the left between Banner and Top-A so I guess I did something wrong.

Is there a simple way to do what I want and add this position? I'm not great with digging into code, so explain in simple terms please!

[Pavel-ww]

...and adding a third squeezes them too much horizontally.

Hi. I think you are too complicated. To solve this problem is not required to make an override. Only CSS is enough

But when I assign the position bottom-c to my module it appears somewhere at the left between Banner and Top-A so I guess I did something wrong.

Nevertheless ... this is because you placed the module position not in the right place of the HTML marking. You need to study the HTML layout and its CSS properties. Then make a decision on placing a position in the right place of markings.

[DJBenz]

...and adding a third squeezes them too much horizontally.

Hi. I think you are too complicated. To solve this problem is not required to make an override. Only CSS is enough

That would be fantastic if I could, but how? My CSS knowledge is weak and it usually takes me many attempts to change even the simplest things!

[Pavel-ww]

That would be fantastic if I could, but how? My CSS knowledge is weak and it usually takes me many attempts to change even the simplest things!

Even to make a decision on placing a position in the PHP code, you need CSS knowledge ... Provide a link to your site where there are squeezes modules in bottom-b position and I can help you with CSS

[DJBenz]

Even to make a decision on placing a position in the PHP code, you need CSS knowledge ... Provide a link to your site where there are squeezes modules in bottom-b position and I can help you with CSS

Ah sorry Pavel, I'm working on a Xampp server at the moment so I can't provide a link. I wanted to try out my changes in a development environment before I move to my live site.

[Pavel-ww]

Ah sorry Pavel, I'm working on a Xampp server at the moment so I can't provide a link. I wanted to try out my changes in a development environment before I move to my live site.

If you do not have enough knowledge and want to receive help, it is better to conduct development at a real hosting so that you can provide a link and not take care of the server settings. Things as XAMPP are designed for experienced users

[DJBenz]

If you do not have enough knowledge and want to receive help, it is better to conduct development at a real hosting so that you can provide a link and not take care of the server settings. Things as XAMPP are designed for experienced users

I'll come back with a link when I have updated the live site. I am in the final stages anyway so the last modifications are only fine tuning to get the site exactly how I want it.

[DJBenz]

If you do not have enough knowledge and want to receive help, it is better to conduct development at a real hosting so that you can provide a link and not take care of the server settings. Things as XAMPP are designed for experienced users

Hi Pavel,

Here's a link in a live server environment.



So I have two modules in bottom-a and two in bottom-b. If I add another module of the same type then it squeezes them up so I have three modules in a row. How can I get a new row within either position so I would have:

Code: Select all

BOTTOM-A [MODULE][MODULE]
         [MODULE]

Instead of:

Code: Select all

BOTTOM-A [MODULE][MODULE][MODULE]

[Pavel-ww]

Code: Select all

BOTTOM-A [MODULE][MODULE]
         [MODULE]

Hi. Here is for bottom-a

Code: Select all

.container-bottom-a {
    flex-wrap: wrap;
}
.container-bottom-a>* {
    flex: 0 0 calc(50% - .5em);
}

2.jpg

Here is for bottom-a + bottom-b if you need

Code: Select all

.container-bottom-a,
.container-bottom-b {
    flex-wrap: wrap;
}
.container-bottom-a>*,
.container-bottom-b>* {
    flex: 0 0 calc(50% - .5em);
}

[DJBenz]

Here is for bottom-a + bottom-b if you need

That is perfect, thank you so much! I added the code for bottom-a and bottom-b in case I need to use extra rows in either position in future.

[DJBenz]

Code: Select all

.container-bottom-a,
.container-bottom-b {
    flex-wrap: wrap;
}
.container-bottom-a>*,
.container-bottom-b>* {
    flex: 0 0 calc(50% - .5em);
}

Hi Pavel,

This worked perfectly on desktop, although on mobile it's not so great:



There's also a lot of white space between the modules in main-top position and bottom-a, and there's such a huge white space after bottom-b up to the footer that I can't even capture it on a screenshot!

[Pavel-ww]

This worked perfectly on desktop, although on mobile it's not so great:

Hi. Here is for mobile

Code: Select all

@media (max-width: 991.98px) {
    .container-bottom-a>*,
    .container-bottom-b>* {
        flex: 0 1 auto;
    }
}

[DJBenz]

This worked perfectly on desktop, although on mobile it's not so great:

Hi. Here is for mobile

Do I need to say it? Perfect again, but you know that. Thank you!