Configuring Cassiopeia

First of course, one must get the template set up.

There are two main options - the default, basic one which uses the "brand", which gives the opprtunity to enter the Site Title, and the Site Description, and the second option which is turn the "brand" OFF, and create a cutom module in position "below-top" to do what one wants.

These are the steps I have needed:

• Select the Site Template Styles and set:
  • Set the Template Preview option in Options.
  • Set the [Site] Title and the Tag Line [Site Description].
• Select Modules, and set the Menu module(s) position(s). Also the layout if required.
• Select Site Template, and modify "css" as below.

The template Title and Site Description do not shrink as one might expect. One might expect a long title to wrap on a smaller screen.

If one wants to "improve the template" so that it does, then the easy way is to take these steps:

• In the Site Template Style, advanced settings set Brand to No, thus disabling the Title and the Tag Line.
• Create a new Custom "Site Module". Set ist position to: "below-top", and enter something similar to the following code where the first line is the title which has a link to the site itself, and the second line which is the description:
• <div>
  <div><a href="/0a_Empty400/tips-and-tricks/configuring-cassiopeia?amp;view=featured"><span class="fs-2">CEMDC - Construction Engineering Management Document Control</span></a></div>
  <div><span class="fs-4">Performing routine mundane tasks accurately and quickly. Recording What, When, Who, Why</span></div>
  </div>
• Note the link is to the "home menu" - which emulates Joomla's default.
• Lastly, if you want to have images with the title & description, then one must use a grid. Inserting an image into the Brand is just not sensible.

These are my notes on the changes that I have made to Cassiopeia at the behest of the people whose web sites I manage, and of course my own. 

First one must create a file to hold the changes. This file shoule be named "user.css" and I note as follows:

• The file is located in the template's css directory. It may be created manually using file manager or whatever, or
• From within Joomla 4, System, Site Templates, Cassiopeia Details and Files,
  • click "New File", and the dialog displays
  • enter the name: user, and the type: css, DO NOT Save.
  • click css to select the folder, then Save it.
  • CHECK that it is in the css folder. If it is not delete it and start again.
• Whilst you are here, the Preview button may be disabled. Used options button and enable Preview Module Positions.

Now for the changes I have made to http://parkdavidson.co.uk/

When doing this you need to know the names of everything. The best way to do this to view the web site in your browser, and right click and select "inspect". there are two panes below the web site, so to find something's [an element's] name proceed as follows:

• In the left pane, click the horizontal arrow ▶ called a "BLACK RIGHT-POINTING TRIANGLE". It will change to ▼ and you will see more elements. 
• Select the element in the code ... it will be highlighted.
• On the right pane you will see everything related to it: for exampe "brand logo" is the web site title

One of the most infuriating things to me is that the Title is also an "href" to the site. So it is underlined. Using the technique above locate the element, and use the css code to remove it. The very best web site is https://www.w3schools.com/cssref/default.asp

Here is the css code to remove the underline. Simply put this in your user.css file and save it. To see it remember to refresh the web site - of course the inspect window may close when this happens. It is a slow process.

/* title remove underline */
.container-header .navbar-brand a{
text-decoration: none;
}

If using the custom module, then

/* title remove underline */
.container-below-top a{
text-decoration: none;
}

It is a good idea to make a comment to say what you are doing or testing. Next is font sizes for title and the tag line.

/* title set large font size */
.container-header .navbar-brand {
font-size: 3rem;
}

/* tag line set font size */
.container-header .site-description{
font-size: 1.7rem;
}

If using the custom module, this is not needed.

This all works fine. Noted that on a mobile, some text is not seen. For PD the text was shortened as follows:

• Title: Park Davidson & Co
• Tag: Choir Uniforms for Ladies