PhpList 2025: Configuración

Configuración General

  • Para ingresar a la configuración general ingresamos a menú -> Config -> Configuración

logo

  • En la sección «General configuración» -> Logotipo de la organización
  • Subimos el logo

Reportes

  • Modificamos configuración de reportes

Campañas

  • Modificamos la configuración de la campaña
  • Pie de página por defecto para el envío de una campaña
  • Modificamos esto
--

    <div class="footer" style="text-align:left; font-size: 75%;">
      <p>This message was sent to [EMAIL] by [FROMEMAIL].</p>
      <p>To forward this message, please do not use the forward button of your email application, because this message was made specifically for you only. Instead use the <a href="[FORWARDURL]">forward page</a> in our newsletter system.<br/>
      To change your details and to choose which lists to be subscribed to, visit your personal <a href="[PREFERENCESURL]">preferences page</a>.<br/>
      Or you can <a href="[UNSUBSCRIBEURL]">opt-out completely</a> from all future mailings.</p>
    </div>
  • Por esto
<div style="height:10px; background-color:#CD1719;">
</div>
<div class="footer" style="text-align:center; font-size: 14px;background-color:#A7A7A9; color:#333; padding:10px;">
   <p style="color:#333">Este mensaje fue enviado a <a style="color:#034991; text-decoration: none; " href="mailto:[EMAIL]" target="_blank">[EMAIL]</a> por <a style="color:#034991; text-decoration: none; " href="mailto:[FROMEMAIL]"  target="_blank">[FROMEMAIL]</a>.</p>
   <p style="color:#333">Para reenviar este mensaje, no use el botón de reenvío de su aplicación de correo electrónico, porque este mensaje fue creado específicamente para usted. En su lugar, utilice la <a  style="color:#034991; text-decoration: none; "  href="[FORWARDURL]">página de reenvío</a> de nuestro sistema de boletines.
   <br/>
   Para cambiar sus datos y elegir a qué listas suscribirse, visite su <a  style="color:#034991; text-decoration: none; "  href="[PREFERENCESURL]">página de preferencias personal</a>.
   <br/>
   O puede <a  style="color:#034991; text-decoration: none; "  href="[UNSUBSCRIBEURL]">excluirse completamente</a> de todos los envíos futuros</p>
   <div style="text-aling:center;">
      <img src="[LOGO]" />
   </div>
</div>
  • Resultado
  • Pie de página usado cuando un mensaje ha sido reenviado
  • Modificamos esto
<div class="footer" style="text-align:left; font-size: 75%;">
<p>This message has been forwarded to you by [FORWARDEDBY].</p>
<p>You have not been automatically subscribed to this newsletter.</p>
<p>If you think this newsletter may interest you, you can <a href="[SUBSCRIBEURL]">Subscribe</a> and you will receive our next newsletter directly to your inbox.</p>
<p>You can also <a href="[BLACKLISTURL]">opt out completely</a> from receiving any further email from our newsletter application, phpList.</p>
</div>
  • Por esto
<div style="height:10px; background-color:#CD1719;"></div>sudo systemctl restart apache2
<div class="footer" style="text-align:center; font-size: 14px;background-color:#A7A7A9; color:#FFF; padding:10px;">
<p style="color:#333">Este mensaje le ha sido reenviado por  <a style="color:#034991; text-decoration: none; " href="mailto:[FORWARDEDBY]" target="_blank">[FORWARDEDBY]</a>.</p>
<p style="color:#333">Usted no se encuentra suscritos automáticamente a este boletín.</p>
<p style="color:#333">Si cree que este boletín puede interesarle, puede <a style="color:#034991; text-decoration: none; "  href="[SUBSCRIBEURL]"  target="_blank">suscribirse</a> y recibirá nuestro próximo boletín directamente en su bandeja de entrada de su correo.</p>
<p style="color:#333">También puede <a style="color:#034991; text-decoration: none; "     target="_blank" href="[BLACKLISTURL]">excluirse completamente</a> de recibir más correos electrónicos de nuestra aplicación de boletín, SIUA.</p>
</div>
  • Resultado

Configuración transaccional

  • Configuración
  • Asunto del mensajes que recibirán los suscriptores cuando se inscriban 
Solicitud de confirmación Comunicados-UNA
  • En Mensaje recibirán los suscriptores cuando se inscriban
 You have been subscribed to the following newsletters:

[LISTS]


Please click the following link to confirm it's really you:

[CONFIRMATIONURL]


In order to provide you with this service we'll need to

Transfer your contact information to phplist.siua.ac.cr
Store your contact information in your phplist.siua.ac.cr account
Send you emails from phplist.siua.ac.cr
Track your interactions with these emails for marketing purposes

If this is not correct, or you do not agree, simply take no action and delete this message.


X

Muchas gracias por su interés en la Universidad Nacional

Usted se ha suscrito a los siguientes listas de correo de sistema de Comunicados-UNA:

[LISTS]


Haga clic en el siguiente enlace para confirmar que realmente es usted:

[CONFIRMATIONURL]


Para poder brindarle este servicio, necesitaremos que actualice su información de contacto en su cuenta https://phplist.una.ac.cr. Si esto no es correcto o no está de acuerdo, simplemente no realice ninguna acción y elimine este mensaje.


  • Asunto del mensajes que recibirán los suscriptores cuando se den de baja
Goodbye from our Newsletter

X

Hasta luego, Comunicados-UNA
  • Mensajes que recibirán los suscriptores cuando se den de baja
Goodbye from our Newsletter, sorry to see you go.

You have been unsubscribed from our newsletters.

This is the last email you will receive from us. Our newsletter system, phpList,
will refuse to send you any further messages, without manual intervention by our administrator.

If there is an error in this information, you can re-subscribe:
please go to [SUBSCRIBEURL] and follow the steps.

Thank you


X


Adiós de nuestro boletín Comunicados-UNA, sentimos que te vayas.

Se ha cancelado su suscripción a nuestros comunicados.

Este es el último correo electrónico que recibirá de nosotros. Nuestro sistema de boletines Comunicados-UNA, se configurará para negar enviarle más mensajes sin la intervención manual de nuestro administrador.

Si hay un error en esta información, puede volver a suscribirse:
Para esto vaya a [SUBSCRIBEURL] y siga los pasos.

Muchas Gracias, Universidad Nacional.
  • Asunto del mensaje que recibe el suscriptor tras confirmar su dirección de correo
Welcome to our Newsletter
X
Bienvenido a Comunicados-UNA
  • Mensaje que los suscriptores reciben tras confirmar sus direcciones de correo
Welcome to our Newsletter

Please keep this message for later reference.

Your email address has been added to the following newsletter(s):
[LISTS]

To update your details and preferences please go to [PREFERENCESURL].
If you do not want to receive any more messages, please go to [UNSUBSCRIBEURL].

Thank you


X



Bienvenidos a Comunicados-UNA

Guarde este mensaje para futuras consultas.

Su dirección de correo electrónico se ha agregado a los siguientes boletines:
[LISTS]

Para actualizar sus datos y preferencias, vaya a [PREFERENCESURL].
Si no desea recibir más mensajes, vaya a [UNSUBSCRIBEURL].

Gracias, Universidad Nacional.
  • Asunto del mensajes que recibirán los suscriptores cuando cambien su información
[notify] Change of List-Membership details
X
[Notificación] Cambio de información suscriptor
  • Mensaje que los suscriptores reciben cuando cambian sus detalles
This message is to inform you of a change of your details on our newsletter database

You are currently member of the following newsletters:

[LISTS]

[CONFIRMATIONINFO]

The information on our system for you is as follows:

[USERDATA]

If this is not correct, please update your information at the following location:

[PREFERENCESURL]

Thank you


X



Este mensaje es para informarle se realizó un cambio de sus datos personales en nuestra base de datos de Comunicados-UNA.

Actualmente eres miembro de los siguientes boletines:

[LISTS]


[CONFIRMATIONINFO]

Su información personal en nuestro sistema es la siguiente:

[USERDATA]

Si esto no es correcto, actualice su información en el siguiente enlace:

[PREFERENCESURL]

Gracias, Universidad Nacional.
  • Parte del mensaje que se envía a la nueva dirección de correo cuando los suscriptores cambian su información, y la dirección de correo ha cambiado
When updating your details, your email address has changed.
Please confirm your new email address by visiting this webpage:

[CONFIRMATIONURL]


X


Al actualizar sus datos, su dirección de correo electrónico ha cambiado.
Confirme su nueva dirección de correo electrónico visitando esta página web:

[CONFIRMATIONURL]
  • Parte del mensaje que se envía a la anterior dirección de correo cuando los suscriptores cambian su información, y la dirección de correo ha cambiado
Please Note: when updating your details, your email address has changed.

A message has been sent to your new email address with a URL
to confirm this change. Please visit this website to activate
your membership.


X

Tenga en cuenta: al actualizar sus datos, su dirección de correo electrónico ha cambiado.

Se ha enviado un mensaje a su nueva dirección de correo electrónico con una URL.
para confirmar este cambio. Visite este sitio web para activar su membresía.
  • Asunto del mensaje cuando los suscriptores solicitan su localización personal
Your personal location
X
Enlace datos personales
  • Mensaje a enviar cuando requieran su localización personal
You have requested your personal location to update your details from our website.
The location is below. Please make sure that you use the full line as mentioned below.
Sometimes email programmes can wrap the line into multiple lines.

Your personal location is:
[PREFERENCESURL]

Thank you.

X

Usted ha solicitado crear un enlace temporal para modificar sus datos personales en nuestro sitio.

Tu enlace es:
[PREFERENCESURL]

Gracias, Universidad Nacional.
  • Encabezado de las páginas públicas.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#2C2C2C"/>
<link rel="apple-touch-icon" href="./images/phplist-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="./images/phplist-touch-icon.png" />
<link rel="stylesheet" href="admin/ui/phplist-ui-bootlist/css/style.css" />
</head>

<body class="fixed invisible">

<div id="container">

<div id="header" class="navbar navbar-inverse">
<div id="rack-functions" class="container">
<h1 id="logo"><a href="http://phplist.una.ac.cr" title="Visit our website">[ORGANISATION_NAME]</a></h1>
</div>
</div>
<div id="wrapper" class="container">
<div id="mainContent">

<div class="panel">
<br />
<div class="content well">


X


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#2C2C2C"/>
<link rel="apple-touch-icon" href="./images/phplist-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="./images/phplist-touch-icon.png" />
<link rel="stylesheet" href="admin/ui/phplist-ui-bootlist/css/style.css" />
<link rel="stylesheet" href="/styles/ugit.css" type="text/css" /> 
</head>

<body class="fixed invisible">

<div id="container">

<div id="header" class="navbar navbar-inverse">
<div id="rack-functions" class="container">
	<h1 id="logo"><a href="http://phplist.una.ac.cr" title="Visite nuestro sitio">[ORGANISATION_NAME]</a></h1>
</div>
</div>
<div id="wrapper" class="container">
<div id="mainContent">

<div class="panel">
<br />
<div class="content  well">
  • Pie de página de las páginas públicas (Igual)
</div>
</div>
</div><!-- ENDOF #mainContent-->
</div><!-- ENDOF .wrapper -->
</div><!-- ENDOF #container -->

<div id="footer">
<div id="footerframe">
<ul class="list-unstyled">
<li>&nbsp;</li>
</ul>
</div>
</div>

<script type="text/javascript" src="admin/ui/phplist-ui-bootlist/js/jquery.min.js"></script>
<script type="text/javascript" src="admin/js/phplistapp.js"></script>
<script type="text/javascript" src="admin/ui/phplist-ui-bootlist/js/dist/phpList_ui_bootlist.min.js"></script>
<script>
/* do not remove this from here */
$(document).ready(function(){
if ( $('body').hasClass('invisible') ){
applyCustomFormatting(); applyJqueryUiTabMigration();
}
$('#edit_list_categories input.form-control').tagsinput('refresh');

});
</script>
</body>

</html>

list-organisation configuración

  • Categorías para listas. Separado con comas
UNA, Vida Estudiantil, Becas
  • Mostrar la lista de categorías en la página de suscripción

subscription configuración

  • La página de suscripción por defecto cuando haya múltiple
1
  • URL donde los suscriptores pueden registrarse
http://phplist.una.ac.cr/?p=subscribe
  • URL donde los suscriptores pueden darse de
http://phplist.una.ac.cr/?p=unsubscribe
  • URL donde los usuarios desconocidos pueden solicitar la baja (lista «no enviar a»)
http://phplist.una.ac.cr/?p=donotsend
  • URL donde los suscriptores tienen que confirmar su suscripción
http://phplist.una.ac.cr/?p=confirm
  •  URL donde los suscriptores pueden actualizar sus detalles
http://phplist.una.ac.cr/?p=preferences
  • URL para reenviar mensajes
http://phplist.una.ac.cr/?p=forward
  • URL para descargar la ficha vcf
http://phplist.una.ac.cr/?p=vcar
  • Texto a mostrar cuando la suscripción con una petición AJAX sea satisfactoria
<h3>Thanks, you have been added to our newsletter</h3><p>You will receive an email to confirm your subscription. Please click the link in the email to confirm</p>


X

<h3> Gracias, ha sido agregado a nuestro boletín Comunicados-UNA </h3> <p> Usted recibirá un correo electrónico para confirmar su suscripción. Haga clic en el enlace del correo electrónico para confirmar </p>

Personalización

  • Abrimos el archivo
nano /var/www/html/phplist/public_html/lists/admin/css/app.css
  • Agregamos al final
/**********************************************/
/**************  UGIT   ***********************/
/**********************************************/

#navigation {
    background-color: #172439 !important;
}

.sidebar {
    background-color: #1c4c74 !important;
}
.sidebar .menu #menuTop > ul li.open ul {
    background-color: #133652 !important;
}
.btn-primary {
    background-color: #172439 !important;
    border-color: #172439 !important;
    color: #FFF !important;
}
  • Descargamos el logo de aquí
  • Y remplazamos en la dirección
/var/www/html/Sistemas/comunicados.siua.ac.cr/public_html/lists/admin/ui/phplist-ui-bootlist/logo.svg
  • Descargamos Aqui
  • Y remplazamos en la dirección
/var/www/html/Sistemas/comunicados.siua.ac.cr/public_html/lists/images

Usuarios

  • Creamos un usuario administrador
  • Creamos 2 atributos para los administradores «Universidad» y «Teléfono»

Cambios adicionales

  • Abrir
nano /var/www/html/Sistemas/comunicados.siua.ac.cr/public_html/lists/admin/locale/es/phplist.po
  • Modificar
#: public_html/lists/admin/lib.php:376
msgid "You have requested a new password for phpList."
msgstr "Usted ha solicitado una nueva contraseña para phpList."
X
msgstr "Usted ha solicitado una nueva contraseña para Comunicados-SIUA."



msgstr "Para fijar una nueva contraseña, pulse el siguiente enlace:"
X
msgstr "Para crear la nueva contraseña, haga clic en el siguiente enlace:"


msgstr "Suscríbase a nuestro boletín"
X
msgstr "Suscríbase a Comunicados-SIUA"

Pagina de suscripción

  • Para crear una página de suscripción

Subscripción SIUA

  • Título
Subscripción Comunicados-SIUA
  • Idioma
  • Introducción
<h3 class="ps_titulo_siua" >
Bienvenido a Comunicados-SIUA gracias por su interés.
</h3>
<p class="mb20">
Este es un canal de comunicación electrónico entre la Sede Interuniversitaria de Alajuela y cualquier persona que desee recibir por medio de correo electrónico; importante información como noticias, actividades, invitaciones y otros de parte de la SIUA.
</p>
<p class="mb40">
Para suscribirse en una o más de nuestras listas disponibles por favor siga los siguientes pasos:
<ol  class="mb40">
<li>Digite su correo electrónico.</li>
<li>Digite la confirmación del  correo electrónico.</li>
<li>Marque todas las listas a las que desea suscribirse.</li>
<li>Y haga clic en el botón <b>"Registrar"</b></li>
</ol>
</p>
  • Cabecera Igual (No es necvesario modificaer)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#2C2C2C"/>
<link rel="apple-touch-icon" href="./images/phplist-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="./images/phplist-touch-icon.png" />
<link rel="stylesheet" href="admin/ui/phplist-ui-bootlist/css/style.css" />
<link rel="stylesheet" href="/styles/estilo_siua.css" type="text/css" /> 
</head>

<body class="fixed invisible">

<div id="container">

<div id="header" class="navbar navbar-inverse">
<div id="rack-functions" class="container">
	<h1 id="logo"><a href="http://[WEBSITE]" title="Visite nuestro sitio">[ORGANISATION_NAME]</a></h1>
</div>
</div>
<div id="wrapper" class="container">
<div id="mainContent">

<div class="panel">
<br />
<div class="content  well">
  • pie de página (No es necvesario modificaer)
</div>
</div>
</div><!-- ENDOF #mainContent-->
</div><!-- ENDOF .wrapper -->
</div><!-- ENDOF #container -->

<div id="footer">
<div id="footerframe">
<ul class="list-unstyled">
<li>&nbsp;</li>
</ul>
</div>
</div>

<script type="text/javascript" src="admin/ui/phplist-ui-bootlist/js/jquery.min.js"></script>
<script type="text/javascript" src="admin/js/phplistapp.js"></script>
<script type="text/javascript" src="admin/ui/phplist-ui-bootlist/js/dist/phpList_ui_bootlist.min.js"></script>
<script>
/* do not remove this from here */
$(document).ready(function(){
    if ( $('body').hasClass('invisible') ){
        applyCustomFormatting(); applyJqueryUiTabMigration();
    }
	$('#edit_list_categories input.form-control').tagsinput('refresh');

});
</script>
</body>

</html>
  • Página de agradecimiento
<h3 class="ps_titulo_siua" >
Gracias por suscribirse a nuestras listas.
</h3>
<p class="mt40 mb40">
Su correo electrónico ha sido agregado a nuestro sistema  (Comunicados-SIUA). En breve recibirá un correo electrónico solicitando confirmación. Por favor, haga clic en el link de ese mensaje para confirmar la suscripción.
</p>
  • Texto a mostrar cuando la suscripción con una petición AJAX sea satisfactoria
<h3 class="ps_titulo_siua" >
Gracias por suscribirse a nuestras listas.
</h3>
<p class="mt40 mb40">
Su correo electrónico ha sido agregado a nuestro sistema  (Comunicados-SIUA). En breve recibirá un correo electrónico solicitando confirmación. Por favor, haga clic en el link de ese mensaje para confirmar la suscripción.
</p>
  • Botón y opciones
  • Aquí podriamos escoger cuales listas públicar
  • Ahora creamos el archivo
nano /var/www/html/Sistemas/comunicados.siua.ac.cr/public_html/lists/styles/estilo_siua.css
  • Y le agregamos

Subscripción UNA

  • Creamos una nueva página de subscripción
  • Título
Subscripción Comunicados-SIUA-UNA
  • Introducción
<h3 class="ps_titulo_una" >
Bienvenido a Comunicados-SIUA-UNA gracias por su interés.
</h3>
<p class="mb20">
Este es un canal de comunicación electrónico entre la Universidad Nacional de Costa Rica de la Sede Interuniversitaria de Alajuela y cualquier persona que desee recibir por medio de correo electrónico; importante información como noticias, actividades, invitaciones y otros de parte de la SIUA-UNA.
</p>
<p class="mb40">
Para suscribirse en una o más de nuestras listas disponibles por favor siga los siguientes pasos:
<ol  class="mb40">
<li>Digite su correo electrónico.</li>
<li>Digite la confirmación del  correo electrónico.</li>
<li>Marque todas las listas a las que desea suscribirse.</li>
<li>Y haga clic en el botón <b>"Registrar"</b></li>
</ol>
</p>
  • Cabecera (Es igual solo hay que cambiar estilo_una.css)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#2C2C2C"/>
<link rel="apple-touch-icon" href="./images/phplist-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="./images/phplist-touch-icon.png" />
<link rel="stylesheet" href="admin/ui/phplist-ui-bootlist/css/style.css" />
<link rel="stylesheet" href="/styles/estilo_siua.css" type="text/css" /> 
</head>

<body class="fixed invisible">

<div id="container">

<div id="header" class="navbar navbar-inverse">
<div id="rack-functions" class="container">
	<h1 id="logo"><a href="http://comunicados.siua.ac.cr" title="Visite nuestro sitio">[ORGANISATION_NAME]</a></h1>
</div>
</div>
<div id="wrapper" class="container">
<div id="mainContent">

<div class="panel">
<br />
<div class="content  well">
  • Pie de página igual
  • Página de agradecimiento y Texto a mostrar cuando la suscripción con una petición AJAX sea satisfactoria
<h3 class="ps_titulo_una" >
Gracias por suscribirse a nuestras listas.
</h3>
<p class="mt40 mb40">
Su correo electrónico ha sido agregado a nuestro sistema  (Comunicados-SIUA-UNA). En breve recibirá un correo electrónico solicitando confirmación. Por favor, haga clic en el link de ese mensaje para confirmar la suscripción.
</p>
  • En la selección de las listas
  • Y en Mensajes de transacciones modificar todo a SIUA-UNA
  • Y creamos el archivo estilo_una.css
nano /var/www/html/Sistemas/comunicados.siua.ac.cr/public_html/lists/styles/estilo_una.css
  • Agregamos
/***********************************************/
/***********        GENERALES    ***************/
/***********************************************/

/* =================================*/
/* =========  HTML BODY  ===========*/
/* =================================*/
html, body{
	font-size: 12px;
	color: #4D5B6D;
}


/* =================================*/
/* =========   TEXTO    ============*/
/* =================================*/
.error,
.text-danger{
	color: #c62828;
}

/* =================================*/
/* =========   MARGIN   ============*/
/* =================================*/

/*  margin bottom 20*/
.mb20{
	margin-bottom: 20px;
}
/*  margin bottom 40*/
.mb40{
	margin-bottom: 40px;
}


/* =================================*/
/* ========= JUMBOTRON  ============*/
/* =================================*/

/* jumbotron */
.jumbotron{
	background-color: #eceff1;
	padding: 20px;
	box-sizing: border-box;

}

/* quitar border radius */
.container .jumbotron, .container-fluid .jumbotron{
	border-radius: 0px;
}

/* Quitar border */
body.fixed .content .jumbotron tbody {
    border: 0px solid #EEE;
}


/* crear espacios entre los campos */
body.fixed .content .jumbotron td {
    padding: 5px 25px;
}



/* =================================*/
/* =========   BOTONES    ==========*/
/* =================================*/
.btn-primary{
	background-color: #4D5B6D;
	border: 0px;
}

.btn-primary:hover{
	background-color: #FCAF3E;
	border: 0px;
}


/* =================================*/
/* =========   ENLACES    ==========*/
/* =================================*/

a{
	text-decoration: none !important;
}

a:hover,
a:focus,
a:active{
	color: #FA3;
}



/* =================================*/
/* =========   POWERBY    ==========*/
/* =================================*/
.poweredby{
	display: none;
}


/* =================================*/
/* =========   ESTRUCTURA   ========*/
/* =================================*/

.well{
    background-color: #FFF;
	padding: 0 !important;
	border: 1px solid #EEEEEC;
}

.well p{
	padding-left: 15px;
	padding-right: 15px;
}


/* header de pagina principal */
.navbar-inverse {
    background-color: #0F2742;
    border: 0;
    border-radius: 0;
    border-bottom: 6px solid #2BA0AB;

    min-height: 130px;
}


/* titulo sistema */
h1#logo a{
	font-size: 2rem !important;
}

.panel-default > .panel-heading {
    color: #FFF;
    background-color: #4D5B6D;
    border-color: #4D5B6D;
    text-transform: uppercase;
}

div#mainContent div.panel div.content.well h3{
	background-color: #223851;
	border-bottom: 6px solid #4D5B6D;
	padding: 20px;
	color: #FFF;
	text-align: center;
}

div#accordion div.panel h3.panel-title{
	background-color: #0F2742 !important;
	border-bottom: 6px solid #4D5B6D;
	padding: 20px;
	color: #FFF;
	text-align: center;
}


div#accordion div.panel .panel-heading {
    padding: 0px 0px;
}

.panel-default {
    border-color: #4D5B6D;
}

/* linea del header */
h1#logo{
	text-align: center;
}


#rack-functions{
	padding-top: 25px;

}
/* enlace de titulo  */
h1#logo a{
	text-decoration: none;
	font-size: 3rem;
}

h1#logo a:hover{
	color: #FA3;
}

/* =================================*/
/* ========   subscripcion   =======*/
/* =================================*/
.pagina_subscripcion,
.error{
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
}

form[name="subscribeform"] {
  padding: 20px;
}

input[name="unsubscribe"] {
  margin-left: 20px;
}









/***********************************************/
/*********** PAGINAS SUSCRIPCION  **************/
/***********************************************/



.ps_titulo_siua{
	background-color: #223851 !important;
	border-bottom: 6px solid #4D5B6D !important;
	color: #FFF;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 5px;
	padding-right: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	font-size: 1.6rem;
}

.ps_titulo_charla{
	background-color: #4D5B6D !important;
	border-bottom: 6px solid #82CA5D !important;
	color: #FFF;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 5px;
	padding-right: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	font-size: 1.6rem;	
}


.ps_titulo_charla_verde_agua{
	background-color: #4D5B6D !important;
	border-bottom: 6px solid #2BA0AB !important;
	color: #FFF;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 5px;
	padding-right: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	font-size: 1.6rem;	
}


/**************************************************************************************************************************************************/
/*************************************************** PC UGIT , PORTAIL UGIT , Tablet horizontal ***************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 1200px) {

    /***********************************************/
	/***********        GENERALES    ***************/
	/***********************************************/

	/* =================================*/
	/* =========  HTML BODY  ===========*/
	/* =================================*/
	html, body{
		font-size: 14px;
	}

	/* =================================*/
	/* ========= JUMBOTRON  ============*/
	/* =================================*/

	/* jumbotron */
	.jumbotron{
		padding: 20px;
	}

	/* crear espacios entre los campos */
	body.fixed .content .jumbotron td {
	    padding: 5px 25px;
	}


	/* =================================*/
	/* =========   ESTRUCTURA   ========*/
	/* =================================*/

	.well p{
		padding-left: 15px;
		padding-right: 15px;
	}


	/* header de pagina principal */
	.navbar-inverse {
	    min-height: 130px;
	}


	/* titulo sistema */
	h1#logo a{
		font-size: 2rem !important;
	}


	div#mainContent div.panel div.content.well h3{
		padding: 20px;
	}

	div#accordion div.panel h3.panel-title{
		padding: 20px;
	}

	#rack-functions{
		padding-top: 25px;

	}
	/* enlace de titulo  */
	h1#logo a{
		font-size: 3rem;
	}

	/* =================================*/
	/* ========   subscripcion   =======*/
	/* =================================*/
	.pagina_subscripcion,
	.error{
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	form[name="subscribeform"] {
	  padding: 20px;
	}

	input[name="unsubscribe"] {
	  margin-left: 20px;
	}


	/***********************************************/
	/*********** PAGINAS SUSCRIPCION  **************/
	/***********************************************/



	.ps_titulo_siua{
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.6rem;
	}

	.ps_titulo_charla{
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.6rem;	
	}


	.ps_titulo_charla_verde_agua{
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.6rem;	
	}   
}


/**************************************************************************************************************************************************/
/******************************************************************  ? ****************************************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    body{
       /*background-color: #23C6B6; /*verde agua*/
    }
     
}


/**************************************************************************************************************************************************/
/******************************************************   Tablet vertical    **********************************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    body{
       /*background-color: #1A1ADD; /*azul*/
    }
   
}
/**************************************************************************************************************************************************/
/***************************************        celular S6 horizontal chrome y firefox       ******************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    body{
        /*background-color: #D81CBC; /*rosado*/
    }
}

/**************************************************************************************************************************************************/
/****************************************         celular S6 vertical chrome y firefox        *****************************************************/
/**************************************************************************************************************************************************/
@media only screen and (max-width: 479px) {
    body{
        /*background-color: #EAE60E; /*amarillo*/
    }
}

Modificación de logos

  • Descargamos los archivos de aquí
  • Y modificamos el archivo logo.svg en la ruta
/var/www/html/phplist/public_html/lists/admin/ui/phplist-ui-bootlist
  • Y el resto de archivos en las rutas
/var/www/html/phplist/public_html/lists/images

y

/var/www/html/phplist/public_html/lists/admin/images

Configuraciones Adicionales

  • Personalizar mensajes en el archivo
nano /var/www/html/phplist/public_html/lists/admin/locale/es/phplist.po
  • Y modificamos
msgid "You have requested a new password for phpList."
msgstr "Usted ha solicitado una nueva contraseña para phpList."
X
msgstr "Usted ha solicitado una nueva contraseña para Comunicados-UNA."



msgstr "Para fijar una nueva contraseña, pulse el siguiente enlace:"
X
msgstr "Para crear la nueva contraseña, haga clic en el siguiente enlace:"


msgstr "Suscríbase a nuestro boletín"
X
msgstr "Suscríbase a Comunicados-UNA"

Personalización

  • Descargamos el favicon
  • Y lo descomprimimos en la ruta
/var/www/html/phplist/public_html/lists/admin/images
  • Vamos a Menú: Config / Ajustes / Configuración Encabezado de las páginas públicas. y modificamos
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#2C2C2C"/>
<link rel="apple-touch-icon" href="./images/phplist-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="./images/phplist-touch-icon.png" />
<link rel="stylesheet" href="admin/ui/phplist-ui-bootlist/css/style.css" />
<link rel="stylesheet" href="/styles/ugit.css" type="text/css" />
</head>

<body class="fixed invisible">

<div id="container">

<div id="header" class="navbar navbar-inverse">
<div id="rack-functions" class="container">
<h1 id="logo"><a href="http://phplist.una.ac.cr" title="Visite nuestro sitio">[ORGANISATION_NAME]</a></h1>
</div>
</div>
<div id="wrapper" class="container">
<div id="mainContent">

<div class="panel">
<br />
<div class="content well">
  • por esto
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!-- ******************************************************************************* -->
<!-- ***************************    Color    *************************************** -->
<!-- ******************************************************************************* -->
<meta name="theme-color" content="#CD1719"/>
<meta name="msapplication-TileColor" content="#CD1719">

<!-- ******************************************************************************* -->
<!-- ***************************    Datos    *************************************** -->
<!-- ******************************************************************************* -->
<meta charset="utf-8">
<meta name="author" content="Gustavo Matamoros González">
<meta name="description" content="Sistema de comunicados Universidad Nacional">


<!-- ******************************************************************************* -->
<!-- ***************************    ICONO    *************************************** -->
<!-- ******************************************************************************* -->
<link rel="icon" type="image/png" href="./images/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="./images/favicon.svg" />
<link rel="shortcut icon" href="./images/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png" />
<link rel="manifest" href="./images/site.webmanifest" />

<meta name="msapplication-TileImage" content="./images/favicon-SIUA/ms-icon-144x144.png">


<!-- ******************************************************************************* -->
<!-- ***************************    Adicionales ************************************ -->
<!-- ******************************************************************************* -->
<link rel="stylesheet" href="admin/ui/phplist-ui-bootlist/css/style.css" />

<!-- ******************************************************************************* -->
<!-- ***************************    Estilo SIUA ************************************ -->
<!-- ******************************************************************************* -->
<link rel="stylesheet" href="/styles/estilo_una.css" type="text/css" /> 


</head>

<body class="fixed invisible">

<div id="container">

<div id="header" class="navbar navbar-inverse">
<div id="rack-functions" class="container">
	<h1 id="logo"><a href="http://[WEBSITE]" title="Visite nuestro sitio">[ORGANISATION_NAME]</a></h1>
</div>
</div>
<div id="wrapper" class="container">
<div id="mainContent">

<div class="panel">
<br />
<div class="content  well">
  • Abrimos el archivo
nano /var/www/html/phplist/public_html/lists/admin/ui/phplist-ui-bootlist/publicpagetop.php
  • Modificamos
<?php
/*
  We request you retain the full headers below including the links.
  This not only gives respect to the large amount of time given freely
  by the developers  but also helps build interest, traffic and use of
  PHPlist, which is beneficial to it's future development.

  Michiel Dethmers, phpList Ltd 2003 - 2015
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $strLancode?>" lang="<?php echo $strLancode?>" dir="<?php echo $strLandir?>">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta name="License" content="GNU Affero General Public License, http://www.gnu.org/licenses/agpl.html" />
<meta name="Author" content="Michiel Dethmers - http://www.phplist.com" />
<meta name="Copyright" content="Michiel Dethmers, phpList Ltd - http://phplist.com" />
<meta name="Powered-By" content="phpList version <?php echo VERSION?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="SHORTCUT ICON" href="./images/phplist.ico" />
  • Por esto
<?php
/*
  We request you retain the full headers below including the links.
  This not only gives respect to the large amount of time given freely
  by the developers  but also helps build interest, traffic and use of
  PHPlist, which is beneficial to it's future development.

  Michiel Dethmers, phpList Ltd 2003 - 2015
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $strLancode?>" lang="<?php echo $strLancode?>" dir="<?php echo $strLandir?>">
<head>

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta name="License" content="GNU Affero General Public License, http://www.gnu.org/licenses/agpl.html" />
<meta name="Author" content="Gustavo Matamoros González" />
<meta name="Copyright" content="Michiel Dethmers, phpList Ltd - http://phplist.com" />
<meta name="Powered-By" content="phpList version <?php echo VERSION?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="SHORTCUT ICON" href="./images/favicon-96x96.png" />

Idioma

  • Abrimos el archivo
nano /var/www/html/phplist/public_html/lists/texts/spanish.inc
  • Modificamos
$strSubscribeTitle      = 'Suscríbase a nuestras listas de correo';
X
$strSubscribeTitle      = 'Comunicados-UNA';
  • Agregamos la siguiente linea al final
$strContactAdmin = 'Contactar administrador';
  • Abrimos el archivo
nano /var/www/html/phplist/public_html/lists/texts/english.inc
  • Modificamos
$strPreferencesTitle    = 'Update your preferences';
X
$strPreferencesTitle    = 'Actualizar sus datos';

$strUnsubscribeTitle    = 'Unsubscribe from our Newsletters';
X
$strUnsubscribeTitle    = 'Darse de baja de nuestras listas';

$strUnsubscribeInfo     = 'Unsubscribe from our newsletters';
X
$strUnsubscribeInfo     = 'Darse de baja de nuestras listas';

$strContactAdmin = 'Contact the administrator';
X
$strContactAdmin = 'Contact the administrator';

$strPersonalLocationSent = '<h3>Success! You should receive a message with your personal location shortly</h3>';
X
$strPersonalLocationSent = '<h3>¡Éxito! Pronto recibirá un correo con el enlace para modificar sus datos</h3>';

$strPersonalLocationInfo = '
  <p>This page requires a personal identification that can be found on each message that you receive.</p>
  <p>If you have clicked this location, and you get this error, please make sure to paste the entire line into the
  location box of your browser. Sometimes the location is wrapped over several lines.</p>
  <p>If you do not know the location, enter your email address in the box and click "Continue"</p>
';

X

$strPersonalLocationInfo = '
  <p>Para modificar sus datos personales, por favor digite su correo electrónico, registrado en la aplicación.</p>
  <p>Recuerde que mantener estos datos actualizados, nos permiten brindarle un mejor servicio.</p>
';

$strContinue            = 'Continue';
X
$strContinue            = 'Continuar';

$strUnsubscribe        = 'Unsubscribe';
X
$strUnsubscribe        = 'Darse de baja';

$strEnterEmail          = 'Please enter a valid email address';
X
$strEnterEmail          = 'Por favor digite con correo electrónico válido';

$strEmail               = 'Email address';
X
$strEmail               = 'Correo Electŕonico';

$strSubscribeInfo       = '<h3>Subscribe to our newsletters</h3>';
X
$strSubscribeInfo       = '<h3>Suscribirse a nuestras listas</h3>';

$strSubscribeTitle      = 'Subscribe to our Newsletters';
X
$strSubscribeTitle      = 'Suscribirse a nuestras listas';

$strConfirmEmail        = 'Confirm your email address';
X
$strConfirmEmail        = 'Confirme su correo electrónico';

$strPleaseSelect        = 'Please select the newsletters you want to sign up to';
X
$strPleaseSelect        = 'Por favor marque las listas de distribución a las cuales desea inscribirse';

$strThanks              = 'Thank you for subscribing to our newsletters.';
X
$strThanks              = 'Gracias por suscribirse a Comunicados-UNA.';


$strEmailConfirmation   = 'Your email address has been added to our system. You will receive a message with a request to confirm your membership. Please make sure to click the link in that message to confirm your subscription.';

$strEmailConfirmation   = 'Su dirección de correo electrónico ha sido agregada a nuestro sistema. Recibirá un mensaje con una solicitud para confirmar su correo electrónico. Asegúrese de hacer clic en el enlace de ese mensaje para confirmar su suscripción.';

$strSubmit              = 'Suscribirse';
X
$strSubmit              = 'Suscribirse';

LInk button sucripción

  • Le agregamos una clase CSS al boton de suscribir
nano /var/www/html/phplist/public_html/lists/index.php
  • modificamos las lineas 341 348
printf('<p><a href="'.getConfig('subscribeurl').'&id=%d">%s</a></p>', $row['id'],
                    strip_tags(stripslashes($row['title'])));

X
printf('<p class="p-suscribe"><a href="'.getConfig('subscribeurl').'&id=%d">%s</a></p>', $row['id'],
                    strip_tags(stripslashes($row['title'])));



printf('<p><a href="'.getConfig('subscribeurl').'">%s</a></p>', $strSubscribeTitle);
X
printf('<p class="p-suscribe"><a href="'.getConfig('subscribeurl').'">%s</a></p>', $strSubscribeTitle);
  • Y 354
printf('<p><a href="'.getConfig('preferencesurl').'">%s</a></p>', $strPreferencesTitle);
X
printf('<p><a class="a-preferences" href="'.getConfig('preferencesurl').'">%s</a></p>', $strPreferencesTitle);

printf('<p><a href="'.getConfig('unsubscribeurl').'">%s</a></p>', $strUnsubscribeTitle);
X
printf('<p><a class="a-unsuscribe" href="'.getConfig('unsubscribeurl').'">%s</a></p>', $strUnsubscribeTitle);

'<p class=""><a href="'.
X
'<p class=""><a class="a-admin" href="'.
  • Creaos el archivo
nano /var/www/html/phplist/public_html/lists/styles/estilo_una.css
  • Agregamos
/***********************************************/
/***********        VARIABLES    ***************/
/***********************************************/
:root {
  --texto_principal: 	#4D5B6D;
  --texto_advertencia: 	#c62828;

  --color-gris-claro: 	#E8EDF2;
  
  --color-gris-claro2: 	#FBFBFD;
  --color-gris-medio: 	#5F6E80;
  --color-blanco:  		#FFF;
  --color-verde-agua: 	#2BA0AB;
  --color-azul-oscuro:  #223851;
  --siua:  #5F6E80;

  --ucr:  #39CDF5;
  --tec:  #0F417A;
  --una:  #E8352D;
  --uned: #FFBC3F;
  --utn:  #142F69;

  --verde-agua:  #2BA0AB;
  --verde:  #82CA5D;
  --naranja:  #FFAE22;
}



/***********************************************/
/***********        GENERALES    ***************/
/***********************************************/

/* =================================*/
/* =========  HTML BODY  ===========*/
/* =================================*/
html, body{
	font-size: 12px;
	color: var(--texto_principal);
	background-color: var(--color-gris-claro) !important;
}


/* =================================*/
/* =========   TEXTO    ============*/
/* =================================*/
.error,
.text-danger{
	color: var(--texto_advertencia);
}

/* =================================*/
/* =========   MARGIN   ============*/
/* =================================*/

/*  margin bottom 20*/
.mb20{
	margin-bottom: 20px;
}
/*  margin bottom 40*/
.mb40{
	margin-bottom: 40px;
}


/* =================================*/
/* ========= JUMBOTRON  ============*/
/* =================================*/

/* jumbotron */
.jumbotron{
	background-color: var(--color-gris-claro2) !important;
	padding: 20px;
	box-sizing: border-box;

}

/* quitar border radius */
.container .jumbotron, .container-fluid .jumbotron{
	border-radius: 0px;
}

/* Quitar border */
body.fixed .content .jumbotron tbody {
    border: 0px solid #EEE;
}


/* crear espacios entre los campos */
body.fixed .content .jumbotron td {
    padding: 5px 25px;
}


/* =================================*/
/* =========   BOTONES    ==========*/
/* =================================*/

.button{
	border: 0px !important;
}
.btn-primary, body.fixed .form-group input[type="checkbox"]+.btn-group .btn-default.active, .btn{
	background-color: var(--color-gris-medio) !important;
	color: var(--color-blanco) !important;
	border: none !important;
}

.btn-primary:hover, body.fixed .form-group input[type="checkbox"]+.btn-group .btn-default.active:hover,  .btn:hover{
	background-color: var(--una) !important;
	border: none !important;
}

div.btn-group label.btn.btn-default{
	border: 1px var(--color-gris-medio);
}
label.btn.btn-default {
    border: 1px solid var(--color-gris-medio) !important;
    margin-right: 4px !important;
    color: var(--color-gris-medio);
}

label.btn.btn-default span{
    color: var(--color-gris-medio);
}

form {
    padding-bottom: 5px;
}
/* =================================*/
/* =  ENLACES Suscripcion     ======*/
/* =================================*/
.p-suscribe{
	text-align: center;
	padding-bottom: 20px;;
}

.p-suscribe a{
	text-align: center;
	text-decoration: none !important;
	background-color: var(--color-gris-medio) !important;
	color: var(--color-blanco) !important;
	padding: 10px 20px;
	border-radius: 5px;
}

.p-suscribe a:hover{
	background-color: var(--una) !important;
	color: var(--color-blanco) !important;
}

a,
.a-preferences,
.a-unsuscribe,
.a-admin{
	font-size: 1.2rem;
	padding: 0;
	margin: 0px;
	color: var(--texto_principal) !important;
}

a:hover,
.a-preferences:hover,
.a-unsuscribe:hover,
.a-admin:hover{
	color: var(--una) !important;
	text-decoration: none !important;
}

.contenedor-pagina-suscripcion{
	background-color: var(--color-blanco);
	border-radius: 10px;;
}






/* =================================*/
/* =========   POWERBY    ==========*/
/* =================================*/
.poweredby{
	display: none;
}


/* =================================*/
/* =========   ESTRUCTURA   ========*/
/* =================================*/

.well{
    background-color: var(--color-blanco);
	padding: 0 !important;
	border: 0px solid #EEEEEC;
	box-shadow: none;
	border-radius: 5px;
}

.well p{
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 20px !important;
}



p.p-suscribe + p, p.p-suscribe + p + p, p.p-suscribe + p + p +p {
    padding-top: 0px !important;
    padding-bottom: 0px !important;  
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    background-color: var(--color-gris-claro) !important;
}

p.p-suscribe + p + p + p + div{
    background-color: var(--color-gris-claro) !important;
    text-align: center;
}

p.p-suscribe + p{
    padding-top: 20px !important;
}

/* header de pagina principal */
.navbar-inverse {
    background-color: var(--color-gris-medio) !important;
    border: 0;
    border-radius: 0;
    border-bottom: 6px solid var(--una) !important;

    min-height: 100px;
}


/* titulo sistema */
h1#logo a{
	font-size: 2rem !important;
	color: var(--color-blanco) !important;
}
h1#logo a: hover{
	color: var(--color-blanco) !important;
}

.panel-default > .panel-heading {
    color: #FFF;
    background-color: var(--color-gris-medio);
    border-color: #var(--color-gris-medio);
    text-transform: uppercase;
}

div#mainContent div.panel div.content.well h3{
	background-color: var(--color-gris-claro);
	border-bottom: 6px solid var(--color-gris-medio);
	padding: 20px;
	color: #FFF;
	text-align: center;
	color: var(--color-gris-medio) !important;
}

div#accordion div.panel h3.panel-title{
	background-color: var(--color-azul-oscuro); !important;
	border-bottom: 6px solid var(--color-gris-medio);
	padding: 20px;
	color: #FFF;
	text-align: center;
}


div#accordion div.panel .panel-heading {
    padding: 0px 0px;
}

.panel-default {
    border-color: var(--color-gris-medio);
}

/* linea del header */
h1#logo{
	text-align: center;
}


#rack-functions{
	padding-top: 25px;

}
/* enlace de titulo  */
h1#logo a{
	text-decoration: none;
	font-size: 3rem;
}

h1#logo a:hover{
	color: var(--color-verde-agua);
}

/* =================================*/
/* ========   subscripcion   =======*/
/* =================================*/
.pagina_subscripcion,
.error{
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
}

form[name="subscribeform"] {
  padding: 20px;
}

input[name="unsubscribe"] {
  margin-left: 20px;
}









/***********************************************/
/*********** PAGINAS SUSCRIPCION  **************/
/***********************************************/

.siua{
	border-bottom: 6px solid var(--siua) !important;
}
.ucr{
	border-bottom: 6px solid var(--ucr) !important;
}
.tec{
	border-bottom: 6px solid var(--tec) !important;
}
.una{
	border-bottom: 6px solid var(--una) !important;
}
.uned{
	border-bottom: 6px solid var(--uned) !important;
}
.utn{
	border-bottom: 6px solid var(--utn) !important;
}
.verde{
	border-bottom: 6px solid var(--verde) !important;
}
.verde-agua{
	border-bottom: 6px solid var(--verde-agua) !important;
}
.naranja{
	border-bottom: 6px solid var(--naranja) !important;
}

.titulo-pagina-inscripcion{
	background-color: var(--color-azul-oscuro) !important;
	
	color: var(--color-blanco);
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 5px;
	padding-right: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	font-size: 1.6rem;
	margin-bottom: 0;
}


.mensaje{
	background-color: var(--color-blanco) !important;
	padding: 15px;
}

/**************************************************************************************************************************************************/
/****************************************         celular S6 vertical chrome y firefox        *****************************************************/
/**************************************************************************************************************************************************/
@media only screen and (max-width: 479px) {
    .pagina_subscripcion{
        /*background-color: #EAE60E !important; /*amarillo*/
    }

    /***********************************************/
	/***********        GENERALES    ***************/
	/***********************************************/

	/* =================================*/
	/* =========  HTML BODY  ===========*/
	/* =================================*/
	html, body{
		font-size: 10px;
	}

	/* =================================*/
	/* ========= JUMBOTRON  ============*/
	/* =================================*/

	/* jumbotron */
	.jumbotron{
		padding: 5px;
	}

	/* crear espacios entre los campos */
	body.fixed .content .jumbotron td {
	    padding: 5px 25px;
	}


	/* =================================*/
	/* =========   ESTRUCTURA   ========*/
	/* =================================*/

	.well p{
		padding-left: 2px;
		padding-right: 2px;
	}


	/* header de pagina principal */
	.navbar-inverse {
	    min-height: 100px;
	}


	/* titulo sistema */
	h1#logo a{
		font-size: 1.6rem !important;
	}


	div#mainContent div.panel div.content.well h3{
		padding: 10px;
	}

	div#accordion div.panel h3.panel-title{
		padding: 10px;
	}

	#rack-functions{
		padding-top: 25px;

	}

	/* =================================*/
	/* ========   subscripcion   =======*/
	/* =================================*/
	.pagina_subscripcion,
	.error{
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	form[name="subscribeform"] {
	  padding: 20px;
	}

	input[name="unsubscribe"] {
	  margin-left: 20px;
	}


	/***********************************************/
	/*********** PAGINAS SUSCRIPCION  **************/
	/***********************************************/
	.titulo-pagina-inscripcion{
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.2rem;
	}
	.p-suscribe a{
		font-size: .8rem !important;
		padding: 5px 10px;

	}
}


/**************************************************************************************************************************************************/
/***************************************        celular S6 horizontal chrome y firefox       ******************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .pagina_subscripcion{
        /*background-color: #D81CBC !important; /*rosado*/
    }

    /***********************************************/
	/***********        GENERALES    ***************/
	/***********************************************/

	/* =================================*/
	/* =========  HTML BODY  ===========*/
	/* =================================*/
	html, body{
		font-size: 10px;
	}

	/* =================================*/
	/* ========= JUMBOTRON  ============*/
	/* =================================*/

	/* jumbotron */
	.jumbotron{
		padding: 5px;
	}

	/* crear espacios entre los campos */
	body.fixed .content .jumbotron td {
	    padding: 5px 25px;
	}


	/* =================================*/
	/* =========   ESTRUCTURA   ========*/
	/* =================================*/

	.well p{
		padding-left: 2px;
		padding-right: 2px;
	}


	/* header de pagina principal */
	.navbar-inverse {
	    min-height: 100px;
	}


	/* titulo sistema */
	h1#logo a{
		font-size: 1.6rem !important;
	}


	div#mainContent div.panel div.content.well h3{
		padding: 10px;
	}

	div#accordion div.panel h3.panel-title{
		padding: 10px;
	}

	#rack-functions{
		padding-top: 25px;

	}

	/* =================================*/
	/* ========   subscripcion   =======*/
	/* =================================*/
	.pagina_subscripcion,
	.error{
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	form[name="subscribeform"] {
	  padding: 20px;
	}

	input[name="unsubscribe"] {
	  margin-left: 20px;
	}


	/***********************************************/
	/*********** PAGINAS SUSCRIPCION  **************/
	/***********************************************/
	.titulo-pagina-inscripcion{
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.2rem;
	}
	.p-suscribe a{
		font-size: .8rem !important;
		padding: 5px 10px;

	}
}


/**************************************************************************************************************************************************/
/******************************************************   Tablet vertical    **********************************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pagina_subscripcion{
       /*background-color: #a60000 !important; /*azul*/
    }
   
}
/**************************************************************************************************************************************************/
/******************************************************************  ? ****************************************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pagina_subscripcion{
       /*background-color: #23C6B6 !important; /*verde agua*/
    }
     
}






/**************************************************************************************************************************************************/
/*************************************************** PC UGIT , PORTAIL UGIT , Tablet horizontal ***************************************************/
/**************************************************************************************************************************************************/
@media only screen and (min-width: 1200px) {

    /***********************************************/
	/***********        GENERALES    ***************/
	/***********************************************/

	/* =================================*/
	/* =========  HTML BODY  ===========*/
	/* =================================*/
	html, body{
		font-size: 14px;
	}

	/* =================================*/
	/* ========= JUMBOTRON  ============*/
	/* =================================*/

	/* jumbotron */
	.jumbotron{
		padding: 20px;
	}

	/* crear espacios entre los campos */
	body.fixed .content .jumbotron td {
	    padding: 5px 25px;
	}


	/* =================================*/
	/* =========   ESTRUCTURA   ========*/
	/* =================================*/

	.well p{
		padding-left: 15px;
		padding-right: 15px;
	}


	/* header de pagina principal */
	.navbar-inverse {
	    min-height: 130px;
	}



	div#mainContent div.panel div.content.well h3{
		padding: 20px;
	}

	div#accordion div.panel h3.panel-title{
		padding: 20px;
	}

	#rack-functions{
		padding-top: 25px;

	}
	/* enlace de titulo  */
	h1#logo a{
		font-size: 3rem !important;
	}

	/* =================================*/
	/* ========   subscripcion   =======*/
	/* =================================*/
	.pagina_subscripcion,
	.error{
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	form[name="subscribeform"] {
	  padding: 20px;
	}

	input[name="unsubscribe"] {
	  margin-left: 20px;
	}


	/***********************************************/
	/*********** PAGINAS SUSCRIPCION  **************/
	/***********************************************/
	.titulo-pagina-inscripcion{
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.6rem;
	}
  
}

Modificar plantilla defecto

  • Para modificar la plantilla defecto de las campañas ingresamos a menú -> Campañas -> Gestionar las plantillas de las campañas
  • Se nos listan las plantillas
  • Le damos editar
  • Esta es la plantilla defecto que utilizará el sistema para todos los envios automáticos
  • Modificamos su nombre
  • Y modificamos esto
<div style="margin:0; text-align:center; width:100%; background:#333;min-width:240px;height:100%;"><br />
    <div style="width:96%;margin:0 auto; border-top:6px solid #369;border-bottom: 6px solid #369;background:#DEF;" >
        <h3 style="margin-top:5px;background-color:#69C; font-weight:normal; color:#FFF; text-align:center; margin-bottom:5px; padding:10px; line-height:1.2; font-size:21px; text-transform:capitalize;">[SUBJECT]</h3>
        <div style="text-align:justify;background:#FFF;padding:20px; border-top:2px solid #369;min-height:200px;font-size:13px; border-bottom:2px solid #369;">[CONTENT]<div style="clear:both"></div></div>
        <div style="clear:both;background:#69C;font-weight:normal; padding:10px;color:#FFF;text-align:center;font-size:11px;margin:5px 0px">[FOOTER]<br/>[SIGNATURE]</div>
    </div>
<br /></div>
  • Por esto
<div style="margin:0; text-align:center; width:100%; background:#fff;min-width:240px;height:100%;"><br />
    <div style="width:96%;margin:0 auto; border-top:6px solid #515B67;border-bottom: 6px solid #CD1719;background:#fff;" >
        <h3 style="margin-top:5px;background-color:#CD1719; font-weight:normal; color:#FFF; text-align:center; margin-bottom:5px; padding:10px; line-height:1.2; font-size:21px; text-transform:capitalize;"><img src="http://phplist.una.ac.cr/admin/ui/phplist-ui-bootlist/logo.svg"/> </br>
        </br>[SUBJECT]</h3>
        <div style="text-align:justify;background:#FFF;padding:20px; border-top:2px solid #515B67;min-height:200px;font-size:13px; border-bottom:2px solid #515B67;">[CONTENT]<div style="clear:both"></div></div>
        <div style="clear:both;background:#515B67;font-weight:normal; padding:10px;color:#FFF;text-align:center;font-size:11px;margin:5px 0px">[FOOTER]<br/>[SIGNATURE]</div>
    </div>
<br /></div>
  • Salvamos y podemos enviar una prueba
La imagen tiene un atributo ALT vacío; su nombre de archivo es Seleccion_459.png
  • Esto esta utilizando una imagen por lo que el sistema recomienda subir las images para que este correctamente disponibles
  • Le damos subir y guardar
  • Una vez modificada la plantilla va recibir los tres correos del sistema para que los pueda verificar
  • ejemplo

Habilitar el sistema para adjuntos

  • Para permitir adjuntos en el sistema agrege al archivo de configuración
define('ALLOW_ATTACHMENTS', 1);
mkdir -p /var/www/html/phplist/public_html/lists/uploadimages
chmod 777 -R  /var/www/html/phplist/public_html/lists/uploadimages
  • Dentro de la carpeta
/var/www/html/phplist/public_html/lists/admin/plugins
  • Y ejecutamos
chown -R www-data:www-data AttachmentPlugin.php
chown -R www-data:www-data AttachmentPlugin

chmod 777 -R AttachmentPlugin
chmod 777 -R AttachmentPlugin.php
  • Ahora podemos ingresar al sistema al menú principal a «Config->Gestionar complementos» y habilitamos el plugin

Ruta de adjuntos

  • Vamos a aprovechar a modificar la ruta de los adjuntos ya que por defecto van a /tmp y se reinicia el servidor por alguna razón estos desaparecen.
  • Creamos la carpeta para almacenar los adjuntos

mkdir -p /var/www/html/phplist/public_html/lists/Adjuntos

sudo chown -R www-data:www-data /var/www/html/phplist/public_html/lists/Adjuntos
sudo chmod -R 755 /var/www/html/phplist/public_html/lists/Adjuntos
  • Abrimos el archivo de configuración
nano /var/www/html/phplist/public_html/lists/config/config.php
  • Agregamos al final
$attachment_repository = '/var/www/html/phplist/public_html/lists/Adjuntos';
  • Verificamos que sendmail este disponible
ls -l /usr/sbin/sendmail
  • Buscamos el archivo de configuración de php
php --ini | grep "Loaded Configuration File"
  • Y abrimos el archivo de configuración que nos indica
nano /etc/php/8.1/cli/php.ini
  • Buscamos
sendmail_path
  • Agregamos
sendmail_path = "/usr/sbin/sendmail -t -i"
  • Reiniciamos apache
systemctl restart apache2 
systemctl status apache2
  • Ahora debemos aumentare el tamaño de adjuntos en postfix a 64M NOTA lo mismo que php
sudo postconf -e 'message_size_limit = 67108864'
sudo systemctl restart postfix

#verificamos
postconf | grep message_size_limit
  • Ver log
tail -f /var/log/mail.log
  • Ahora podemos crear un mensaje de prueba y adjuntar un archivo pra poder comprobar que se almacenan correctamente