Schatten und Hintergrundfarbe von Dropdown-Menüs in jeder duplizierten Vorlage
2 Jahre 2 Wochen her - 2 Jahre 2 Wochen her #5409
von t1
Schatten und Hintergrundfarbe von Dropdown-Menüs in jeder duplizierten Vorlage wurde erstellt von t1
Darf ich auf Englisch schreiben?
Thank you for the great Joomla template.
I have read also "Schatten im Dropdown-Menü" by Andreas, and confirmed the css code below works in the user.css under my media\templates\site\allrounder\css\ .
----CODE 1
#topmenu ul.nav > li a,
#topmenu ul.nav > li span.separator {
text-shadow: none;
}
#topmenu ul.nav > li a:hover,
#topmenu ul.nav > li span.separator:hover {
background-color: #ccc;
----
However, I have 3 independent menus in my single Joomla site. Each of these menus has different color and appearance. So I duplicated from the default Allrounder templte to three. There are at least 4 Allrounder templates in my single Joomla: Default, Tmplt1, Tmplt2, Tmplt3.
I was able to set most colors in each duplicated template using "Dropdown Menu Colors" but cannot not set the background color at hovering and the permanent on/off of shadow.
Because I want to also remove underline and font-weight, I added some lines of code to the "Advanced Template Options" - "Custom CSS Code" of each duplication:
----CODE 2
/* Remove underline from menu items. */
a:hover,
a:focus {
text-decoration: none;
}
/* Change bold font-weight to normal. */
.mod-menu li.nav-item a:hover,
.mod-menu li.nav-item a:active,
.mod-menu li.nav-item a:link,
.mod-menu li.nav-item a:focus {
font-weight: normal;
}
----
The CODE 2 in the "Advanced Template Options" - "Custom CSS Code" of each duplication works well, but the CODE 1 does not.
How should I modify CODE 1 to specify "the permanent on/off of text-shadow" and "the background colors at hover" of menu items using each "Advanced Template Options" of the multiple duplicated templates? Or is there another way?
Thanks in advance.
(Bitte antworten Sie natürlich auf Deutsch. Ich verwende maschinelle Übersetzung. Meine Muttersprache ist nicht Englisch und mein Englisch kann unvollkommen sein).
(Edited to add on April 5 2023 UTC)
My sentence about disabling underlining might mislead you all as if it reduces accessibility. I'm planning to remove the underline by default and apply the Joomla 4 Accessibility Features to the front-end (System - Manage - Plugins - System - Additional Accessibility Features - Site Section) so that the visitors can select on/off of underline.
Thank you for the great Joomla template.
I have read also "Schatten im Dropdown-Menü" by Andreas, and confirmed the css code below works in the user.css under my media\templates\site\allrounder\css\ .
----CODE 1
#topmenu ul.nav > li a,
#topmenu ul.nav > li span.separator {
text-shadow: none;
}
#topmenu ul.nav > li a:hover,
#topmenu ul.nav > li span.separator:hover {
background-color: #ccc;
----
However, I have 3 independent menus in my single Joomla site. Each of these menus has different color and appearance. So I duplicated from the default Allrounder templte to three. There are at least 4 Allrounder templates in my single Joomla: Default, Tmplt1, Tmplt2, Tmplt3.
I was able to set most colors in each duplicated template using "Dropdown Menu Colors" but cannot not set the background color at hovering and the permanent on/off of shadow.
Because I want to also remove underline and font-weight, I added some lines of code to the "Advanced Template Options" - "Custom CSS Code" of each duplication:
----CODE 2
/* Remove underline from menu items. */
a:hover,
a:focus {
text-decoration: none;
}
/* Change bold font-weight to normal. */
.mod-menu li.nav-item a:hover,
.mod-menu li.nav-item a:active,
.mod-menu li.nav-item a:link,
.mod-menu li.nav-item a:focus {
font-weight: normal;
}
----
The CODE 2 in the "Advanced Template Options" - "Custom CSS Code" of each duplication works well, but the CODE 1 does not.
How should I modify CODE 1 to specify "the permanent on/off of text-shadow" and "the background colors at hover" of menu items using each "Advanced Template Options" of the multiple duplicated templates? Or is there another way?
Thanks in advance.
(Bitte antworten Sie natürlich auf Deutsch. Ich verwende maschinelle Übersetzung. Meine Muttersprache ist nicht Englisch und mein Englisch kann unvollkommen sein).
(Edited to add on April 5 2023 UTC)
My sentence about disabling underlining might mislead you all as if it reduces accessibility. I'm planning to remove the underline by default and apply the Joomla 4 Accessibility Features to the front-end (System - Manage - Plugins - System - Additional Accessibility Features - Site Section) so that the visitors can select on/off of underline.
Letzte Änderung: 2 Jahre 2 Wochen her von t1.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
2 Jahre 1 Woche her - 2 Jahre 1 Woche her #5410
von t1
Solved.
Instead of overriding background-image we can do this by overriding the related variable (See code below).
I recommend to the author. Following lines seems to be necessary in template.css under media\templates\site\allrounder\css. These few lines give the output more accessibility to visitor with a disability (including a decline in vision with aging) and dramatically improve the power of express by this template.
----Recommended change in template.css
#topmenu ul.nav > li a:hover,
#topmenu ul.nav > li span.separator:hover {
color: var(--allrounder-dropdown-li-a-font-hover-color);
background-color: var(--allrounder-dropdown-li-a-bg-hover-color); /* added */
}
#topmenu ul.nav > li a:active, /* added */
#topmenu ul.nav > li span.separator:active { /* added */
color: var(--allrounder-dropdown-li-a-font-active-color); /* added */
background-color: var(--allrounder-dropdown-li-a-bg-active-color); /* added */
} /* added */
----
----Example CODE 3 in "Advanced Template Options" of each template
:root {
--allrounder-dropdown-l2-ul-li-a-bg-hover-color: #099;
--allrounder-dropdown-li-a-font-hover-color: #03f;
--allrounder-dropdown-li-a-bg-hover-color: #099; /*added variable*/
--allrounder-dropdown-li-a-bg-active-color: #fc0; /*added variable*/
}
----
Don't forget to assign pages using "Menu Assignment" of each duplicated template. The code in the default template (with star in the template styles list) would be used if you forget.
Danke!
Thank you again for the flexible great template.
Instead of overriding background-image we can do this by overriding the related variable (See code below).
I recommend to the author. Following lines seems to be necessary in template.css under media\templates\site\allrounder\css. These few lines give the output more accessibility to visitor with a disability (including a decline in vision with aging) and dramatically improve the power of express by this template.
----Recommended change in template.css
#topmenu ul.nav > li a:hover,
#topmenu ul.nav > li span.separator:hover {
color: var(--allrounder-dropdown-li-a-font-hover-color);
background-color: var(--allrounder-dropdown-li-a-bg-hover-color); /* added */
}
#topmenu ul.nav > li a:active, /* added */
#topmenu ul.nav > li span.separator:active { /* added */
color: var(--allrounder-dropdown-li-a-font-active-color); /* added */
background-color: var(--allrounder-dropdown-li-a-bg-active-color); /* added */
} /* added */
----
----Example CODE 3 in "Advanced Template Options" of each template
:root {
--allrounder-dropdown-l2-ul-li-a-bg-hover-color: #099;
--allrounder-dropdown-li-a-font-hover-color: #03f;
--allrounder-dropdown-li-a-bg-hover-color: #099; /*added variable*/
--allrounder-dropdown-li-a-bg-active-color: #fc0; /*added variable*/
}
----
Don't forget to assign pages using "Menu Assignment" of each duplicated template. The code in the default template (with star in the template styles list) would be used if you forget.
Danke!
Thank you again for the flexible great template.
Letzte Änderung: 2 Jahre 1 Woche her von t1.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
Ladezeit der Seite: 0.182 Sekunden