cassiopeia menu in hoofdletters? Topic is solved

[jivjivjiv]

Hoi,

Ik heb joomla4 met de cassiopeia template. Nu gebruik ik een lettertype dat niet mooi is in kleine letters dus ik wil hoofdletters gebruiken in het menu maar dat gaat niet. Ergens hebben ze dit hard uitgezet omdat het slecht is voor de toegankelijkheid zag in in het developers forum.
In user.css krijg ik het niet voor elkaar.
Weet iemand een truuk?


thanks,
John

[pe7er]

Welkom op Joomla forum!

Door middel van de volgende CSS op een Class of ID tag, kun je de text in hoofdletters tonen:
text-transform: capitalize;
Meer info: https://developer.mozilla.org/en-US/doc ... -transform

En als de CSS ergens anders al ingesteld wordt, dan kun je het afdwingen dmv het toevoegen van "!important"
Dus:
text-transform: capitalize!important;
(Gebruik !important met mate)
Meer info: https://developer.mozilla.org/en-US/doc ... /important

[jivjivjiv]

bedankt voor je reply Peter.

Inderdaad had ik dat ook al geprobeerd. Met verschillende class namen en de ID.
Ik kan in user.css prima het font en de padding instellen van "navbar" dat werkt gewoon.
Maar hij luistert niet naar
.navbar {
text-transform: uppercase!important;
}

Ik heb al zitten zoeken in template.css maar daar staat zoveel dat ik het niet heb gevonden.
Het kan ook zijn dat ze het in php gewoon geblocked hebben.
Ik zag in het joomla dev forum een wijziging waarin ze zeggen hoofletters in het menu onmogelijk te maken in verband met toegankelijkheid/leesbaarheid van visueel beperkte mensen.
Het kan dus best dat dit in php gedaan is lijkt me.

Maar ik zag ook ergens een add-on waarbij 1 van de opties is om all caps te gebruiken in je menu. Dus ik weet niet wat die add-in hacked.
Dit is trouwens joomla 4, je hebt het in joomla 3 gezet.

[pe7er]

Dit is trouwens joomla 4, je hebt het in joomla 3 gezet.

Bedankt, ik heb het naar het Nederlandstalige Joomla 4 forum verplaatst

[Jaydot]

Bijna al mijn Joomla 4 menu's zijn in hoofdletters, dus het is zeker niet geblocked .
Ik gebruik in mijn user.css:

Code: Select all

.container-header .mod-menu {
   text-transform: uppercase;
}

(capitalize levert beginhoofdletters op, uppercase = alles in hoofdletters)

[jivjivjiv]

Hoi Jaydot.
Nou dat helpt ook niet bij mij. ik heb jouw code onderin mijn user.css gezet dus alles daarvoor wat eventueel roet in het eten kan gooien wordt dan voorkomen.
Snap er niks van.

[jivjivjiv]

dit is trouwens de inspect. Met .navbar moet ik toch de jusite class hebben?


<div class="grid-child container-nav">

<nav class="navbar navbar-expand-md" aria-label="Main Menu">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle Navigation">
<span class="icon-menu" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="mod-menu mod-list nav ">
<li class="nav-item item-101 default"><a href="...........etc. </li></ul>
</div>
</nav>

[Jaydot]

...helpt ook niet bij mij...

Tsja. Je kunt 't op mijn eigen site werkend zien. Had je wel alle cache geschoond (backend en browser)?
Het juist "targetten" van je CSS is een vak op zich . Specificity is daarbij een belangrijk (en lastig) onderwerp.
Je loopt 't minste risico als je een class "zo dichtbij mogelijk" pakt. Ik heb ook een Cassiopeia site met een uppercase menu waarbij ik

Code: Select all

.mod-list li {
    text-transform: uppercase;
}

ge-target heb. Werkt ook prima.
Ik weet niet waarom .navbar niet werkt... Misschien niet specifiek genoeg? Misschien omdat de tekst ook een link is? Misschien ergens een media-query? Misschien door de werking van de navbar-toggler? Als ik er met een target niet uitkom zoek ik verder tot ik er eentje vind die 't wel doet.
Succes!

[jivjivjiv]

het is opgelost. toen ik de font definitie veranderde werkte het wel.
Blijkt dus dat het gebruikte font geen hoofdletters heeft. Is erg oud font.

bedankt voor de hulp. in elk geval weer wat van opgestoken.

[Jaydot]

...geen hoofdletters...

Haha, da's met css niet op te lossen. Zo heb ik me ooit een ongeluk gezocht waarom het euro-teken niet gerendered werd. Bleek het font geen euro-teken te bevatten.
Goed dat je het gevonden hebt .

[pe7er]

het is opgelost. toen ik de font definitie veranderde werkte het wel.
Blijkt dus dat het gebruikte font geen hoofdletters heeft. Is erg oud font.

Goed dat je het op hebt kunnen lossen.
Bedankt voor het delen van de oorzaak van het probleem en jouw oplossing!