Handleidingen Vormgeving - Design

voor Joomla 3

AcyMailing en het uitlijnen knoppen van het formulier

Ken je dat probleem, dat AcyMailing niet mooi uitlijnt met je Joomlatemplate of module locatie? In deze handleiding leg ik uit hoe ik dit opgelost heb.

AcyMailing is een fijn component voor het versturen van nieuwsbrieven. Er wordt ook een module bij geinstalleerd waarmee je bezoekers zich kunnen inschrijven voor je nieuwsbrief (of brieven, mocht je er meer dan 1 hebben).
De knoppen en het formulier waarmee de bezoekers zich kunnen inschrijven worden niet altijd mooi weergegeven.

Hoe los je het probleem met uitlijnen in AcyMailing nu op?

Het aanpassen van het CSS bestand kan vanuit het Component AcyMailing gedaan worden, hieronder leg ik uit hoe dat gaat.
Het formulier wordt standaard gecentreerd weer gegeven (Name, E-mail en de knoppen).

AcyMailing uitlijning gecentreerd

Het gewenste resultaat wat je wilt is dit, het formulier (Name en E-mail) wordt netjes links uitgelijnd net zoals de kop, in dit geval Newsletter.

AcyMailing uitlijning links 

  1. Log in op de backend van je Joomla! website.
  2. Klik in het menu bovenin op Componenten -> AcyMailing -> Configuratie.

    AcyMailing configuratie

  3. Klik vervolgens bij CSS en voor de optie Module CSS-Bestand op het pennetje om het CSS bestand aan te bewerken.

    AcyMailing css bewerken1

  4. Pas de volgende regel aan

    table.acymailing_form{
    margin:auto;
    border:0px !important;
    }

  5. Naar

    table.acymailing_form{
    border:0px !important;
    }

     

  6. Klik tot slot op Opslaan, sluit dan het pop-up venster, door op het kruisje te klikken en vergeet niet om rechtsboven nog eens Opslaan te klikken!

    AcyMailing css bewerken opslaan

  7. Ververs nu de pagina waar de inschrijfmodule van AcyMailing op staat en bekijk het gewenste resultaat.

 

Aanpassen uitlijning knop Inschrijven (Subscribe)

Voor het aanpassen van de uitlijning van de knop kun je de volgende stappen uitvoeren. Deze wordt standaard gecentreerd weergegeven.

  1. Log in op de backend van je Joomla! website.
  2. Klik in het menu bovenin op Componenten -> AcyMailing -> Configuratie.

    AcyMailing configuratie

  3. Klik vervolgens bij CSS en voor de optie Module CSS-Bestand op het pennetje om het CSS bestand aan te bewerken.

    AcyMailing css bewerken
  4. Zoek de volgende tekst op en pas deze aan:

    .acysubbuttons{
    text-align:center;
    }

  5. Zo moet deze worden.

    .acysubbuttons{
    text-align:left;
    }

  6. Klik tot slot op Opslaan, sluit dan het pop-up venster, door op het kruisje te klikken en vergeet niet om rechtsboven nog eens Opslaan te klikken!

    AcyMailing css bewerken opslaan

  7. Ververs nu de pagina waar de inschrijfmodule van AcyMailing op staat en bekijk het gewenste resultaat. De knop Subscribe staat nu ook netjes links uitgelijnd.

    AcyMailing css bewerken na knop 

  

Bron: https://www.acyba.com/forum/5-acymailing-how-to/70161-align-input-fields-subscription-form-to-left.html

 

Terug naar het overzicht    Terug naar categorie Vormgeving - Design

 

Delen op social media?

Nieuwsbrief

Schakel javascript in om dit formulier in te dienen

We use cookies

Wij gebruiken cookies op onze web site. Sommigen zijn essentieel voor het correct functioneren van de site, terwijl anderen ons helpen om de site en gebruikerservaring te verbeteren (tracking cookies). U kan zelf kiezen of u deze cookies wil toestaan of niet. Let op dat als u onze cookies weigert mogelijk niet alle functies van de site beschikbaar zijn.