Just Starting to Modify Cassiopeia

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
aitim
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun May 15, 2022 8:46 pm

Just Starting to Modify Cassiopeia

Post by aitim » Sun May 15, 2022 9:14 pm

What I am going to do is logging the procedures I go though in modifying Cassiopeia to make it look and behave exactly as I want it to look and behave. There is a lot of work involved learning how the template, in it's current form, was designed and what the designers had in mind when creating it. Once I completely understand it, I will then start hacking away. Actually I am starting the hacking process as I go. I will turn my logs into a template customization manual when finished.

I got lost in the WordPress weeds for a year, but will start digging into Joomla 4 again because I just like the way Joomla is structured, meaning I like the fact that Joomla does have well defined structure. I used to go by webdevtim or tmichel, buy those accounts have become inactive and the email addresses associated with those accounts are now defunct, so I am now aitim.

I installed the latest version of Joomla 4.1.3 and made some minor modifications to the header, which isn't finished, but it serves as an indication of where I am going with modification. Mostly removing display: flex for many containers and changing them to display: grid; with grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); used instead of display: flex. I love display: grid; and though Cassiopeia uses display: grid in some instances, I like display: grid to be used for all aspects of layout including nesting grids to achieve precise layout characteristics that are at the same time adaptable.

This is the dev site I am using to test this out. https://www.sagacicweb-dev.com/

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27899
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Just Starting to Modify Cassiopeia

Post by imanickam » Mon May 16, 2022 2:56 am

Welcome to the Joomla! forum.

The following documents would be of help in understanding how the template Cassiopeia is structured and how to use custom css changes in the template:
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Joomla! Core - Tamil (தமிழ்) Translation Team Coordinator
ex-Joomla! Translations Coordination Team
Eegan - Support the poor and underprivileged

aitim
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun May 15, 2022 8:46 pm

Re: Just Starting to Modify Cassiopeia

Post by aitim » Mon May 16, 2022 11:56 pm

imanickam wrote:
Mon May 16, 2022 2:56 am
Welcome to the Joomla! forum.

The following documents would be of help in understanding how the template Cassiopeia is structured and how to use custom css changes in the template:
Thank you so much, imanickam, that is very helpful. I will read all three documents.

Cassiopeia Template customization is what I was already following.

Template Folders and Files is very useful, though I already figured out where everything is located now.

Having a Case Study Available is immensely useful because it informs us of the minimum elements needed to create a functioning template.

Like I said, I will document as I go and present a step by step procedure for creating at Joomla 4.1.3 template when I am done.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 28943
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Just Starting to Modify Cassiopeia

Post by Per Yngve Berg » Tue May 17, 2022 9:39 am

The Bootstrap documentation: https://getbootstrap.com/docs/5.1/layout

aitim
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun May 15, 2022 8:46 pm

Re: Just Starting to Modify Cassiopeia

Post by aitim » Tue May 17, 2022 11:48 pm

Per Yngve Berg wrote:
Tue May 17, 2022 9:39 am
The Bootstrap documentation: https://getbootstrap.com/docs/5.1/layout
Thanks Per Yngve Berg, I have already read the bootstrap documentation before, but any new reference is always helpful.

I will not be using bootstrap for layout.

Bootstrap is useful for extensions compatibility and it is very useful for creating forms and other webpage elements, quickly and effortlessly. Alerts, Badge, Breadcrumb, Buttons, Button group, Card, Carousel, Close button, Collapse, Dropdowns, List group, Modal, Navs & tabs, Navbar, Offcanvas, Pagination, Placeholders, Popovers, Progress, Scrollspy, Spinners, Toasts, Tooltips, are useful shortcuts that can speed up the process of creating templates.

The one thing that bootstrap doesn't address is 4k, 5k, 6k screens which are now coming into more widespread use. CSS Grids handles that deftly. xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px is just not adequate any more. What about xxxl 1800px, xxxxl 3000px, xxxxxl 4500px, xxxxxxl 5500px.

Using something like grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); handles many situations, but when wanting to optimize the experience on large pixel count screens media queries will still be needed for the larger pixel dense screens. I always want to maximize readability on whatever screen the content is being viewed on. 320px on 6x screens would be way too small, on that screen 640px would be more like it. That means at that resolution, 6144x3160, I could get 9 panels of 640px width across the screen, and on a 16.5 inch laptop, that would still be pretty small panels, less than 2 inches each. On a 2k screen I could only get 3 panels at 640px each, 5.5inches, 6 panels at 320px, 2.5 inches. I would choose to use that pixel density to make my content look more appealing rather than use it to cram more content in.

Never the less, thanks so much, I appreciate the suggestions and would welcome criticism to what I just said.

jeabramian
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Jun 21, 2022 6:02 pm

Re: Just Starting to Modify Cassiopeia

Post by jeabramian » Fri Jun 24, 2022 3:35 pm

Hello aitim,
I'm trying to adjust the casseopeia template myself and what you are doing would bee very helpful. Any advances yet?
Thanks a lot!
Jorge


Post Reply

Return to “Templates for Joomla! 4.x”