AcyMailing en het uitlijnen knoppen en het formulier

Ken je dat probleem, dat AcyMailing niet mooi uitlijnt met Template of module locatie? In dit artikel 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