See Backend - the basic fontsize is variable, with default 16px but webdesiger can select another basic fontsize.

Can or should we have such a parameter?

Steps to reproduce the issue

See #71 (comment) .

Expected result

Either $white or color("white") is used, but not both, I'd prefer $white.

Actual result

A mix of $white and color("white") is used throughout Cassiopeia's scss files.

System information (as much as possible)

Current "development" branch of this repository + PR #71 applied = "development-cassiopeia-design" branch.

Steps to reproduce the issue

https://issues.joomla.org/tracker/joomla-cms/30547

Steps to reproduce the issue

Install the the metismenu branch (https://github.com/joomla/cassiopeia/tree/4.0-dev-metismenu-frontend), create a menu with submenus (using menu heading as level 0) on position "menu" and alternative layout "metismenu". Try to open and close the submenu.

Expected result

The submenu closes and disappears.

Actual result

The submenu stay open or somehow visible.
The problem is related with the class "mm-collapsing", but because I not fit in javascript, I don't know how to debug it :-(

System information (as much as possible)

Additional comments

Change the structure from index.php to adapt to the new design. The names of the positions shouldn't change. We should work with sections instead of div container.

• Logo + Search

• Menu

• Banner -> we can eventually create a new chrome to have an image with text overlay

• Top-A Modul -> Main Features, it can be a custom module or one of the articles module (category, latest, etc.)

• Main Content -> Blog or Featured Layout

- [ ] Bottom-A or Bottom-B -> Custom module, menu

• Footer

- [ ] Login module has to be re-styled.. it looks very J 1.5 ;-)

That is for the "homepage". Later we can go further with the sub-pages.

Steps to reproduce the issue

Click Autor Login in the menu, or the About.

Expected result

The whole width of content is used

Actual result

• home
• single article
• blog view
• category view
• category list
• image gallery
• video gallery
• contact form
• error.php
• component.php
• offline.php

Steps to reproduce the issue

Check the navbar at different display sizes. The hamburger icon appears at 991px width, but the menu is still horizontal

Expected result

The menu changes to vertical, when hamburger menu appears.

Actual result

The menu is still horizontal.

Is your feature request related to a problem? Please describe.

The new design shows modules in a special card layout

Describe the solution you'd like

Add and alternative layout

The metismenu has been implemented as a template override.

This means it is ONLY available to cassiopeia and EVERY template will need to copy it and include it with the files they ship if they want a usable menu.

It should be a core layout and if necessary some additional css for cassiopeia to match that templates style.

Whenever you create an override in a core template it should set off a big warning sign that you're doing something wrong.

Steps to reproduce the issue

bottom menu is used to create a back-to-top button. This is the wrong way to do this.

Expected result

menu followed active parent

Actual result

text static

System information (as much as possible)

Additional comments

use joomla/joomla-cms#30441 instead

Issue for PR #46 .

Steps to reproduce the issue

Install the latest testing branch and then blog sampe data, see #37 .

Check on frontend by selecting different menu teims if the active item on top level is visualized somehow.

In J4 standard Cassiopeia it looks like underlined, but in fact it was a border. E.g with blog sample data installed, active menu item = "About":

In the Cassiopeia development here I think it worked in past (but am not 100% sure), but now it doesn't work anymore:

Ping @hans2103 .

Steps to reproduce the issue

Activate the accessibility plugin. Go to frontend and choose "invert colour" in the plugin.

Expected result

Text is white on black.

Actual result

Text is white on white

System information (as much as possible)

win10, firefox

Additional comments

Hello!
Can anyone explain what this is and how it's used?

$wa = $this->getWebAssetManager();

// Enable assets
$wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
->useStyle('template.user')
->useScript('template.user');

$wa->registerStyle

$this->getPreloadManager()

Thank you!

Steps to reproduce the issue

make articles with intro image, full image

https://www.msn.com/de-de/nachrichten/politik/nordrhein-westfalen-rechtsextreme-chat-gruppen-bei-polizei-in-nrw-aufgedeckt/ar-BB195F5V?ocid=msedgdhp

Expected result

Good design in template overrides

Additional comments

Is your feature request related to a problem? Please describe.

The new Layout shows a disc layout for modules

Describe the solution you'd like

Let we make that by users (bootstrap) or can we add a class or a layout?

Additional context

The photos used in Joomla sample data look rather old and not attractive. New images should be added to the sample data.
Joomla (marketing) has a license to 123rf.
@marcodings can help here.

The use of css variables instead of scss ones will improve the modularization of the css code. For example we can create a css file for modules stuff that is only loaded when a module is in use.

Examples:
// Global
$cassiopeia-template-color-dark:
$cassiopeia-template-color:
$cassiopeia-container-main-bg:
$cassiopeia-border-color:

can be changed to
// Global
--cassiopeia-template-color-dark:
--cassiopeia-template-color:
--cassiopeia-container-main-bg:
--cassiopeia-border-color:

Steps to reproduce the issue

Login to the frontend and edit your prfile

The labels seem to be part of the previous input field.

Expected result

Labels are near to their input field

Actual result

Labels seem to belong to the field above

System information (as much as possible)

Additional comments

Steps to reproduce the issue

If in clobal configuration editing for modules and menus is enabled
then the menu has an edit icon and menuitems in default menus get an edit symbol.
It is added via js, appears on hover and is worst UX

Expected result

In the metismenu appears an icon which enables editing of a menu item

Actual result

There is an icon for editing the module but no editing of menu items is possible

Additional comments

see also
https://issues.joomla.org/tracker/joomla-cms/30639

Steps to reproduce the issue

Have a menu item of typ heading in the metismenu. It is not styled as menuItem.

Problem identified

Submenus in the metismenu could have better distance or contrast against the first level of the menu. As a proposal I have added two fake metis menu screens how a solution could look like.

Proposed solution

Open questions

Can we have two different layouts? Vertical and horizontal?
Meanings?

What needs to be fixed

Check the new cassiopeia in fluid mode

Why this should be fixed

The content block seems to have not enough paddung/margin. Maybe it is because sample texts are not decorative?

Is your feature request related to a problem? Please describe.

The template cassopeia does not have a accessible drop down menu with n sublevels

Describe the solution you'd like

Write an alternative layout for the module mod_menu based on the js variant of metismenu
Must be also designed and tested for rtl languages

Additional context

Steps to reproduce the issue

Install the blog data. Use dev tools and inspect the home page as if an iPhone

Expected result

Images scale as they have been getting smaller and smaller to fit the panels

Actual result

Image stops scaling and breaks out of the panel
See image

System information (as much as possible)

Chrome latest

Additional comments

Is your feature request related to a problem? Please describe.

Best practice for accessible templates is consequent usage of landmarks (sections).

Describe the solution you'd like

Replace divs by sections where possible

Additional context

This has been already started by Hans Kuipers - must be integrated into the project

Is your feature request related to a problem? Please describe.

The new design shows a card layout for blog layout
This enables us to add the params for "number of colums" from 3.9

Describe the solution you'd like

Write the layout for caregory blog

Steps to reproduce the issue

• Add a Smart Search-Module at Position "Search"
• Add a Menu-Module at Position "Menu"
• Compare Space at last Menu-Element between
  LTR and
  
  RTL
  

Expected result

Same Space at RTL as at LTR

Actual result

Missing Space at RTL

System information (as much as possible)

php: Linux lamp121.cloudaccess.net 2.6.32-673.8.1.lve1.4.3.1.el6.x86_64 #1 SMP Thu May 5 16:06:47 EDT 2016 x86_64
dbserver: mysql
dbversion: 5.7.29-cll-lve
dbcollation: utf8_general_ci
dbconnectioncollation: utf8mb4_general_ci
dbconnectionencryption:
dbconnencryptsupported: true
phpversion: 7.3.19
server: Apache
sapi_name: cgi-fcgi
version: Joomla! 4.0.0-beta4-dev Development [ Mañana ] 29-July-2020 18:21 GMT
useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:80.0) Gecko/20100101 Firefox/80.0

Steps to reproduce the issue

Install Sample data, read the text "Working on your site". The Text is not up to date, it is based on former joomla versions.

Help of a native speaker would be appreciated.

Actual result

One of the first things you will probably want to do is change the site title and tag line and to add a logo (what is a tag line?)

to totally change the look of your site you will probably want to install a new template. In the Extensions menu select Extensions Manager and then go to the Install tab (has changed in j4)

When you work with modules, articles or weblinks setting the Access level to Registered (replace weblinks by ?)

What needs to be fixed

Te metis menu toggler button for opening/closing the submenu is rather thin. It is not really visible when a menuItem cintains a link and a button.

Why this should be fixed

Better UX

How would you fix it

Make the button with contrast color, make the arrow better visible.

Side Effects expected

Is your feature request related to a problem? Please describe

Sample Data represent Joomla after installation. The Sample texts are old and it is a chance now to mke good marketing.

Describe the solution you'd like

I would like to have good texts for sample data and good icons and images.
We can present J4 and new features of J4 or anything which helps to make the prodoct attractive.

Additional context

Sample data can be expanded and changed independent from other development.

What needs to be fixed

Impossible to open a submenu in this case:

If a module is displayed without title AND the user may edit, then the area for the edit button must have mor height

Is your feature request related to a problem? Please describe.

Version 3.x has params for multi column layout. How can we provide this in cassiopeia
In https://issues.joomla.org/tracker/joomla-cms/18516 the multicolumn layout is done and merged.

Is something left to do for this team?

Steps to reproduce the issue

Input group of the search module - rounded corner vs. input group

Expected result

like as i.e. in the login

Actual result

Steps to reproduce the issue

As title say:

Expected result

Menu- and Search-Module vertically aligned.

System information (as much as possible)

php: Linux lamp110.cloudaccess.net 3.10.0-962.3.2.lve1.5.24.7.el6h.x86_64 #1 SMP Mon Dec 17 12:02:35 EST 2018 x86_64
dbserver: mysql
dbversion: 5.7.30-cll-lve
dbcollation: utf8_general_ci
dbconnectioncollation: utf8mb4_general_ci
dbconnectionencryption:
dbconnencryptsupported: true
phpversion: 7.3.21
server: Apache
sapi_name: cgi-fcgi
version: Joomla! 4.0.0-beta4-dev Development [ Mañana ] 29-July-2020 18:21 GMT
useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:80.0) Gecko/20100101 Firefox/80.0

RFC about changes on PR #18 .

Problem identified

The use of local fonts is not really limited to Google Fonts.

When PR #18 will be ready we will be able to download and use fonts from any fonts provider or vendor as long as they are available in woff and woff2 format.

So naming the option "Google Fonts" might be at least misleading.

I ask all to suggest a better naming or vote for some suggested by others, so we can see what would be the best, most widely accepted naming.

We could use instead of "Google Fonts" something like:

• 3rd Party Fonts
• Extra Fonts
• Local Fonts
  ...

Another thing is that we could use fronts from more than one vendor, so it might make sense to group them by vendors in the dropdown, like we now group e.g. the layouts by templates in module's layout selection.

We could use sub-folders to group the scss files (and the compiled css) by the vendors, which would also allow us to build that grouped dropdown options.

E.g. if one adds fonts from a vendor "SomeVendor", there would be following folders for scss and css:

• templates/cassiopeia/scss/fonts/Google
• templates/cassiopeia/scss/fonts/SomeVendor
• templates/cassiopeia/css/fonts/Google
• templates/cassiopeia/css/fonts/SomeVendor

The compile script for the scss can already handle that, i.e. the sub-folders don't need to be hard-coded in the script. It also creates the css folders if they don't exist, based on the scss folders.

In the dropdown one could see something like:

• From Google:
  -- josefin-sans
  -- montserrat
• From SomeVendor:
  -- this-font
  -- that-font

Proposed solution

If desired I can implement it.

Open questions

See above:

• Is it desired to use more general naming?
• If so, suggest names.
• Is it desired to group fonts selection by vendors?

Feature Request

The user must be able to select a colour palette. In the backend template atum, this is possible.

We can either define some nice and a11y colour palettes or use the solution from atum.

Most important: The solution must be fast.

A colour palette must be accessible - contrast ratio, colour blindness.

Steps to reproduce the issue

Compare Tag-Align:

RTL	LTR

Expected result

RTL-Tag right-aligned

Actual result

RTL-Tag not right-aligned

System information (as much as possible)

php: Linux lamp131.cloudaccess.net 3.10.0-714.10.2.lve1.5.17.el6h.x86_64 #1 SMP Mon Apr 30 13:48:47 EDT 2018 x86_64
dbserver: mysql
dbversion: 5.7.24-cll-lve
dbcollation: utf8_general_ci
dbconnectioncollation: utf8mb4_general_ci
dbconnectionencryption:
dbconnencryptsupported: false
phpversion: 7.3.21
server: Apache
sapi_name: cgi-fcgi
version: Joomla! 4.0.0-beta4-dev Development [ Mañana ] 29-July-2020 18:21 GMT
useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:80.0) Gecko/20100101 Firefox/80.0

Problem identified

The templat description is:
Continuing the space theme (Solarflare from 1.0, Milkyway from 1.5 and Protostar from 3.0), Cassiopeia is the Joomla 4 site template based on Bootstrap 4.

Open questions

Change the based on Bootstrap 4.?

The search module in cassiopeia need a11y test in every variant, just as confirmation. AXE and Wave say that the form is ok.

• with label and / or icon
• in extended form
• as a component
• With search results
• on different places

Steps to reproduce the issue

Having an installation with the current development branch of this repository or the corresponding installation package (see PR #48 for details), change <rtl>0</rtl> to <rtl>1</rtl> in file language/en-GB/langmetadata.xml and reload the front page.

Expected result

Background gradient of header and footer changes direction, too.

Actual result

• LTR:
  
• RTL:
  

=> Search box button not really visible when RTL.