The problem with customizing the appearance of our News Page Layouts is that our changes can get lost during Joomla updates and template updates. The solution to this problem is to use a “Child” template which preserves our Page Layout changes regardless of any updates to Joomla or to the Parent template.
Sadly, the Helix template we have been using until now does not yet have the child template feature. Equally bad, it is nearly impossible to alter the appearance of the Helix template to get the Page Layout on the Home page to match the layout of the Los Angeles Times. We have been using the Helix Template until now because it offered an easy way to introduce you to the layout of Joomla module rows and module positions.
The time has come to graduate to the default Joomla template, called Cassiopeia, which allows us to create child templates. In addition, the Casseopeia template comes with special “CSS classes” which give us the ability to match the page layout of the Los Angeles Times. However, the drawback of using a Cassiopeia child template is that it is much more difficult to create additional module rows with Cassiopeia than it was with the Helix template.
The good news is that we only need to do this change process once. We can then use copies of our modified Cassiopeia Child Template to create other Community News websites. Thus, while we will be going through some complex steps in this article, we are describing these steps mainly to explain how this is done – so that anyone who wants to create their own custom child templates will have a series of steps to follow.
You do not actually need to complete or even understand any of these steps we describe in this article as we will be offering our heavily modified Cassiopeia Child Template as a Free Download on our Create a Secure News Website Downloads page.
Nevertheless, it is useful to give this a try as “practice” because it will give you a better idea of how the appearance of a Joomla News website is actually structured. Let’s begin by reviewing how module rows are structured in the Cassiopeia Template.
Cassiopeia Template initial module rows
The Joomla default Cassiopeia Template only comes with a few module rows and positions. Here are the initial rows above the Component:
Here are the initial module rows below the Component area:
There are only two module rows above the footer. These are called bottom-a and bottom-b. We need at least nine more module rows below the component just to display our news topic categories. We will begin by creating a simple demo-1 child template and adding just one row below the bottom-b row to see if it displays properly. Once we confirm that it displays properly, we will then download a more complex child template to review the steps for adding a child template that has already been created. Finally, we will add module rows to this more complex child template to create our own news-1 child template.
Six Steps to add Module Rows to our Child Template
There are basically six steps. The first step is to create a child template and make our code changes in the child template. When we create a child template, it will automatically create its own independent templateDetails.xml file which is not changed when Joomla updates.
The second step is to add some code to the child template templateDetails.xml file.
The third step is to create a child template user.css file and then use CSS Grid properties to add one or more “grid rows” to the child template by adding a few lines of CSS to our child template user.css file.
The fourth step is to create a child template index.php file and then copy and paste a few lines of code into our Child template index.php file.
The fifth step is to create a new custom module and assign it to the new row you created in your child template.
The last step is to change your default template from the Casseopeia parent template to the Child template and confirm that the new module displays properly in the new module row.
Step #1 Create a Child Template
A child template is a “partial” version of a parent template in that the child template has only three files, the child templateDetails.xml file, the child user.css file and the child index.php file. Child templates must be associated with a parent template. To create a child template, from your administrator dashboard, go to Templates Code <> (which is not the same as Templates Styles). Click on Cassiopeia Details and Files to edit it.
Click Create Child Template. Give the Template a short name such as demo1. Then use the drop down arrow to select the Cassiopeia Default Template Styles. Then click Create Child Template.
Close the Template Edit screen. There are now two Cassiopeia templates:
Click the Child template Details and Files to open it.
Click the templateDetails.xml file to open it.
Step #2 Edit the child template templateDetails.xml file
You will see all of the default module positions beginning on Line 11:
Scroll down to Line 24 and use your keyboard to create a new blank line after the bottom-b module position. Copy Line 24 and paste it into the new row. Then change the row name on Line 25 from bottom-b to test-1.
<position>test-1</position>
Then click Save and Close to close the XML file.
Step #3 Create and edit a child template user.css file
We will now create a user.css file and place our CSS Grid code in the user.css file. Note that our child template will use all of the files of their parent template except for any files of the same name you create in the child template. So while the Casseopeia template.css file has over 15,000 lines our child template will only have a few lines of CSS.
We will copy of the final part of the Cassiopeia template.css file and paste it in our child user.css. We will then add the CSS for a new module row called test-1 in our child user.css file.
In the child template code edit screen, click New File to bring up this screen :
For File Name, type user. For File Type, click on the css option. Also click on the css folder in the left column to select it. Then click Create. This screen will appear:
Save but do not close this file. We next need to find the code we want to paste into this file to copy it into your computer clipboard. So in your Home computer file manager, unzip the Joomla zipped installation folder. Then click on the media folder to open it. Then click on templates folder. Then the site folder. Then the cassiopeia folder. Then the css folder. Then open the template.css file with your Bluefish HTML editor and scroll to the very end of the file. It is 15,643 lines long. Copy Lines 14725 to 14765 into your computer clipboard. Here at these 40 lines:
.site-grid { margin-bottom: auto;}
@supports (display: grid) {
.site-grid {
grid-gap: 0 1em;
grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
grid-template-areas: ". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
display: grid; }
.site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
column-gap: 1em;
width: 100%;
max-width: none; }
.site-grid > .full-width {
grid-column: full-start / full-end; }
@media (width >= 992px) {
.site-grid {
grid-template-areas: ". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
} } }
Paste these 40 lines into your child template user.css file then save the file again but do not close it. We will add our new row just below the bottom-b row by copy pasting the following line:
". test-1 test-1 test-1 test-1 .";
Then scroll down to Line 29 enter a new line and copy past the new row in again:
Now that we have added our new module row, we also need to add some styling to the new row so it will appear properly. We will copy the styles used by the bottom-1 row. On your home computer, go back to the template.css file and scroll to Line 13928 to 13947, copy the following into your computer clipboard and then paste it to your user.css file.
.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b { position: relative; }
.container-top-a > *, .container-top-b > *, .container-bottom-a > *, .container-bottom-b > * { flex: 1; margin: .5em 0; }
@media (width <= 991.98px) {
.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b { flex-direction: column; }
.container-top-a > *, .container-top-b > *, .container-bottom-a > *, .container-bottom-b > * { flex: 0 auto; } }
Add the test-1 container to each of the above lines so it appears like this in your user.css file:
.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-test-1 { position: relative; }
.container-top-a > *, .container-top-b > *, .container-bottom-a > *, .container-bottom-b > *, .container-test-1>* { flex: 1; margin: .5em 0; }
@media (width <= 991.98px) {
.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-test-1 { flex-direction: column; }
.container-top-a > *, .container-top-b > *, .container-bottom-a > *, .container-bottom-b > *, .container-test-1>* { flex: 0 auto; }
}
Also copy and paste Line 14806: .container-bottom-b { grid-area: bot-b; }
Then change the name from bottom-b to test-1 and the grid area from bot-b to test-1: .container-test-1 { grid-area: test-1; }
Then save and close the user.css file and close the child template edit screen.
Step #4 Create and edit a child template index.php file
Click New File to add the index.php file. For File Name, type index. For File Type, select php. Also be sure to click the templates/cassiopeia_demo1 folder to place this new file in this folder. Then click Create.
That will display this file edit screen:
Click Save but do not close this file. We next need to copy paste the entire index.php file into this file. In your Home computer file manager, open the Joomla installer folder and open the templates folder. Then open the cassiopeia folder and use your Bluefish editor to open the index.php file. Click Edit, Select All. Then Edit Copy to place it into your clipboard.
Then paste it into your child template index.php file and save but do not close the file. Scroll down to near the end of the file and copy paste this just above the closing divide that is just above the footer. Enter a new line at Line 238 and add this code:
<?php if ($this->countModules('test-1', true)) : ?>
<div class="grid-child container-test-1">
<jdoc:include type="modules" name="test-1" style="card" />
</div>
<?php endif; ?>
Then save and close your child template index.php file.
Step #5 Add a custom module and place it in the child template test-1 position
Go to Content, Site Modules and click New. Select a custom module and name it Test 1. Place it in the child template (demo1) test-1 module position. Assign it to a page such as our Module Demo page.
Step #6 Assign the Module Demo Page to our Child Template
From the Home Dashboard, click Templates, Styles. Then click on the Child “copy of Cassiopeia Default” template to open it. Click Menu Assignment and assign this template to our Module Demo page. Then click Save and Close. Then open a new browser window and clear the cache and view the page in the front end to confirm that it appears properly.
If there are problems, you can use the CSS Inspector to identify and fix them. Now that we understand the basic six-step process of adding a new module row to a Cassiopeia child template, we are ready to add a fully designed existing child template to our Community News website.
Delete the demo1 child template
Before we can delete a child template, we first need to make sure that it is not assigned to any pages. Go to Templates, Styles and click on the child template to edit it. Click on Menu Assignment and uncheck the Module Demo Page. Then save and close the child template. Then in Templates, Styles, check the child template and click Delete. Then select the other child template and click Delete. Sadly a warning will appear explaining that you can not delete the last style of a child template. To delete the final child template style, go to System, Manage, Extensions and Filter Type for Templates. Select and uninstall the last child template.
Use the Linelab child template to create our News1 Child Template
The Linelab child template has several benefits over the default Cassiopiea template. This child template addresses problems with the display of the hamburger menu and the main menu. It also includes additional styling options such as custom background and text color selections for each of the module rows. But its main advantage is that its user.css file is already made and is much shorter and therefore easier to work with than the Cassiopeia template.css file. Finally, once we make our own custom Community News child template, we can use these same steps to install a copu of our custom child template onto any News website. We will therefore describe how to install and customize the Linelab child template.
To download this child template, go to this page:
https://www.linelab.org/support/joomla-4-template-cassiopeia-customization-child-template
Download the template which is in a box called Attachments. Then transfer the zipped file from your Downloads folder to your website Extensions folder and extract it.
The Linelab Child template, called demo, has three folders. Click on the templates folder which has a folder called cassiopeia_demo. Click on this folder to see an html folder, an index.php file and a templateDetails.xml file.
Use the Bluefish Editor to open the the XML file. Select and delete the first seven lines to leave line beginning with copyright:
Leave this Linelab XML file open for a few minutes while we use our Joomla admin screen to create a new child template.
Step #1 Create a news1 Child Template
From your administrator dashboard, go to Templates Code. Click on Cassiopeia Details and Files to edit it. Click Create Child Template. Give the Template a short name such as news1. Then use the drop down arrow to select the Cassiopeia Default Template Styles. Then click Create Child Template. Close the Template Edit screen. There are now two Cassiopeia templates:
Click the Child template Details and Files to open it. Then click the templateDetails.xml file to open it.
Step #2 Edit the child template templateDetails.xml file
Go back to your Bluefish editor and click Edit Select All, then Edit copy. This will place the Linelab XML file in your clipboard. In your new1 child template XML file edit screen, create a new line starting at Line 8. Then delete the rest of the default child XML file and paste the Linelab XML file into the workspace. Click Save but do not close this file.
You will see all of the default module positions beginning on Line 11. This includes two new module rows Linelab has added to their XML file. Scroll down to Line 26 and use your keyboard to create a new blank line after the bottom-b module position. Copy Line 26 and paste it into the new row. Then change the row name on Line 27 from bottom-b to bottom-01.
<position>bottom-01</position>
Then scroll to the end of the XML file and change the destination from demo to news1. Then save and close the XML file.
Step #3 Create and edit the news1 child template user.css file
We will now create a user.css file. In the new1 child template code edit screen, click New File to bring up this screen :
For File Name, type user. For File Type, click on the css option. Also click on the css folder in the left column to select it. Then click Create. The user.css edit screen will appear. Save but do not close this file.
On your Home computer file manager, click on the Linelab child template media folder to see tha it contains a templates folder. Click on the templates folder to see that it contains a site folder. Click on the site folder to see that it contains a cassiopeia_demo folder. Click on this folder to see that it contains a swiper folder and a user.css file.
Use the Bluefish Editor to open the user.css file. It is 682 lines long which is thankfully much shorter than the Cassiopeia template.css file. Select and copy the Linelab user.css file. Then close the Bluefish editor and paste the css into our news1 user.css file. It should paste all 682 lines:
Save the file but do not close it.
Add our new bottom-01 row to both CSS grid layouts
Both grid layouts are near the end of our news1 child template user.css file. Copy and paste into the first grid on a new line below the bottom b row:
". bottom-01 bottom-01 bottom-01 bottom-01 .";
Then copy paste the same line into the second grid on a new line below the bottom b row (Line 668).
Add styling to our new bottom-01 row
Linelab has added a new row called top-c which we will use to create our styles for our bottom-01 row. Scroll down to Line 120 through 143 to copy and paste these 23 rows into a Writer document (I have condensed the lines to take less space and make them easier to read and copy:
.container-top-c > *{ flex: 1; margin: 0.5em 0;}
.container-top-c{ position: relative; grid-area: top-c;}
.topc{ position:relative; color: var(--cassiopeia-color-text-topc);
background-color: var(--cassiopeia-color-primary-topc);
/* background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-topc) 0%, var(--cassiopeia-color-hover-topc) 100%);*/
}
.topc:before{background-color: inherit; background-image: inherit;}
.topc a {color: var(--cassiopeia-color-link-topc);}
.topc a:hover,.topc a:focus { color: var(--cassiopeia-color-hover-topc);}
The lines in bold are just a comment which is not needed. We will therefore delete it and then copy and paste the other lines below, changing the top-c row names to bottom-01 row names.
.container-bottom-01 > *{ flex: 1; margin: 0.5em 0;}
.container-bottom-01{ position: relative; grid-area: bottom-01;}
.bottom01{ position:relative; color: var(--cassiopeia-color-text-bottom01);
background-color: var(--cassiopeia-color-primary-bottom01);}
.bottom01:before{background-color: inherit; background-image: inherit;}
.bottom01 a {color: var(--cassiopeia-color-link-bottom01);}
.bottom01 a:hover,.bottom01 a:focus {color: var(--cassiopeia-color-hover-bottom01); }
Make a new line starting at Line 177 to paste the 7 lines from above. Then scroll down to Line 362 where you will find the following for the top-c row:
.container-top-c > .card{padding: 80px 30px 80px 0;}
.container-top-c > .card:last-child{padding: 80px 0 80px 30px;}
Create a new line at Line 363 and copy paste the above changing the top-c names to bottom-01. Also reduce the padding as shown:
.container-bottom-01 > .card {padding: 10px 10px 10px 10px;}
.container-bottom-01 > .card:last-child {padding: 10px 10px 10px 10px;}
Then scroll down to Line 564 where you will see the following:
.bottoma .card-header{ text-align: center; padding: 20px 0;}
Create a new line at Line 568 and copy paste the above changing the bottoma names to bottom01. Also reduce the padding as shown:
.bottom01 .card-header{ text-align: center; padding: 10px 0;}
Next, scroll down to about Line 620 where you will see this line:
.container-top-c > .card, .container-top-c > .card:last-child {
padding: 80px 0; }
Enter a new line below this line and copy paste the above row then changing the top-c names to bottom-01. Also reduce the padding as shown:
.container-bottom-01 > .card, .container-bottom-01 > .card:last-child {
padding: 20px 0;}
Last, scroll down to about Line 650 where you will see:
.container-top-c { flex-direction: column; }
.container-top-c > * { flex: 0 1 auto; }
Enter a new line below this line and copy paste the above row then changing the top-c names to bottom-01.
.container-bottom-01 {flex-direction: column;}
.container-bottom-01 > * {flex: 0 1 auto;}
Then save and close the user.css file.
Step #4 Create and edit the news1 child template index.php file
Click New File to add the index.php file. For File Name, type index. For File Type, select php. Also be sure to click the templates/cassiopeia_news1 folder to place this new file in this folder.
Then click Create. This will display the news1 index.php file edit screen. Click Save but do not close this file.
We next need to copy paste the entire Linelab index.php file into this news1 index.php file. In your Home computer file manager, open the Linelab folder and open the templates folder. Then open the cassiopeia folder and use your Bluefish editor to open the index.php file. Click Edit, Select All. Then Edit Copy to place it into your clipboard. Then paste it into your news1 child template index.php file and save but do not close the file. Scroll down to Line 87, make a new line and add the following just below bottomb: 'bottom01', Then scroll down to Line 331 and enter a new line. Copy paste this just above the divide that is just above the footer.
<?php if ($this->countModules('bottom-01', true)) : ?>
<div class="grid-child container-bottom-01 bottom01<?php echo $bgimage_class['bottom01'];?>" <?php echo !empty($bgimage['bottom01'])?'style="background:url('.$bgimage['bottom01'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-01" style="card" />
</div> <?php endif; ?>
Then save and close your news1 child template index.php file. Then save and close the child template.
Step #5 Add a custom module and place it in the bottom-01 position
Go to Content, Site Modules and click New. Select a custom module and name it News 1 Row Bottom 01. Place it in the news1 child template bottom-01 module position. Assign it to our Module Demo page.
Step #6 Assign the Module Demo Page to our Child Template
From the Home Dashboard, click Templates, Styles. Then click on the Child “copy of Cassiopeia Default” template to open it. Click Menu Assignment and assign this template to our Module Demo page. Then click Save and Close. Then open a new browser window and clear the cache and view the page in the front end to confirm that it appears properly.
Add the second and third module rows
Now that we have the first row of our News 1 Child Template made, we can copy and repeat this process to add the second and third rows. Because we have already created the child template, we only need 5 steps to add these two rows.
Step #1 Edit the child template templateDetails.xml file
In your news1 child template XML file edit screen, scroll down to Line 27 and use your keyboard to create a new blank line after the bottom-01 module position. Copy Line 27 and paste it into the new row. Then change the row names to bottom-02 and bottom-03.
<position>bottom-02</position>
<position>bottom-03</position>
Then save and close the XML file.
Step #2 Edit the news1 child template user.css file
We will open the news1 child template user.css file and scroll down to copy all the bottom01 row styles to create bottom02 and bottom03 row styles.
Scroll down to Line 174. Copy the 7 Bottom01 row lines:
.container-bottom-01 > *{ flex: 1; margin: 0.5em 0;}
.container-bottom-01{ position: relative; grid-area: bottom-01;}
.bottom01{ position:relative; color: var(--cassiopeia-color-text-bottom01);
background-color: var(--cassiopeia-color-primary-bottom01);}
.bottom01:before{background-color: inherit; background-image: inherit;}
.bottom01 a {color: var(--cassiopeia-color-link-bottom01);}
.bottom01 a:hover,.bottom01 a:focus {color: var(--cassiopeia-color-hover-bottom01); }
Make a new line at the end of the bottom01 lines and paste the 7 lines in. Change all of the bottom01 numbers to 02. Then make a new row at the end ot the bottom 02 lines and paste the 7 lines in again. Change all of the bottom01 numbers to 03.
Then scroll down to about Line 377 where you will find the following bottom01 row:
.container-bottom-01 > .card {padding: 10px 10px 10px 10px;}
.container-bottom-01 > .card:last-child {padding: 10px 10px 10px 10px;}
Copy these two lines. Then create a new line and paste these lines in twice. Change the first two row numbers from 01 to 02 and the second two row numbers from 01 to 03.
Then scroll down to about Line 590 where you will see the following:
.bottom01 .card-header{ text-align: center; padding: 10px 0;}
Copy the bottom01 line. Then make a new line and paste the line in twice. Change the first row numbers from 01 to 02 and the second row numbers from 01 to 03.
Next, scroll down to about Line 640 where you will see this line:
.container-bottom-01 > .card, .container-bottom-01 > .card:last-child { padding: 20px 0;}
Copy the bottom01 line. Then make a new line and paste the line in twice. Change the first row numbers from 01 to 02 and the second row numbers from 01 to 03.
Last, scroll down to about Line 670 where you will see:
.container-bottom-01 {flex-direction: column;}
.container-bottom-01 > * {flex: 0 1 auto;}
Copy these two lines. Then create a new line and paste these lines in twice. Change the first two row numbers from 01 to 02 and the second two row numbers from 01 to 03.
Add our new bottom-02 and bottom-03 rows to both CSS grid layouts
Both grid layouts are near the end of our news1 child template user.css file. Copy and paste into the first grid on a new line below the bottom 01 row:
". bottom-02 bottom-02 bottom-02 bottom-02 .";
". bottom-03 bottom-03 bottom-03 bottom-03 .";
Then copy paste the same line into the second grid on a new line below the bottom 01 row. Then save and close the user.css file.
Step #3 Edit the news1 child template index.php file
Open your news1 child template index.php file and scroll down to Line 88, make a new line and add the following just below bottom01:
'bottom02',
'bottom03',
Then scroll down to about Line 338 and enter a new line. Copy paste this just above the divide that is just above the footer.
<?php if ($this->countModules('bottom-01', true)) : ?>
<div class="grid-child container-bottom-01 bottom01<?php echo $bgimage_class['bottom01'];?>" <?php echo !empty($bgimage['bottom01'])?'style="background:url('.$bgimage['bottom01'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-01" style="card" />
</div> <?php endif; ?>
Change all six of the numbers from 01 to 02. Then make a new line and paste it again. Change all six of the numbers from 01 to 03. Then save and close your news1 child template index.php file. Then save and close the child template.
Step #4 Add a custom module and place it in the bottom-02 position
Go to Content, Site Modules and click New. Select a custom module and name it News 1 Row Bottom 02. Place it in the news1 child template bottom-02 module position. Assign it to our Module Demo page.
Then duplicate the second module and name the third module News 1 Row Bottom 03. Place it in the news1 child template bottom-03 module position. Assign it to our Module Demo page.
Step #6 Assign the Module Demo Page to our Child Template
From the Home Dashboard, click Templates, Styles. Then click on the Child “copy of Cassiopeia Default” template to open it. Click Menu Assignment and assign this template to our Module Demo page. Then click Save and Close. Then open a new browser window and clear the cache and view the page in the front end to confirm that all three modules appears properly in all three module rows.
Add module rows bottom04, bottom05 and bottom06
We will add three more module rows and then check the result. Assuming it is OK, we will then repeat the process to add the final three rows.
Step #1 Add Rows three at a time to the child template XML file
Open the News Child template templateDetails.xml file. At Line 30, just above the footer position, create a new line. Then copy and paste the following three positions:
<position>bottom-04</position>
<position>bottom-05</position>
<position>bottom-06</position>
Then save and close the XML file.
Step #2 Edit your child template user.css file
Open your previous Writer document used to change line numbers in bold. Copy three row blocks of CSS into a new Write Document. Change the row numbers from 01, 02 and 03 to 04, 05 and 06.
.container-bottom-04 > * {flex: 1; margin: 0.5em 0;}
.container-bottom-04 {position: relative; grid-area: bottom-04;}
.bottom04 {position:relative; z-index:0; color: var(--cassiopeia-color-text-bottom04); background-color: var(--cassiopeia-color-primary-bottom04);}
.bottom04:before{background-color: inherit; background-image: inherit;}
.bottom04 a {color: var(--cassiopeia-color-link-bottom04);}
.bottom04 a:hover,.bottom04 a:focus {color: var(--cassiopeia-color-hover-bottom04); }
.container-bottom-05 > * {flex: 1; margin: 0.5em 0;}
.container-bottom-05 {position: relative; grid-area: bottom-05;}
.bottom05 {position:relative; z-index:0; color: var(--cassiopeia-color-text-bottom05); background-color: var(--cassiopeia-color-primary-bottom05);}
.bottom05:before{background-color: inherit; background-image: inherit;}
.bottom05 a {color: var(--cassiopeia-color-link-bottom05);}
.bottom05 a:hover,.bottom05 a:focus {color: var(--cassiopeia-color-hover-bottom05);}
.container-bottom-06 > * {flex: 1; margin: 0.5em 0;}
.container-bottom-06 {position: relative; grid-area: bottom-06;}
.bottom06 {position:relative; z-index:0; color: var(--cassiopeia-color-text-bottom06); background-color: var(--cassiopeia-color-primary-bottom06);}
.bottom06:before{background-color: inherit;background-image: inherit;}
.bottom06 a {color: var(--cassiopeia-color-link-bottom06);}
.bottom06 a:hover,.bottom06 a:focus {color: var(--cassiopeia-color-hover-bottom06);}
Paste these into your child template user.css file at Line 193 just above the footer.
Line 400 Add new lines:
.container-bottom-04 > .card { padding: 10px 10px 10px 10px;}
.container-bottom-04 > .card:last-child{padding: 10px 10px 10px 10px;}
.container-bottom-05 > .card { padding: 10px 10px 10px 10px;}
.container-bottom-05 > .card:last-child{padding: 10px 10px 10px 10px;}
.container-bottom-06 > .card { padding: 10px 10px 10px 10px;}
.container-bottom-06 > .card:last-child{padding: 10px 10px 20px 10px;}
Line 608 add new lines:
.bottom04 .card-header{text-align: center;padding: 10px 0;}
.bottom05 .card-header{text-align: center;padding: 10px 0;}
.bottom06 .card-header{text-align: center;padding: 10px 0;}
Line 660 add rows to the grid areas:
". bottom-04 bottom-04 bottom-04 bottom-04 ."
". bottom-05 bottom-05 bottom-05 bottom-05 ."
". bottom-06 bottom-06 bottom-06 bottom-06 .";
Line 679: add
.container-bottom-04 > .card, .container-bottom-04 > .card:last-child{
padding: 20px 0;}
.container-bottom-05 > .card, .container-bottom-05 > .card:last-child{
padding: 20px 0;}
.container-bottom-06 > .card, .container-bottom-06 > .card:last-child{
padding: 20px 0;}
Line 720: add
.container-bottom-04 {flex-direction: column;}
.container-bottom-04 > * {flex: 0 1 auto;}
.container-bottom-05 {flex-direction: column;}
.container-bottom-05 > * {flex: 0 1 auto;}
.container-bottom-06 {flex-direction: column;}
.container-bottom-06 > * {flex: 0 1 auto;}
Add to both grid layouts near the end of the user.css file. Note that there is a semi-colon added to the last line only:
". bottom-04 bottom-04 bottom-04 bottom-04 ."
". bottom-05 bottom-05 bottom-05 bottom-05 ."
". bottom-06 bottom-06 bottom-06 bottom-06 .";
Then save and close the user.css file.
Step #3 Add rows three at a time to the News1 Child Template index.php file
Scroll down to line 88 and enter a new line to add the following three module rows just above the footer row:
'bottom04',
'bottom05',
'bottom06',
Then scroll down to Line 356 just above the closing divide and enter a new line to copy and paste the following three rows:
<?php if ($this->countModules('bottom-04', true)) : ?>
<div class="grid-child container-bottom-04 bottom04<?php echo $bgimage_class['bottom04'];?>" <?php echo !empty($bgimage['bottom04'])?'style="background:url('.$bgimage['bottom04'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-04" style="card" />
</div>
<?php endif; ?>
<?php if ($this->countModules('bottom-05', true)) : ?>
<div class="grid-child container-bottom-05 bottom05<?php echo $bgimage_class['bottom05'];?>" <?php echo !empty($bgimage['bottom05'])?'style="background:url('.$bgimage['bottom05'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-05" style="card" />
</div>
<?php endif; ?>
<?php if ($this->countModules('bottom-06', true)) : ?>
<div class="grid-child container-bottom-06 bottom06<?php echo $bgimage_class['bottom06'];?>" <?php echo !empty($bgimage['bottom06'])?'style="background:url('.$bgimage['bottom06'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-06" style="card" />
</div>
<?php endif; ?>
Save and close the index.php file.
Step #4: Test the new positions to make sure they appear in the back end and display in the front end properly
Go to Content, Site Modules. Duplicate an existing Custom Module or create a new one. Display it in the bottom-04 position. Then create a duplicate of this module and assign it to the bottom-05 position. Then create a duplicate of this module and assign it to the bottom-06 position and view it in the front end.
Add module rows bottom07, bottom08 and bottom09
We will repeat the above process to add the final three rows.
Step #1 Add Rows three at a time to the child template XML file
Open the News Child template templateDetails.xml file. At Line 33, just above the footer position, create a new line. Then copy and paste the following three positions:
<position>bottom-07</position>
<position>bottom-08</position>
<position>bottom-09</position>
Then save and close the XML file.
Step #2 Edit your child template user.css file
Open your child template user.css file and add the final three rows at Line 215. Change row numbers from 04, 05 and 06 to 07, 08 and 09:
.container-bottom-07 > * {flex: 1; margin: 0.5em 0;}
.container-bottom-07 {position: relative; grid-area: bottom-07;}
.bottom07 {position:relative; z-index:0; color: var(--cassiopeia-color-text-bottom07); background-color: var(--cassiopeia-color-primary-bottom07);}
.bottom07:before{background-color: inherit;background-image: inherit;}
.bottom07 a {color: var(--cassiopeia-color-link-bottom07);}
.bottom07 a:hover, .bottom07 a:focus {color: var(--cassiopeia-color-hover-bottom07); }
.container-bottom-08 > * {flex: 1; margin: 0.5em 0;}
.container-bottom-08 {position: relative; grid-area: bottom-08;}
.bottom08 {position:relative; z-index:0; color: var(--cassiopeia-color-text-bottom08); background-color: var(--cassiopeia-color-primary-bottom08);}
.bottom08:before{background-color: inherit;background-image: inherit;}
.bottom08 a {color: var(--cassiopeia-color-link-bottom08);}
.bottom08 a:hover,.bottom08 a:focus {color: var(--cassiopeia-color-hover-bottom08);}
.container-bottom-09 > * {flex: 1; margin: 0.5em 0;}
.container-bottom-09 {position: relative; grid-area: bottom-09;}
.bottom09 {position:relative; z-index:0; color: var(--cassiopeia-color-text-bottom09); background-color: var(--cassiopeia-color-primary-bottom09);}
.bottom09:before{background-color: inherit;background-image: inherit;}
.bottom09 a {color: var(--cassiopeia-color-link-bottom09);}
.bottom09 a:hover, .bottom09 a:focus {color: var(--cassiopeia-color-hover-bottom09);}
Scroll down to Line 430 Add new lines:
.container-bottom-07 > .card { padding: 10px 10px 10px 10px;}
.container-bottom-07 > .card:last-child{padding: 10px 10px 10px 10px;}
.container-bottom-08 > .card { padding: 10px 10px 10px 10px;}
.container-bottom-08 > .card:last-child {padding: 10px 10px 10px 10px;}
.container-bottom-09 > .card { padding: 10px 10px 10px 10px;}
.container-bottom-09 > .card:last-child{padding: 10px 10px 10px 10px;}
Line 640 add new lines
.bottom07 .card-header{text-align: center;padding: 10px 0;}
.bottom08 .card-header{text-align: center;padding: 10px 0;}
.bottom09 .card-header{text-align: center;padding: 10px 0;}
Line 693 add rows to the grid areas:
". bottom-07 bottom-07 bottom-07 bottom-07 ."
". bottom-08 bottom-08 bottom-08 bottom-08 ."
". bottom-09 bottom-09 bottom-09 bottom-09 .";
Line 720: add
.container-bottom-07 > .card, .container-bottom-07 > .card:last-child{
padding: 20px 0;}
.container-bottom-08 > .card, .container-bottom-08 > .card:last-child{
padding: 20px 0;}
.container-bottom-09 > .card, .container-bottom-09 > .card:last-child{
padding: 20px 0;}
Line 767: add
.container-bottom-07 {flex-direction: column;}
.container-bottom-07 > * {flex: 0 1 auto;}
.container-bottom-08 {flex-direction: column;}
.container-bottom-08 > * {flex: 0 1 auo;}
.container-bottom-09 {flex-direction: column;}
.container-bottom-09 > * {flex: 0 1 auto;}
Add to both grid layouts near the end of the user.css file. Note that there is a semi-colon added to the last line only:
". bottom-07 bottom-07 bottom-07 bottom-07 ."
". bottom-08 bottom-08 bottom-08 bottom-08 ."
". bottom-09 bottom-09 bottom-09 bottom-09 .";
Then save and close the user.css file.
Step #3 Add rows three at a time to the News1 Child Template index.php file
Scroll down to line 88 and enter a new line to add the following three module rows just above the footer row:
'bottom07',
'bottom08',
'bottom09',
Then scroll down to Line 374 just above the closing divide and enter a new line to copy and paste the final three rows:
<?php if ($this->countModules('bottom-07', true)) : ?>
<div class="grid-child container-bottom-07 bottom07<?php echo $bgimage_class['bottom07'];?>" <?php echo !empty($bgimage['bottom07'])?'style="background:url('.$bgimage['bottom07'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-07" style="card" />
</div>
<?php endif; ?>
<?php if ($this->countModules('bottom-08', true)) : ?>
<div class="grid-child container-bottom-08 bottom08<?php echo $bgimage_class['bottom08'];?>" <?php echo !empty($bgimage['bottom08'])?'style="background:url('.$bgimage['bottom08'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-08" style="card" />
</div>
<?php endif; ?>
<?php if ($this->countModules('bottom-09', true)) : ?>
<div class="grid-child container-bottom-09 bottom09<?php echo $bgimage_class['bottom09'];?>" <?php echo !empty($bgimage['bottom09'])?'style="background:url('.$bgimage['bottom09'].');"':'' ?>>
<jdoc:include type="modules" name="bottom-09" style="card" />
</div>
<?php endif; ?>
Save and close the index.php file. Then close the News 1 Child Template Edit screen.
Step #4: Test the new positions to make sure they appear in the back end and display in the front end properly
Go to Content, Site Modules. Duplicate an existing Custom Module or create a new one. Display it in the bottom-07 position. Then create a duplicate of this module and assign it to the bottom-08 position. Then create a duplicate of this module and assign it to the bottom-09 position and view it in the front end.
Note: If you plan on adding Advertising Banners to your Home page to promote local events and local businesses, then you should add three more rows to your user.css file, your XML file and your index.php file. Call these rows bottom10, bottom11 and bottom12. We will leave this as a homework exercise.
What’s Next?
We are done adding our nine new News 1 Module rows. In our next article, we will review the final two steps to creating our News 1 Child Template. These are editing the XML file fields and adding language and slideshow files and folders to our News 1 template.