Cassiopeia divide module position topbar into 3 or 4

[irenuyam]

Hello.
I would like to divide the topbar position into 4 of the Cassiopeia template but I don't know how to code.
Anybody willing to help customize it?
Thank you.

[Mr. Wimpy]

You can add multiple modules to a position.

Then use CSS to adjust the way it looks.

[irenuyam]

You can add multiple modules to a position.

Then use CSS to adjust the way it looks.

Yes, I know.
But the modules stack vertically.
That is why I am asking if anybody can help me with a CSS code to divide the topbar into 3 or 4.

[Mr. Wimpy]

I should have read better...

There are several ways to achieve what you want.
See if one of the below options fits your needs.

Post the url to the page that displays your modules in the topbar so we can see the code and help you better.

Add the CSS of one of the options below to your user.css file.

Quick tutorial on how to create your user.css file by Tim Davis
https://www.[youtube].com/watch?v=0c2iNnszWuc

Option 1: Grid - automatically create columns
Modules are placed next to each other. The width of the modules is automatically scaled to fit inside the container.

Code: Select all

.container-topbar {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

* Change 200px to your own (minimum) width.

Option 2: Grid - fixed number of columns
Create 4 columns and span the modules accross multiple columns when on small(er) screens.

Code: Select all

.container-topbar {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(4,1fr);
}

.container-topbar > div {
  grid-column: span 4;
}

@media (min-width: 700px) {
  .container-topbar > div {
    grid-column: span 2;
  }
}

@media (min-width: 1000px) {
  .container-topbar > div {
    grid-column: span 1;
  }
}

[irenuyam]

I should have read better...

There are several ways to achieve what you want.
See if one of the below options fits your needs.

Post the url to the page that displays your modules in the topbar so we can see the code and help you better.

Add the CSS of one of the options below to your user.css file.

Quick tutorial on how to create your user.css file by Tim Davis
https://www.[[youtube]].com/watch?v=0c2iNnszWuc

Option 1: Grid - automatically create columns
Modules are placed next to each other. The width of the modules is automatically scaled to fit inside the container.

Code: Select all

.container-topbar {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

* Change 200px to your own (minimum) width.

Option 2: Grid - fixed number of columns
Create 4 columns and span the modules accross multiple columns when on small(er) screens.

Code: Select all

.container-topbar {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(4,1fr);
}

.container-topbar > div {
  grid-column: span 4;
}

@media (min-width: 700px) {
  .container-topbar > div {
    grid-column: span 2;
  }
}

@media (min-width: 1000px) {
  .container-topbar > div {
    grid-column: span 1;
  }
}

Thank you for this.
I will try them.
I am currently doing it in a local server so it won't be possible to access it from outside.

[irenuyam]

I should have read better...

There are several ways to achieve what you want.
See if one of the below options fits your needs.

Post the url to the page that displays your modules in the topbar so we can see the code and help you better.

Add the CSS of one of the options below to your user.css file.

Quick tutorial on how to create your user.css file by Tim Davis
https://www.[[youtube]].com/watch?v=0c2iNnszWuc

Option 1: Grid - automatically create columns
Modules are placed next to each other. The width of the modules is automatically scaled to fit inside the container.

Code: Select all

.container-topbar {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

* Change 200px to your own (minimum) width.

Option 2: Grid - fixed number of columns
Create 4 columns and span the modules accross multiple columns when on small(er) screens.

Code: Select all

.container-topbar {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(4,1fr);
}

.container-topbar > div {
  grid-column: span 4;
}

@media (min-width: 700px) {
  .container-topbar > div {
    grid-column: span 2;
  }
}

@media (min-width: 1000px) {
  .container-topbar > div {
    grid-column: span 1;
  }
}

By the way, this code can also be applicable for footer?

[Mr. Wimpy]

Yes you can. For footer the class is container-footer.

If the footer style is different than the topbar style, copy the css for .container-topbar and rename it to .container-footer.

If both containers have the same style you can...
(Notice the comma)

Code: Select all

.container-topbar,
.container-footer {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

[irenuyam]

Yes you can. For footer the class is container-footer.

If the footer style is different than the topbar style, copy the css for .container-topbar and rename it to .container-footer.

If both containers have the same style you can...
(Notice the comma)

Code: Select all

.container-topbar,
.container-footer {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

ok, thanks.
The 2nd option you gave worked for me.

[irenuyam]

Will the customizations that I added in my Cassiopeia template be affected if there will be an update of Joomla?
Thanks.

[Mr. Wimpy]

Your custom CSS in user.css will be save during updates.