Guía Básica para la actualización de la línea gráfica

en páginas web institucionales

www.mitic.gov.py
DOCUMENTO

Título: Guía Básica para la actualización de la línea gráfica en páginas web

institucionales

Nombre del archivo: DOC-GBAPWI MITIC-01

Código: DOC-GBAPWI MITIC-01

Soporte lógico: https://drive.mitic.gov.py

Fecha: 16/08/2023

Versión: 1.0

REGISTRO DE CAMBIO

Versión: Fecha: Motivo del cambio:

1.0 16/08/2023 Versión inicial

DISTRIBUCIÓN DEL DOCUMENTO

Nombre: Ministerio de Tecnologías de la Información y Comunicación - MITIC

Área: Dirección General del Gobierno Electrónico - DGGE

Documento Público: https://drive.mitic.gov.py

Elaborado por: Dirección de Implementaciones

Verificado por: Dirección General de Gobierno Electrónico

Aprobado por: Dirección General de Gobierno Electrónico

www.mitic.gov.py
 Introducción

La presente guía tiene como fin orientar a administradores de páginas web

institucionales para la implementación de la nueva norma de gobierno - línea
gráfica.

Requerimientos

Esta guía está probada para los siguientes CMS que utilicen la plantilla provista
por el MITIC:

Plantilla web Accesibility CMS WordPress: https://template.mitic.gov.py/v4/

CMS Concrete - Plantilla MITIC

Plantilla web Accesibility CMS WordPress:

Paso 1: Descargar la línea gráfica publicada en:

https://www.mitic.gov.py/materiales/norma-de-gobierno-linea-grafica

Paso 2: Autenticarse en el sitio institucional con las credenciales con privilegios

administrativos: https://misitio/wp-admin/

www.mitic.gov.py
Paso 3: Dirigirse en el apartado PERSONALIZAR

- Ingresar en Identidad del sitio:

www.mitic.gov.py
- Eliminar logo viejo y subir el nuevo logo

- Cambiar Icono institucional

www.mitic.gov.py
 Resultado

- Para actualizar a los colores actuales dirigirse en personalizar > css adicional

www.mitic.gov.py
- En la siguiente sección

- Insertar el código css:

/*Ajustes de la Cabecera*/
header picture img {
max-width: 80%;
}

/*Menú Principal*/
.bg-dark-blue {
background-color: #EA2428;
}
nav#panel ul li a.nav-link, nav#panel ul li button.nav-link,
nav.inner-nav ul li a.nav-link, nav.inner-nav ul li button.nav-link {
color: #ffff!important;
}
nav#panel ul li.nav-item div.dropdown-menu, nav#panel ul li.nav-item
ul.dropdown-menu, nav.inner-nav ul li.nav-item div.dropdown-menu,
nav.inner-nav ul li.nav-item ul.dropdown-menu {
background-color: #EA2428;
}
nav#panel ul li.nav-item div.dropdown-menu a.dropdown-item:hover,
nav#panel ul li.nav-item ul.dropdown-menu a.dropdown-item:hover,

www.mitic.gov.py
nav.inner-nav ul li.nav-item div.dropdown-menu a.dropdown-item:hover,
nav.inner-nav ul li.nav-item ul.dropdown-menu a.dropdown-item:hover {
background-color: #00000030!important;
}

/*Pie de página*/
footer #powered-by {
background-color: #00529C;
}
footer #powered-by a {
color: #FFFFFF;
}

/*Titulo Noticias*/
.item.item-normal .item-info .item-title h2 {
color: #0E1820;
}
h2,h3,h4 a {
color: #0E1820;
}
/*Secciones*/
#sd-menu a {
color: #0E1820;
}

/*Redes Sociales*/
.share-actions ul li a {
color: #00529C;
}

/*Menú Responsive*/
nav#sidebar {
background: #EA2428;
}
nav#sidebar ul ul a {
background: #EA2428;
}
nav#sidebar .sidebar-header {
background: #EA2428;
}
nav#sidebar #dismiss {
background: #dc3545;
}

/*Botón accesibilidad*/
header .accesibility-icons-container {
color: #EA2428;
}
aside {
background-color: #EA2428;
}

www.mitic.gov.py
CMS Concrete - Plantilla MITIC

Paso 1: Autenticarse en el sitio institucional con las credenciales con privilegios

administrativos:

https://misitio/index.php/login

Paso 2: Ingresar en Modo Edición

- Click en el logo, editar bloque y reemplazar logo viejo por el nuevo

www.mitic.gov.py
- Para actualizar a los colores actuales dirigirse en Compositor / Configuración
de la página

- Diseño > Personalizar

- Personalizar CSS

www.mitic.gov.py
- Al final del la line agregar el siguiente código css

/*Menú Principal*/
div.ccm-page header .menu_principal {
background-color: #EA2428 !important;
}

div.ccm-page header nav ul a {

color: #ffffff !important;
}

/*Pie de página*/
footer#concrete5-brand {
background-color: #00529C !important;
}

/*Menú Responsive*/
.mp-level {
background: #EA2428 !important;
}

/*Texto Titulo*/
div.ccm-page main a:not(.fa):not(.btn), div.ccm-page
footer a:not(.fa):not(.btn) {
color: #0E1820;
}

www.mitic.gov.py
 /*Botón*/
.btn-primary {
color: #fff;
background-color: #00529C!important;
border-color: #00529C!important;
}

/*Botón accesibilidad*/
header .accesibility-icons-container {
color: #EA2428;
}

aside {
background-color: #EA2428;
}

- Guardar > Guardar Cambios > Todo el sitio

www.mitic.gov.py