Welkom bij Joomla!NL

Om alle mogelijkheden van dit forum te kunnen gebruiken, moet je je eerst registreren.

Vermeld in iedere vraag duidelijk:
  1. De versie van Joomla! 3.X die je gebruikt
  2. De volledige url van je website indien mogelijk.
  3. De versie van de extensie waar de vraag over gaat.

opgelost volgorde modules wijzigen in smartphone responsive weergave

volgorde modules wijzigen in smartphone responsive weergave

20 jan 2015 19:53
#1
Hallo, ik gebruik Joomla! 3.3.6 Stable, en maak een website voor een rijschool.
derijprocedure.nl/
Als deze site op een smartphone weergegeven wordt, dan verschuiven de modules keurig onder elkaar, maar ik wil daarvan de volgorde aan kunnen passen.
Nu doet hij het als volgt, bovenaan het logo, dan de zoekfunctie, inlogfunctie, foto module, content, de rechter modules en de footer.
Ik zou graag in de smartphone weergave, de zoekfunctie, inlogfunctie en de foto module onderaan hebben.
Is die volgorde te beinvloeden ?
  • tvhouwel
  • tvhouwel's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 41

volgorde modules wijzigen in smartphone responsive weergave

20 jan 2015 22:34
#2
Kan dat niet door bij Module Manager in de eerste kolom op 'Ordering' te drukken en de modules naar boven en/of beneden te verplaatsen?
Probeer anders Advanced Module Manager, misschien zit de functie daar in?

volgorde modules wijzigen in smartphone responsive weergave

20 jan 2015 22:46
#3
Bedankt voor je antwoord, maar de volgorde wijzigen in de modulemanager wijzigt alleen de volgorde van de modules binnen dezelfde positie in je template.
Wat ik bedoel dat ik de volgorde van modules in de verschillende template positie's, als ze in elkaar geschoven worden op een smartphone graag zou willen beinvloeden.
Het lijkt er nu op dat hij het van boven naar beneden en dan van links naar rechts doet.
  • tvhouwel
  • tvhouwel's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 41

volgorde modules wijzigen in smartphone responsive weergave

21 jan 2015 09:04
#4
Die is niet zomaar te beinvloeden. Enige mogelijkheid is om die modules te kopiëren, er een module class suffix aan toe te voegen, ze op de positie rechts te zetten en dan met media queries het zo te regelen dat ze alleen getoond worden op schermen die smaller zijn dan 770 px. Bij de originele modules moet je dan ook een module class suffix toevoegen en daar met een media query regelen dat ze alleen getoond worden op schermen die breder zijn dan 770px.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37104

volgorde modules wijzigen in smartphone responsive weergave

21 jan 2015 17:32
#5
Ik heb precies dezelfde vraag en ben gaan rondkijken op extensions.joomla.org. Ik heb iets gevonden dat modules uit kan zetten, maar ik weet niet echt hoe het werkt. Je kan de module hier zien. Misschien kan jij er wat mee?
En verder volg ik graag dit draadje en als ik zelf een oplossing heb gevonden, laat ik het weten.
  • jecrvali
  • jecrvali's berichtenfoto
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 265

volgorde modules wijzigen in smartphone responsive weergave

21 jan 2015 17:36
#6
Ik begin het antwoord van Astrid te begrijpen en denk dat je daarmee dus ook modules uit kan zetten.
Vanavond maar eens studeren hoe een module class suffix werkt.
  • tvhouwel
  • tvhouwel's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 41

volgorde modules wijzigen in smartphone responsive weergave

22 jan 2015 11:29
#7
Ik heb het voor elkaar. Door Astrid op het juiste spoor gezet, waarvoor dank.

Wat heb ik gedaan:

Mijn 2 modules (nieuws en newsletter) gekopieerd in de backend van Joomla. Deze de naam gegeven: nieuws-smartphone en newsletter-smartphone.

In de index.php de code voor de 2 modules gekopieerd, de namen aangepast naar de gekopieerde namen en onderaan gezet, voor de footer.

In mijn templateDetails.xml de 2 moduleposities toegevoegd.

In mijn template.css de volgende code toegevoegd:
Code:
@media(max-width:480px) {.newsletter{ display: none; } .nieuws{ display:none; } } @media(min-width:480px) {.newsletter-smartphone{ display: none; } .nieuws-smartphone{ display:none; }}

En het werkt netjes.

Je kunt het resultaat zien op deze link .
  • jecrvali
  • jecrvali's berichtenfoto
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 265

volgorde modules wijzigen in smartphone responsive weergave

22 jan 2015 12:08
#8
Inderdaad! Toevoegen van moduleposities hoeft niet altijd overigens. Kan vaak ook door ze bijvoorbeeld in de rechterbalk te zetten (die komt vaak onderaan) en dan te werken met een class-suffix. Maar dit is een mooie oplossing waar andere leden ook iets aan zullen hebben.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37104

volgorde modules wijzigen in smartphone responsive weergave

24 jan 2015 10:04
#9
Bedankt voor dit uitgebreide voorbeeld. Weer heel wat geleerd.
  • tvhouwel
  • tvhouwel's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 41
Moderators: PeterJuliank92JelleRomke
Tijd voor maken pagina: 0.824 seconden

Wil je Joomla!NL steunen?

Steun Joomla!NLAlle teamleden werken enthousiast, op vrijwillige basis, mee aan Joomla!NL. Maar een website met forum kost nu eenmaal geld. Dus als je Joomla!NL wilt steunen, dan kan dat, graag zelfs!

Lees hier meer informatie