CSS questions and Cassiopeia

[LaurentR2D2]

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

[cmbay]

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

[LaurentR2D2]

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

[cmbay]

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.

[Webdongle]

...

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?

[LaurentR2D2]

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]

...

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

[cmbay]

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.

[Pavel-ww]

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