Phplist: Personalización

Favicon

Descargamos: /wp-content/uploads/2021/11/favicon-SIUA.zip
Y los descomprimimos en

cd var/www/html/Sistemas/comunicados.siua.ac.cr/public_html/lists/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" />

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

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


<!-- ******************************************************************************* -->
<!-- ***************************    ICONO    *************************************** -->
<!-- ******************************************************************************* -->
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon-SIUA/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon-SIUA/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon-SIUA/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon-SIUA/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon-SIUA/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon-SIUA/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon-SIUA/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon-SIUA/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon-SIUA/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="./images/favicon-SIUA/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-SIUA/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon-SIUA/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-SIUA/favicon-16x16.png">
<link rel="manifest" href="./images/favicon-SIUA/manifest.json">

<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_siua1.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/Sistemas/comunicados.siua.ac.cr/public_html/lists/admin/ui/phplist-ui-bootlist/publicpagetop.php

Modificamos

<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:

<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-SIUA/favicon-96x96.png" />

Idioma

Abrimos el archivo

nano /var/www/html/Sistemas/comunicados.siua.ac.cr/public_html/lists/texts/spanish.inc

Modificamos

$strSubscribeTitle      = 'Suscríbase a nuestras listas de correo';
X
$strSubscribeTitle      = 'Comunicados-SIUA';

$strUnsubscribeTitle    = 'Cancelar suscripción';
X
$strUnsubscribeTitle    = 'Cancelar suscripción';

Agregamos la siguiente linea al final

$strContactAdmin = 'Contactar administrador';

LInk button sucripción

Le agregamos una clase CSS al boton de suscribir

nano /var/www/html/Sistemas/comunicados.siua.ac.cr/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 class="a-subcribe" href="'.getConfig('subscribeurl').'&id=%d">%s</a></p></div>', $row['id'],
                    strip_tags(stripslashes($row['title'])));


printf('<p><a href="'.getConfig('subscribeurl').'">%s</a></p>', $strSubscribeTitle);
X
printf('<p class="p-suscribe"><a  class="a-subcribe" href="'.getConfig('subscribeurl').'">%s</a></p></div>', $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/Sistemas/comunicados.siua.ac.cr/public_html/lists/styles/estilo_siua.css

Agregamos

/***********************************************/
/***********        VARIABLES    ***************/
/***********************************************/
:root {
  --texto_principal: 	#4D5B6D;
  --texto_advertencia: 	#c62828;

  --color-gris-claro: 	#E8EDF2;
  --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-claro) !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{
	background-color: var(--color-gris-medio) !important;
	color: var(--color-blanco) !important;
	border: 0px;
}

.btn-primary:hover{
	background-color: var(--color-verde-agua) !important;
	border: 0px;
}


/* =================================*/
/* =  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(--color-verde-agua) !important;
}

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

.a-preferences:hover,
.a-unsuscribe:hover,
.a-admin:hover{

	color: var(--color-verde-agua) !important;
}

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

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


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

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

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


/* header de pagina principal */
.navbar-inverse {
    background-color: var(--color-azul-oscuro) !important;
    border: 0;
    border-radius: 0;
    border-bottom: 6px solid var(--color-verde-agua) !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-azul-oscuro);
	border-bottom: 6px solid var(--color-gris-medio);
	padding: 20px;
	color: #FFF;
	text-align: center;
}

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;
	}
  
}

Plantila Pagina Inscripcion SIUA

Título: Suscripción a: Comunicados-SIUA

Introducción

<div class="contenedor-pagina-suscripcion">
<h3 class="titulo-pagina-inscripcion siua" >
        <span>SIUA</span>
 <br>
	Suscripción a Comunicados
</h3>
<div class="pagina_subscripcion">
	<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>
</div>

Cabecera

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

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

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


<!-- ******************************************************************************* -->
<!-- ***************************    ICONO    *************************************** -->
<!-- ******************************************************************************* -->
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon-SIUA/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon-SIUA/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon-SIUA/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon-SIUA/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon-SIUA/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon-SIUA/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon-SIUA/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon-SIUA/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon-SIUA/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="./images/favicon-SIUA/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-SIUA/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon-SIUA/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-SIUA/favicon-16x16.png">
<link rel="manifest" href="./images/favicon-SIUA/manifest.json">

<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_siua.css" type="text/css" /> 

<title>Comunicados SIUA</title>
</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">

</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="titulo-pagina-inscripcion siua" >
Gracias por suscribirse a nuestras listas.
</h3>
<p class="mt40 mb40 mensaje">
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="titulo-pagina-inscripcion siua" >
Gracias por suscribirse a nuestras listas.
</h3>
<p class="mt40 mb40 mensaje">
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>

Mensaje al inscribirse / Solicitud de confirmación Comunicados-SIUA

<h3 style="text-align:center;">
Muchas gracias por su interés en la Sede Interuniversitaria de Alajuela
</h3>
Usted se ha suscrito a las siguientes listas de correo:
<br />
<br />
[LISTS]

<br />
Haga clic en el siguiente enlace para confirmar que realmente es usted:
<br />

[CONFIRMATIONURL]

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

Plantila Pagina Inscripcion UNA

Introducción

<div class="contenedor-pagina-suscripcion">
<h3 class="titulo-pagina-inscripcion una" >
	<span>UNA</span>
 <br>
	Suscripción a Comunicados
</h3>
<div class="pagina_subscripcion">
	<p class="mb20">
		Este es un canal de comunicación electrónico entre la Universidad Nacional de la Sede Interuniversitaria de Alajuela y cualquier persona que desee recibir por medio de correo electrónico; información importante como noticias, actividades, invitaciones, procesos  y otros por parte de la UNA-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>"Suscribir"</b></li>
		</ol>
	</p>
</div>

Cabecera

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

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

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


<!-- ******************************************************************************* -->
<!-- ***************************    ICONO    *************************************** -->
<!-- ******************************************************************************* -->
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon-SIUA/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon-SIUA/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon-SIUA/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon-SIUA/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon-SIUA/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon-SIUA/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon-SIUA/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon-SIUA/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon-SIUA/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="./images/favicon-SIUA/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-SIUA/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon-SIUA/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-SIUA/favicon-16x16.png">
<link rel="manifest" href="./images/favicon-SIUA/manifest.json">

<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_siua.css" type="text/css" /> 

<title>Comunicados SIUA</title>
</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

</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>

Pagina de agradecimiento y AJAX

<h3 class="titulo-pagina-inscripcion una" >
Gracias por suscribirse a nuestras listas.
</h3>
<p class="mt40 mb40 mensaje">
Su correo electrónico ha sido agregado a nuestro sistema  (Comunicados-UNA). En breve recibirá un correo electrónico solicitando confirmación. Por favor, haga clic en el enlace de este mensaje para confirmar la suscripción.
</p>

Webinar

Introducción

<div class="contenedor-pagina-suscripcion">
<h3 class="titulo-pagina-inscripcion verde-agua" >
  <span>Sede Interuniversitaria de Alajuela</span>
 <br>
	Webinar: "Principales resultados del 8° Informe Estado de la Educación". 
</h3>
<div class="pagina_subscripcion">
<p class="mb20">&nbsp;</p>	
<p class="mb20">
		La Sede Interuniversitaria de Alajuela, tiene el agrado de invitarle al  webinar titulado "Principales resultados del 8° Informe Estado de la Educación", impartida por la Licda. Katherine Barquero Mejías, Investigadora de PEN.
	</p>
<p class="mb20">&nbsp;</p>	
<p class="mb20">
<table style="width: 500px; margin:0 auto; font-size: 1.4rem;border: 1px solid #FFF;">
<tr>
<td style="background-color: var(--verde-agua); color:#FFF; font-weight: bold;border: 1px solid #FFF;">
Fecha:
</td>
<td style=" font-weight: bold;border: 1px solid #FFF;">
25 de noviembre de 2021
</td>
</tr>
<tr>
<td style="background-color: var(--verde-agua); color:#FFF; font-weight: bold;border: 1px solid #FFF;">
Hora:
</td>
<td style=" font-weight: bold;border: 1px solid #FFF;">
1:30 p.m. – 11:00 a.m. 
</td>
</tr>
</table>

</p>
<p class="mb20">&nbsp;</p>	
	<p class="mb40">
		Para suscribirse en esta capacitación por favor siga los siguientes pasos:
		<ol  class="mb40">
			<li>Digite su correo electrónico. <strong class="text-danger"> (NOTA: por favor verifique que no tiene un espacio en blanco al final del correo).</strong></li>
			<li>Digite la confirmación del  correo electrónico.</li>
                       <li>Digite su nombre completo.</li>
                        <li>Seleccione su perfil.</li>
                        <li>Seleccione su institución.</li>
                        <li>Si su institución es (OTRA) digite el nombre de la institución</li>
			<li>Y haga clic en el botón <b>"Suscribir"</b></li>
		</ol>
	</p>
<p class="mb40">
<b>NOTA:</b> Una vez inscrito usted recibirá un correo electrónico el día del evento con el link de la capacitación.
</p>
<p class="mb20">&nbsp;</p>	


</div>

Cabecera

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

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

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


<!-- ******************************************************************************* -->
<!-- ***************************    ICONO    *************************************** -->
<!-- ******************************************************************************* -->
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon-SIUA/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon-SIUA/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon-SIUA/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon-SIUA/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon-SIUA/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon-SIUA/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon-SIUA/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon-SIUA/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon-SIUA/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="./images/favicon-SIUA/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-SIUA/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon-SIUA/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-SIUA/favicon-16x16.png">
<link rel="manifest" href="./images/favicon-SIUA/manifest.json">

<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_siua.css" type="text/css" /> 

<title>Comunicados SIUA</title>
</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">

Agradecimiento y AJAX

<h3 class="titulo-pagina-inscripcion verde-agua" >
Gracias por suscribirse a nuestras listas.
</h3>
<p class="mt40 mb40 mensaje">
Su correo electrónico ha sido agregado a nuestro sistema. En breve recibirá un correo solicitando confirmación. Por favor, haga clic en el link de ese mensaje para confirmar la suscripción.
</p>