Vermeld in iedere vraag duidelijk:
- De versie van Joomla! 4.X die je gebruikt
- De volledige url van je website indien mogelijk.
- De versie van de extensie waar de vraag over gaat.
topbar horizontaal vullen met modulen
topbar horizontaal vullen met modulen
18 sep 2023 17:23 - 18 sep 2023 18:31
Hallo,
Template: cassiopeia
Ik wil graag het logo en de Language Switcher naast elkaar en verticaal gecentreerd links in de topbar plaatsen.
Wanneer ik ze via de normale positionering plaats, komen ze onder elkaar in de topbar.
Ik heb geprobeerd dit via de css op te lossen maar ik heb te weinig kennis.
Ik heb een user.css waar ik de kleuren al heb aangepast.
Ook heb ik de fix van Astrid voor het hamburger menu in de topbar in de user.css geplakt maar ze blijven boven elkaar staan.
Kan iemand me vertellen of het mogelijk is en zo ja hoe ik het kan oplossen?
Al vast bedankt voor jullie aandacht en inspanning.
Edit Astrid: Ik heb de hieropvolgende informatie verwijderd. Graag in het vervolg alleen relevante info vermelden.
Template: cassiopeia
Ik wil graag het logo en de Language Switcher naast elkaar en verticaal gecentreerd links in de topbar plaatsen.
Wanneer ik ze via de normale positionering plaats, komen ze onder elkaar in de topbar.
Ik heb geprobeerd dit via de css op te lossen maar ik heb te weinig kennis.
Ik heb een user.css waar ik de kleuren al heb aangepast.
Ook heb ik de fix van Astrid voor het hamburger menu in de topbar in de user.css geplakt maar ze blijven boven elkaar staan.
Kan iemand me vertellen of het mogelijk is en zo ja hoe ik het kan oplossen?
Al vast bedankt voor jullie aandacht en inspanning.
Edit Astrid: Ik heb de hieropvolgende informatie verwijderd. Graag in het vervolg alleen relevante info vermelden.
Ik ben niet dom. Ik maak gewoon fouten. 
- LudoThijssen
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 23
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37431
topbar horizontaal vullen met modulen
19 sep 2023 11:43
testorg.ffabw.org
Ik ben niet dom. Ik maak gewoon fouten.
- LudoThijssen
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 23
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37431
topbar horizontaal vullen met modulen
19 sep 2023 17:14
Astrid, bedankt voor je reactie.
Ik ken de pagina en heb hem door gespit
Als ik de menu balk gebruik komen ze wel op 1 regel.
Dan staat het logo links en de Language Switcher staat rechts.
Als het niet anders kan zal ik dit moeten accepteren, maar het is niet helemaal wat ik wil (het logo links met daarnaast de Language Switcher verticaal uitgelijnd).
Wat ik van css-grid en flex begrijp zou het moeten kunnen.
Ik heb geprobeerd om het stukje user.css voor het in regel positioneren aan te passen zonder resultaat.
Door dat ik css-grid maar in basis begrijp en om dat ik niet weet welk object ik nu moet bewerken lukt het me niet om daar een aanpassing voor te schrijven.
Ik heb een workaround geprobeerd door een custommodule te creëren.
Deze te vullen met het logo en daarnaast een call via module anywhere naar de Language Switcher.
Echter in de topbar wordt het logo met de {load......} weergegeven.
Binnen artikelen werkt {load......} prima maar niet in de topbar, jammer genoeg.
Nog andere tips?
Ik ken de pagina en heb hem door gespit
Als ik de menu balk gebruik komen ze wel op 1 regel.
Dan staat het logo links en de Language Switcher staat rechts.
Als het niet anders kan zal ik dit moeten accepteren, maar het is niet helemaal wat ik wil (het logo links met daarnaast de Language Switcher verticaal uitgelijnd).
Wat ik van css-grid en flex begrijp zou het moeten kunnen.
Ik heb geprobeerd om het stukje user.css voor het in regel positioneren aan te passen zonder resultaat.
Door dat ik css-grid maar in basis begrijp en om dat ik niet weet welk object ik nu moet bewerken lukt het me niet om daar een aanpassing voor te schrijven.
Ik heb een workaround geprobeerd door een custommodule te creëren.
Deze te vullen met het logo en daarnaast een call via module anywhere naar de Language Switcher.
Echter in de topbar wordt het logo met de {load......} weergegeven.
Binnen artikelen werkt {load......} prima maar niet in de topbar, jammer genoeg.
Nog andere tips?
Ik ben niet dom. Ik maak gewoon fouten.
- LudoThijssen
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 23
topbar horizontaal vullen met modulen
21 sep 2023 11:43
Ik ben nog in de css-grid gedoken maar krijg het niet voor elkaar. Toch heb ik een oplossing gevonden.
De costum module kan ook code bevatten. Voor elke taal heb ik er een aangemaakt, Nederlands en Engels.
Ook heb ik een stukje css in de user.css geplaatst alleen denk ik dat dat niets doet. Er veranderde niets toen ik het uitschakelde.
Voor het Nederlands is de code
Voor het Engels is de code
De code die ik in de user.css heb geplaatst
Dit is zeker geen mooie oplossing maar werkt op een ding na.
Wanneer ik de Language Switcher niet op de pagina plaats komen de vlaggen onder elkaar met bullits ervoor. Staat de Language Switcher wel op de pagina dan wordt de Language Switcher in de tobbar horizontaal en met duidelijke actieve weer gegeven.
Ik denk dat er buiten de code nog een verwijzing naar de css is die gewoon werkt als de Language Switcher op de pagina staat maar niet als de Language Switcher niet op de pagina staat, alleen waar gebeurd dit?
Ik heb hem nu helemaal onderaan staan. Heeft iemand nog een suggestie?
De costum module kan ook code bevatten. Voor elke taal heb ik er een aangemaakt, Nederlands en Engels.
Ook heb ik een stukje css in de user.css geplaatst alleen denk ik dat dat niets doet. Er veranderde niets toen ik het uitschakelde.
Voor het Nederlands is de code
Code:
/*costum nl html*/
<table style="border-collapse: collapse; width: 21.4844%; height: 129px;" cellspacing="400px">
<tbody>
<tr style="height: 129px;">
<td style="width: 150px; height: 129px; vertical-align: middle;">
<div class=".my-header-grid">
<div id="mod-custom113" class="mod-custom custom"><a href="index.php/nl/"><img style="margin-left: 5px; margin-right: 5px;" src="https:/images/Logos/MV_Logo_2022_100x100%20trans.gif" width="100" height="100" /></a></div>
</div>
</td>
<td style="width: 56.3109%; height: 129px;">
<div class="grid-child container-nav">
<div class="mod-languages">
<p id="language_picker_des_109" class="visually-hidden">Select your language</p>
<ul class="mod-languages__list lang-inline" aria-labelledby="language_picker_des_109">
<li class="lang-active"><a href="index.php/nl/"> <img title="Nederlands (nl-NL)" src="media/mod_languages/images/nl_nl.gif" alt="Nederlands (nl-NL)" /> </a></li>
<li><a href="index.php/en/" aria-current="true"> <img title="English (United Kingdom)" src="media/mod_languages/images/en_gb.gif" alt="English (United Kingdom)" /> </a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Voor het Engels is de code
Code:
/*costum gb html*/
<table style="border-collapse: collapse; width: 21.4844%; height: 129px;" cellspacing="40px">
<tbody>
<tr style="height: 129px;">
<td style="width: 150px; height: 129px; border-style: none;">
<div class=".my-header-grid">
<div id="mod-custom113" class="mod-custom custom"><a href="index.php/en/"><img style="margin-left: 5px; margin-right: 5px;" src="https:/images/Logos/MV_Logo_2022_100x100%20trans.gif" width="100" height="100" /></a></div>
</div>
</td>
<td style="width: 56.3109%; height: 129px;">
<div class="grid-child container-nav">
<div class="mod-languages">
<p id="language_picker_des_109" class="visually-hidden">Select your language</p>
<ul class="mod-languages__list lang-inline" aria-labelledby="language_picker_des_109">
<li><a href="index.php/nl/"> <img title="Nederlands (nl-NL)" src="media/mod_languages/images/nl_nl.gif" alt="Nederlands (nl-NL)" /> </a></li>
<li class="lang-active"><a href="index.php/en/" aria-current="true"> <img title="English (United Kingdom)" src="media/mod_languages/images/en_gb.gif" alt="English (United Kingdom)" /> </a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
De code die ik in de user.css heb geplaatst
Code:
/*user.css*/
.my-header-grid{
grid-row: row 1;
display: grid;
grid-template-areas:
'my-header my-header';
grid-gap: 10px;
grid-template-columns: 200px auto;
}
Dit is zeker geen mooie oplossing maar werkt op een ding na.
Wanneer ik de Language Switcher niet op de pagina plaats komen de vlaggen onder elkaar met bullits ervoor. Staat de Language Switcher wel op de pagina dan wordt de Language Switcher in de tobbar horizontaal en met duidelijke actieve weer gegeven.
Ik denk dat er buiten de code nog een verwijzing naar de css is die gewoon werkt als de Language Switcher op de pagina staat maar niet als de Language Switcher niet op de pagina staat, alleen waar gebeurd dit?
Ik heb hem nu helemaal onderaan staan. Heeft iemand nog een suggestie?
Ik ben niet dom. Ik maak gewoon fouten.
- LudoThijssen
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 23
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37431
topbar horizontaal vullen met modulen
22 sep 2023 11:59
Ik heb beide geprobeerd en bij de 2e nog wat aan gepast maar ze komen niet in de richting van de omslachtige manier.
Het resultaat van de eerste is in column 2.jpg en het tweede flex.jpg.
Het vreemde is de echo van het logo op de achtergrond.
Alles wat ik in de user.css heb staan wat betreft achtergrond heb ik uitgeschakeld.
Ik moet eerst maar wat praktische ervaring met css-grid opdoen maar daar heb ik de komende 2 maanden geen tijd voor.
De cursus is teveel weggezakt en als ik dat nu doe kan ik er over 2 maanden weer aan beginnen.
Voor nu moet dan maar de omslachtige manier die werkt.
Als ik de juiste oplossing vind zal ik hem delen.
Astrid bedankt voor je hulp en je mag deze toppik sluiten.
Het resultaat van de eerste is in column 2.jpg en het tweede flex.jpg.
Het vreemde is de echo van het logo op de achtergrond.
Alles wat ik in de user.css heb staan wat betreft achtergrond heb ik uitgeschakeld.
Ik moet eerst maar wat praktische ervaring met css-grid opdoen maar daar heb ik de komende 2 maanden geen tijd voor.
De cursus is teveel weggezakt en als ik dat nu doe kan ik er over 2 maanden weer aan beginnen.
Voor nu moet dan maar de omslachtige manier die werkt.
Als ik de juiste oplossing vind zal ik hem delen.
Deze afbeelding is verborgen voor gasten.
Login of registreer om deze te zien.
Login of registreer om deze te zien.
Deze afbeelding is verborgen voor gasten.
Login of registreer om deze te zien.
Login of registreer om deze te zien.
Astrid bedankt voor je hulp en je mag deze toppik sluiten.
Ik ben niet dom. Ik maak gewoon fouten.
- LudoThijssen
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 23
