CSS

Personnaliser le module de souscription frontale

Très utile pour permettre la gestion de leur souscription par les abonnés eux-même, partiellement ou complètement (#RGPD...).

Utile également pour modifier le nom des listes affichées en frontale, si vous voulez conserver des appellations typées en interne, mais mettre un texte ou un nom grand public en frontale.

Ainsi que pour gérer le responsive, si vous affichez des champs customisés par exemple.

.acymailing_lists{
margin-bottom: 15px ;
margin-top: 15px ;
}

/* LISTE 1 */
.acymailing_lists tr:nth-child(1) label{
color: white ;
}
input#acylist_4:after{
margin-top: -4px;
margin-left: 20px;
font-size: 20px ;
content: "Subscribe to our newsletter about liste 1" ;
position: fixed;
}

/* LISTE 2 */
.acymailing_lists tr:nth-child(2) label{
color: white ;
}
input#acylist_29:after{
margin-top: -4px;
margin-left: 20px;
font-size: 20px ;
content: "Subscribe to our newsletter about liste 2" ;
position: fixed;
}

/* MOBILE */
@media screen and (max-width: 520px) {
.acymailing_lists tr label{
display: grid;
}
input#acylist_29:after,
input#acylist_4:after{
margin-top: -16px;
}
}
@media screen and (max-width: 620px) {
table.acymailing_form {
}
table.acymailing_form tr{
display: grid;
}
}

N'oubliez pas que dans les options du module, vous pouvez ordonner les listes disponibles (manuellement, en déplaçant les ID des listes voulues).

Personnaliser l'affichage des listes en mode création et édition de newsletter en front

Par exemple :

#filter_list option[value="VOTRE_ID_LISTE"],
#filter_msg option[value="list_VOTRE_ID_LISTE"],
.acymailing_table tr#acylistrow_VOTRE_ID_LISTE
{
color: #FFF ;
background-color: #91acd7 ;
font-weight: bold ;
font-size: 15px;
}

.acymailing_table tr#acylistrow_VOTRE_ID_LISTE td
{
color: #FFF ;
}

Personnaliser l'ordre d'affichage des listes en mode création et édition de newsletter en front

Utilisez le champ ordering dans la table _acymailing_list.

Ajouter classe CSS aux boutons d'export et de suppresion des données abonné en front

Dans components \ com_acymailing \ views \ user \ tmpl \ modify.php, vers la ligne 113, remplacez :

<div style="clear: both; padding-top: 5px;">

par :

<div style="clear: both; padding-top: 5px;" class="mes_boutons">

Ajouter les classes manquantes des interfaces frontales de gestion des contacts [obsolète depuis 5.8.1 - inutile - pour mémoire]

Pour l'interface front de gestion des newsletters, on a une classe CSS globale acynewsletterlisting, mais pas pour la gestion frontale des contacts. Vous pouvez toutefois l'overider à partir du fichier :

administrator \ components \ com_acymailing \ views \ subscriber \ tmpl \ listing.php

Dans la 1^ère div par exemple :

<div id="acy_content" class="ma_classe_sub" >

Ajouter les classes manquantes des interfaces frontales de gestion des statistiques

Et pour l'interface frontale des statistiques, dans administrator \ components \ com_acymailing \ views \ stats \ tmpl \ listing.php :

<div id="acy_content" class="ma_classe_stat" >

Attention : vérifiez que ce défaut n'est pas déjà corrigé au moment où vous lisez ces lignes, vous vous épargnerez du travail de maintenance. Et auquel cas, utilisez les classes CSS officielles.

Icône d'accès aux stats des newsletters en front

C'est toujours sympa de personnaliser au maximum le front. J'aime bien changer l'icône d'accès aux stats par le logo du site. Une bête en CSS pourra doute changer la source de l'image via l'override prévu dans la configuration d'Acy, mais tant que je n'ai pas trouvé (sigh!), je me contente de changer l'image située media / com_acymailing / images / icons / icon-16-stats.png par un .png en fond transprent de 16x16.

Mettez aussi une sauvegarde de l'image juste à coté, car les MAJ d'Acy risquent d'écraser votre image perso (d'où l'intérêt de le mettre dans l'override CSS...).

Formulaire des informations d'un abonné en front

Si vous avez des champs personnalisés, les 2 blocs d'informations s'affichent l'un en dessous de l'autre. De même l'historique utilisateur, tout en bas de ce formulaire, n'exploite pas toute la largeur disponible. Changez avec ce code :

/* MODIFIER FORMULAIRE UTILISATEUR EN FRONT AVEC CHAMPS PERSOS - PROTOSTAR - BOOTSTRAP 2 */
#acy_subscriber_form_menu ~ div#acy_content div.onelineblockoptions {
max-width: 360px;
float: left;
}
.onelineblockoptions.acytabsystem {
max-width: none !important;
float: none !important;
margin-left: 20px;
}
.onelineblockoptions{
margin-left: 20px;
}
div#acysubscriberinfo {
max-width: none;
}
.onelineblockoptions .acyblocktitle {
display: none;
}
.onelineblockoptions .acymailing_table td{
border-bottom: 0px !important;
}
.onelineblockoptions .acy_onefield .acykey{
margin-top:2px;
width: 150px;
}
.onelineblockoptions .acy_onefield select{
width: 255px;
}
.onelineblockoptions .acy_onefield input{
width: 247px;
}
.onelineblockoptions .acy_onefield label{
color: #777;
}
.onelineblockoptions #trCHAMPPERSO1,
.onelineblockoptions #trCHAMPPERSO2...,
{
display: flex;
margin-bottom: 0.3px;
}
#acysubscriberinfo .btn.active {
background-color: #6AC4F1 !important;
}