CSS code for boxes in cassiopeia Topic is solved

[gerner]

Im new to CSS codes so I need a little advice. I have add some extra boxes to the bottom of my site, but I can't get them look like the rest of the boxes on the page, that is a part of the template cassiopeia on joomla 5.

Below is a screenshot of the website in both normal and debug mode and below the photos the CSS codes I have used. Maybe someone can advise me on the CSS codes so the boxes will look like the rest of the page.





Editing file "‎/media/templates/site/cassiopeia/css/user.css" in template "cassiopeia":

Code: Select all

@charset "UTF-8";
:root, [data-bs-theme="light"] {

/* Fælles styling for alle footer-bokse for at matche 'bottom-a' stilen */
.footer-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;  /* Sørger for at containeren fylder hele bredden */
}

.footer-top-box-1,
.footer-top-box-2,
.footer-top-box-3 {
    flex: 1 1 30% !important;  /* Sørger for, at boksene står ved siden af hinanden */
    padding: 10px !important;
    background-color: #fff !important; /* Lys grå baggrund */
    border: 1px solid #ccc !important;  /* Matchende kant */
    box-sizing: border-box !important;
    margin-bottom: 10px !important; /* Afstand mellem rækker */
    margin-left: -1px !important;  /* Kompenserer for border */
    margin-right: -1px !important; /* Kompenserer for border */
}

.footer-bottom-box {
    width: 100% !important;
    padding: 10px !important;
    background-color: #fff !important; /* Lys grå baggrund */
    border: 1px solid #ccc !important;  /* Matchende kant */
    box-sizing: border-box !important;
    text-align: center !important;
    margin-bottom: 10px !important; /* Afstand under bundboksen */
}

/* Responsiv tilpasning */
@media (max-width: 768px) {
    .footer-top-box-1,
    .footer-top-box-2,
    .footer-top-box-3 {
        flex: 1 1 100% !important;  /* Stabler vertikalt på mindre skærme */
        margin-left: 0 !important; /* Fjern margin på venstre side */
        margin-right: 0 !important; /* Fjern margin på højre side */
    }
}

[Mr. Wimpy]

To be able to help you better, we need to look at your code itself.
Please post the url to the page.

Tip 1 for your CSS
Try to avoid using !important.
!important rules can only be overridden by other (later) !important rules.
This can lead to issues down the line...

To override CSS, use the correct order of CSS or more specific CSS.

Tutorial on CSS:
https://www.w3schools.com/Css/

[gerner]

Thanks, will remove that. Anyway it does not fix how the boxes is showed on my website. Can some one guide a little more to use the right CSS codes?

[Pavel-ww]

Can some one guide a little more to use the right CSS codes?

Hi. No one knows the code by heart and does not write based only in screenshots, since we need to see HTML for the use of CSS. If you want to get help, provide a link to your site.

And also, explain in detail what you want to get. The screenshots you have provided are not obvious to understanding.

[Per Yngve Berg]

Have you tried Module Layout "Card"?

[gerner]

Thanks, yes - Here is the codes:

Code: Select all

<div class="container">
    <?php if ($this->countModules('footer-top-box-1') || $this->countModules('footer-top-box-2') || $this->countModules('footer-top-box-3') || $this->countModules('footer-bottom-box')) : ?>
        <footer class="footer-container">
            <div class="footer-top-box footer-top-box-1">
                <jdoc:include type="modules" name="footer-top-box-1" style="card" />
            </div>
            <div class="footer-top-box footer-top-box-2">
                <jdoc:include type="modules" name="footer-top-box-2" style="card" />
            </div>
            <div class="footer-top-box footer-top-box-3">
                <jdoc:include type="modules" name="footer-top-box-3" style="card" />
            </div>
            <div class="footer-bottom-box">
                <jdoc:include type="modules" name="footer-bottom-box" style="card" />
            </div>
        </footer>
    <?php endif; ?>
</div>

[Pavel-ww]

Thanks, yes - Here is the codes:

Hi.

The only way to get help is to provide a link to the site and screenshots exactly explaining what you want to achieve. Since we need to see HTML, CSS and visualization at the output using browser Dev Tools. PHP from index.php is not suitable for this.

You waste time trying to avoid providing a link. If your site is on a local server, transfer it to real hosting. Only in this case you can get help.

[Mr. Wimpy]

+10 @Pavel-ww

Joomla loads more than just your own code.
We need to see the outputted code (Joomla/cassiopeia code + your changes, together, in action).

Meanwhile your html/php, while correct, does something you may not expect or want:
- If no module is set you'll have an empty <div class="container">
- If 1 module is set you'll have 4 footer boxes (of which 3 are empty)

Unless that is what you want, use:

Code: Select all

<?php if ($this->countModules('footer-top-box-1') || $this->countModules('footer-top-box-2') || $this->countModules('footer-top-box-3') || $this->countModules('footer-bottom-box')) : ?>
<footer class="footer-container">
  <?php if($this->countModules('footer-top-box-1')) : ?>
  <div class="footer-top-box footer-top-box-1">
    <jdoc:include type="modules" name="footer-top-box-1" style="card" />
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer-top-box-2')) : ?>
  <div class="footer-top-box footer-top-box-1">
    <jdoc:include type="modules" name="footer-top-box-2" style="card" />
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer-top-box-3')) : ?>
  <div class="footer-top-box footer-top-box-1">
    <jdoc:include type="modules" name="footer-top-box-3" style="card" />
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer-bottom-box')) : ?>
  <div class="footer-top-box footer-bottom-box">
    <jdoc:include type="modules" name="footer-bottom-box" style="card" />
  </div>
  <?php endif; ?>
</fooer>
<?php endif; ?>

* removed "container": footer is already containing
** added ifs around footer boxes so they'll only show when a module is present

Did you know you can have multiple modules in 1 position?
Instead of having 3 top-box positions, have 1 and use the order feature in Joomlas backend.

Code: Select all

<?php if ($this->countModules('footer-top-box') || $this->countModules('footer-bottom-box')) : ?>
<footer class="footer-container">
  <?php if($this->countModules('footer-top-box')) : ?>
  <div class="footer-top-box">
    <jdoc:include type="modules" name="footer-top-box" style="card" />
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer-bottom-box')) : ?>
  <div class="footer-bottom-box">
    <jdoc:include type="modules" name="footer-bottom-box" style="card" />
  </div>
  <?php endif; ?>
</fooer>
<?php endif; ?>

[gerner]

Thanks for all suggestions. I have tried to do the changes you suggested and it helped a little. Anyway I still cant figure out how the CSS code should look like to mach the other boxes. Hope someone can advice. The updated codes are below. The test website can be founded here: https://jo5.dykkerhulen.dk/index.php

The CSS file I have add the CSS codes to are placed here: Editing file "‎/media/templates/site/cassiopeia/css/user.css" in template "cassiopeia". (I created the user.css so I did not overwrite the original file - but sure if the site reads that file?)

Php code:

Code: Select all

<?php if ($this->countModules('footer-top-box') || $this->countModules('footer-bottom-box')) : ?>
<footer class="footer-container">
  <?php if($this->countModules('footer-top-box')) : ?>
  <div class="footer-top-box">
    <jdoc:include type="modules" name="footer-top-box" style="card" />
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer-bottom-box')) : ?>
  <div class="footer-bottom-box">
    <jdoc:include type="modules" name="footer-bottom-box" style="card" />
  </div>
  <?php endif; ?>
</footer>
<?php endif; ?>

CSS code:

Code: Select all

@charset "UTF-8";
:root, [data-bs-theme="light"] {

/* Generelle footer-stilarter */
.footer-container {
  background-color: #f8f9fa; /* Lys grå baggrund */
  padding: 20px;
  color: #333; /* Mørk tekstfarve */
}

/* Stil for footer-top-box */
.footer-top-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Stil for individuelle moduler i footer-top-box */
.footer-top-box .card {
  flex: 1 1 calc(25% - 20px); /* Juster bredden efter behov */
  margin: 10px;
  background-color: #fff; /* Hvid baggrund for moduler */
  border: 1px solid #ddd; /* Lys grå kant */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

/* Stil for footer-bottom-box */
.footer-bottom-box {
  text-align: center;
  padding: 10px;
  background-color: #e9ecef; /* Lysere grå baggrund */
  border-top: 1px solid #ddd;
}

/* Responsiv tilpasning */
@media (max-width: 768px) {
  .footer-top-box .card {
    flex: 1 1 calc(50% - 20px); /* To kolonner på tablets */
  }
}

@media (max-width: 480px) {
  .footer-top-box .card {
    flex: 1 1 100%; /* En kolonne på mobil */
  }
}

[Mr. Wimpy]

First: I see you are editing Cassiopeia. Your changes will be lost when Joomla updates.
Create a child template of Cassiopeia and use that!

HTML
The classes "footer-top-box" and "footer-bottom-box" are both on the module class and on the div containing the modules.
CSS applied to .footer-top-box and .footer-bottom-box will apply twice and screw up your design.

"footer-top-box" and "footer-bottom-box" on the module div is the module position (from the card layout).
Rename the classes of the containing div to something else, like "footer-top-container" and "footer-bottom-container".
(Or rename your module positions)

CSS
Remove the CSS you created (temporary copy it to an empty file) and see if you still need it.

Code: Select all

:root, [data-bs-theme="light"] {

does not have a closing }.
But the line may be removed as well, doesn't seem to do anything at the moment.

[gerner]

Thanks. I have changed the php code to something below, the and remove the CSS codes then boxes show up, but not on line:

Code: Select all

<?php if ($this->countModules('footer-top-box') || $this->countModules('footer-bottom-box')) : ?>
<footer class="footer-top-container">
  <?php if($this->countModules('footer-top-box')) : ?>
  <div class="footer-top-container">
    <jdoc:include type="modules" name="footer-top-box" style="card" />
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer-bottom-box')) : ?>
  <div class="footer-bottom-container">
    <jdoc:include type="modules" name="footer-bottom-box" style="card" />
  </div>
  <?php endif; ?>
</footer>
<?php endif; ?>

Try see: https://jo5.dykkerhulen.dk/index.php

[Mr. Wimpy]

footer class should stay footer-container.
(else you again have the double class issue)

CSS to set 3 columns:

Code: Select all

.footer-top-container {
  display: grid;
  gap: 1em;
}

@media (min-width:768px) {
  .footer-top-container {
    grid-template-columns: repeat(3,1fr);
  }
}

* The boxes get a space (gap) between them of 1em. On smaller screens (<767px) the boxes are below each other. On bigger screens (>768px) the boxes are in 3 columns of equal width (1fr).

[gerner]

Thanks that helped - Now the issue is, that the width of the boxes go to the screens sides and does not follow the rest of the design. Try see: https://jo5.dykkerhulen.dk/index.php

How do I get the boxes in line so they have the same width as the rest of the site?

[Pavel-ww]

How do I get the boxes in line so they have the same width as the rest of the site?

Hi. Here is.

Code: Select all

.footer-container {
	display: grid;
	grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,19.875rem))[main-end]minmax(0,1fr)[full-end];
	gap: 1em;
}
.footer-container > div {
	grid-column: 2/-2;
}

Add it above the other code

1.jpg

[gerner]

Thanks a lot to everyone - it fixed my issue and I know now how to add more boxes

[Mr. Wimpy]

Reminder:
Create a child template of Cassiopeia and continue working on the child template.
Your changes to the Cassiopeia template itself will be lost after a Joomla update.
https://docs.joomla.org/J4.x:Child_Templates/en

[gerner]

Reminder:
Create a child template of Cassiopeia and continue working on the child template.
Your changes to the Cassiopeia template itself will be lost after a Joomla update.
https://docs.joomla.org/J4.x:Child_Templates/en

Yes - Did that and its working, thanks for the reminder.