Personalización de la alineación de imágenes

La alineación de imágenes te ayuda a mantener tu imagen en el área deseada, ya sea a la izquierda, derecha o centro, y modificarla para optimizar la experiencia del sitio para el usuario. También te ayuda a mantener las proporciones de imagen y contenido cuando redimensionas el contenido en tu Sitio de la base de conocimientos.

Por defecto, las imágenes en tu Sitio de la base de conocimientos base están alineadas a la izquierda.

Imágenes del centro en tu base de conocimientos de Document360

Para alinear imágenes de forma centralizada usando CSS personalizado, sigue los siguientes pasos:

1. Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del Portal de la base de conocimientos.

2. En el panel de navegación izquierdo, navega hasta Personalización del sitio.

   La página contiene todas las configuraciones básicas de diseño del sitio.

3. En la página de Personalización del sitio , haz clic en CSS y JavaScript personalizados.

   

4. En el desplegable de la izquierda, selecciona CSS personalizado / JavaScript.

5. Haz clic en Añadir fragmentos de código en la esquina superior derecha del espacio de código, y aparece un panel, precargado con siete fragmentos que puedes usar para personalizar tu Sitio de la base de conocimientos.

6. Haz clic en el Centro para alinear imágenes en los artículos, y el fragmento se añadirá a tu bloque de código CSS personalizado.

7. Haz clic en Guardar.

   Por ejemplo,

.content_block .content_container .content_block_text img{
margin: 0 auto;
display: block;
}

article img {
    margin: 0 auto !important;
    display: block;
}

La imagen ahora estará centrada dentro del marco de tu Sitio de la base de conocimientos.

Alineación de imágenes

1. Alinear la imagen a la izquierda

.content_block .content_container .content_block_text img {
    margin: 0px 0 0;
    display: block;
}

article img {
    margin: auto 0 0 0 !important;
    display: block;
}

2. Alinear la imagen correctamente

.content_block .content_container .content_block_text img {
    display: block;
    margin: 0 0 0 auto;
}

article img {
    margin: 0 0 0 auto !important;
    display: block;
}

Eliminar/borrar un fragmento de código añadido previamente

Para eliminar el fragmento de código añadido anteriormente, selecciona el fragmento deseado y pulsa supresión en el teclado.

NOTA

Antes de añadir un nuevo fragmento de alineación, no olvides borrar el que ya te añadieron.

La alineación de imagen que se establece se aplicará a toda la base de conocimiento.

Redimensionando imágenes en el sitio de la base de conocimientos

Para mantener las proporciones de texto e imagen cuando hagas zoom (ampliar) o alejar (minimizar) en tu base de conocimientos,

1. Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del Portal de la base de conocimientos.

2. En el panel de navegación izquierdo, navega hasta Personalización del sitio.

   La página contiene todas las configuraciones básicas de diseño del sitio.

3. En la página de Personalización del sitio , haz clic en CSS y JavaScript personalizados.

4. En el desplegable de la izquierda, selecciona CSS personalizado / JavaScript.

5. En el panel izquierdo, haz clic en CSS y pega el siguiente fragmento de CSS en el espacio de código:

.content_block .content_container .content_block_text img {
height: auto !important;
}

article img {
    height: auto !important;
}

6. Haz clic en Guardar en la esquina superior derecha.