CSS questions and 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
LaurentR2D2
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Thu Oct 02, 2008 5:27 am

CSS questions and Cassiopeia

Post by LaurentR2D2 » Sat Dec 03, 2022 1:33 pm

Hello,

I have some questions about Cassiopeia

1) I have set up a horizontal menu with a hover effect on the menu items that works well with the following css code:

Code: Select all

.container-header .mod-menu a:hover {
background-color: transparent;
color: #fef6a7;
/*font-size: 1.3em;*/
text-shadow: 4px 4px 3px #000;
filter: dropshadow(color=#000, offx=4, offy=4);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
/*-ms-transform: scale(1.2);*/
}
So I took the same css attributes replacing hover with active and removing the transformation effects for the selected menu, but it doesn't work. I tried other combinations of css attributes, without success.
Capture d’écran menu jpg.jpg
2) I can't change the color of the footer. The class of this one is grid-child which I can't touch without changing the color of everything above.
Capture d’écran footer jpg.jpg
3) I would like to change the yellow vertical bar that separates the center part from the right side. The class that corresponds to this column is column-gap, but I can't touch it without affecting the whole layout of the site. What can I do to reduce it or change its color?

I have white horizontal bars of different sizes that appear on some pages, like the one in the above screenshot or the one below. I don't know where they come from, I can't find them with the web inspector
Capture d’écran bande jpg.jpg
Thank you
You do not have the required permissions to view the files attached to this post.

User avatar
cmbay
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Thu Dec 31, 2009 11:53 pm
Location: Oregon, USA

Re: CSS questions and Cassiopeia

Post by cmbay » Sat Dec 03, 2022 3:23 pm

Confirm that you are placing your own CSS selectors in your user.css file.
Does your CSS pass a validator without errors?
Charles

LaurentR2D2
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Thu Oct 02, 2008 5:27 am

Re: CSS questions and Cassiopeia

Post by LaurentR2D2 » Sat Dec 03, 2022 6:41 pm

cmbay wrote:
Sat Dec 03, 2022 3:23 pm
Confirm that you are placing your own CSS selectors in your user.css file.
Does your CSS pass a validator without errors?
I've made a child template of Cassiopeia and created a user.css. I've made a validation of the user.css and got two errors and three warnings.

Errors :

42 Error during grammatical analysis. =#000, offx=4, offy=4)
55 Error during grammatical analysis. =#000, offx=4, offy=4)

Warnings are :

30 The property -webkit-border-radius is a proprietary extension
31 The property -moz-border-radius is a proprietary extension
43 The property -moz-transform is a proprietary extension
44 The property -webkit-transform is a proprietary extension
45 The property -o-transform is a proprietary extension

The errors don't stop the effect from working on Safari, Google Chrome and Firefox. The only error I get is on Firefox where the arrow of the collapsible dropdown menu is under the text of the menu instead of the right.
Capture d’écran 2022-12-03 à 19.38.42.png
And I don't use the offset effect in the active menu.

Code: Select all

.container-header .mod-menu a:active {
	background-color: transparent;
	color: #fef6a7;
	/*font-size: 1.3em;*/
	text-shadow: 4px 4px 3px #000;
   filter: dropshadow(color=#000, offx=4, offy=4);
}
You do not have the required permissions to view the files attached to this post.

User avatar
cmbay
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Thu Dec 31, 2009 11:53 pm
Location: Oregon, USA

Re: CSS questions and Cassiopeia

Post by cmbay » Sat Dec 03, 2022 8:06 pm

LaurentR2D2 wrote:
Sat Dec 03, 2022 6:41 pm
The only error I get is on Firefox...
It is impossible to predict how a browser will render a page if you send it errors.
Fix the drop-shadow selector.
Charles

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 42359
Joined: Sat Apr 05, 2008 9:58 pm

Re: CSS questions and Cassiopeia

Post by Webdongle » Sat Dec 03, 2022 9:04 pm

LaurentR2D2 wrote:
Sat Dec 03, 2022 6:41 pm
...

I've made a child template of Cassiopeia and created a user.css. I've made a validation of the user.css and got two errors and three warnings.
...
Where did you create the user.css file?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

LaurentR2D2
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Thu Oct 02, 2008 5:27 am

Re: CSS questions and Cassiopeia

Post by LaurentR2D2 » Sat Dec 03, 2022 10:12 pm

cmbay wrote:
Sat Dec 03, 2022 8:06 pm
LaurentR2D2 wrote:
Sat Dec 03, 2022 6:41 pm
The only error I get is on Firefox...
It is impossible to predict how a browser will render a page if you send it errors.
Fix the drop-shadow selector.
Done, thank you. Now I have this :

Code: Select all

.container-header .mod-menu a:active {
	background-color: transparent;
	color: #fef6a7;
	/*font-size: 1.3em;*/
	text-shadow: 4px 4px 3px #000;
   filter: drop-shadow(4px 4px #000);
}
but the active attribute still doesn't work

LaurentR2D2
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Thu Oct 02, 2008 5:27 am

Re: CSS questions and Cassiopeia

Post by LaurentR2D2 » Sat Dec 03, 2022 10:16 pm

Webdongle wrote:
Sat Dec 03, 2022 9:04 pm
LaurentR2D2 wrote:
Sat Dec 03, 2022 6:41 pm
...

I've made a child template of Cassiopeia and created a user.css. I've made a validation of the user.css and got two errors and three warnings.
...
Where did you create the user.css file?
Here :

Code: Select all

media/templates/site/cassiopeia_savs_2022_jommla4/css/user.css
I have created and I'm editing the user.css file inside Joomla template editor

User avatar
cmbay
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Thu Dec 31, 2009 11:53 pm
Location: Oregon, USA

Re: CSS questions and Cassiopeia

Post by cmbay » Sun Dec 04, 2022 12:39 am

Confirm that the page passes both the CSS validator and the HTML validator without errors.
In Firefox, clear the cache. (Firefox really hangs on to CSS files.)
Open the Firefox Web Developer tool. (F12)
Check the console tab for errors.
If no errors are reported there, change to the Inspector tab.
Then pick the element of interest from the page.
Check the Computed CSS values to see what is in use.
If the wrong CSS is used, you might have to increase the specificity of your own CSS selector.
Charles

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 893
Joined: Tue Jun 30, 2020 12:17 pm

Re: CSS questions and Cassiopeia

Post by Pavel-ww » Sun Dec 04, 2022 7:35 am

Hi. First of all. Always remember about optimization. Each unnecessary line of code worsens performance. These properties are not needed, delete them.

Code: Select all

-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
Vendor prefixes have not been needed for a long time for transform and border-radius properties. Only maybe -webkit- if you want support ancient Android 2.1 browser.
2.jpg
To set active state of menu item use this selector

Code: Select all

.container-header .mod-menu li.active a {
   /*some properties*/
}
Everything else is only after link to your site. I think all your issues can be resolved
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “Templates for Joomla! 4.x”