Help

Joomla 4 has changed the float options for images: there is no select box with "right", "left" or "none" anymore, but a field to insert a css class. Cassiopeia offer the classes "float-start" for positioning the full image on the left (on the right for rtl languages), "float-end" for positioning the full image on the right (on the left for rtl languages) and "float-none" for no floating.

Of course it is also possible to modify the position of the image using own css classes.

Example "float-start"

Example "float-end"

Example "float-center" (own css definition in the user.css file)

.float-center.item-image {
  text-align: center;
}

You can use the classes globally for all articles, go to Content -> Options -> Editing Layout and enter the class you want in the field "Full Text Image Class".

Or you can use the classes on each individual article:

With classes you have more flexibility to modify your article images. What about creating a class "circle" with the definition

.circle.item-image {
    border-radius: 50%;
}

to create rounded images?

Module chromes:

• card
• noCard

Module positions:

Grid definition:

.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 .";
}

The options can be configured globally (Content -> Options) or in the menu item.

What you maybe know from Joomla 3

• Number of Leading Articles
• Number of Intro Articles
• Number of Columns
• Multi Column Direction -> Down creates a mansory layout, Across a column layout
• Number of Links

What is new in Joomla 4

• Leading Article Class
• Article Class
• Linked Intro Image

Cassiopeia has already some useful modifier classes for category blog:

• boxed
• image-right
• image-left
• image-alternate (in combination with image-right or image-left)
• image-bottom

On Styles / Black and white you will see a category blog with following configuration and some custom css

.bw {
  --cassiopeia-color-primary: #000;
  --cassiopeia-color-hover: #999;
  --cassiopeia-color-link: #666;
}
.bw .container-banner .banner-overlay {
	height: 40vh;
}

Click here to see the result

This menu item has a page class "own"

You can user custom CSS (user.css) to change things. For example the colours. Cassiopeia uses some custom css properties (variables). The background of header and footer are using these variables.

You can re-define the variables for a specific HTML element or a class. If you write following css code in your user.css file, you will change the colours on the page with the class "own".

.own {
  --cassiopeia-color-primary: #2F9C95;
  --cassiopeia-color-hover: #174F4B;
  --cassiopeia-color-link: #1C5E5A;
}