Cassiopeia Demo
  • Blog
  • Help
  • Login
    • Blog
    • Category List
    • Articles
      • Millions
      • Love
      • Joomla
    • Masonry Layout
  • Typography
    • Other Style
    • Own Colours
    • Black and white
  1. You are here:  
  2. Home
  3. Help

Help

Positioning article images

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:

Parameters for images

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?

Rounded image

Grid, positions and chromes

Module chromes:

  • card
  • noCard

Module positions:

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

Category Blog

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

Screenshot category blog configuration

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

Own Colours

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

Page 1 of 2

  • 1
  • 2

Articles in this section

  • About
  • Category Blog
  • Grid, positions and chromes
  • Menu module
  • New feature: Workflows
  • Other Style
  • Own Colours
  • Positioning article images
Copyright © 2023 Cassiopeia Demo. All Rights Reserved.
Joomla! is Free Software released under the GNU General Public License.
My Blog
  • Login