Recetario de CSS del centro de ayuda

Disponible en los planes Suite Growth y superiores Disponible en todos los planes de Guide

Puede personalizar fácilmente el aspecto y el funcionamiento del centro de ayuda mediante las hojas de estilo en cascada (CSS). El recetario está diseñado para ayudarle a cambiar el centro de ayuda para que tenga el aspecto que usted desea.

Nota: Los usuarios de la versión de prueba tienen un plan Professional, que incluye opciones para la edición del código, pero ya no tendrán acceso a esa función si compran Zendesk Suite Team.

Para obtener acceso al CSS de Guide y editarlo, consulte Personalizar CSS o JavaScript.

Si recién comienza a usar CSS o hace tiempo que no lo usa, dele una mirada a los siguientes tutoriales para ponerse al día:

Getting started with CSS es el tutorial de CSS más completo dirigido a principiantes. Es una guía de las funciones básicas del lenguaje con ejemplos prácticos que puede probar por su cuenta.
CSS Beginner Tutorial ofrece lo suficiente para comenzar.

El aspecto del centro de ayuda también se puede personalizar mediante el lenguaje de plantillas para el centro de ayuda o con JavaScript:

Índice de materias

El recetario está organizado en secciones que describen los elementos del centro de ayuda. Cada sección incluye código CSS que se puede pegar directamente en la hoja de estilo del tema. Utilice el código tal cual o edítelo a su gusto.

El recetario no es exhaustivo. Si modifica las plantillas de HTML y la hoja de estilo CSS, lo que puede hacer no tiene límites.

Encabezado y pie de página

El encabezado muestra un logotipo y otros componentes en función del tema y los roles de los usuarios. El pie de página se usa para mostrar vínculos relacionados, información sobre la compañía o avisos legales.

Volver al índice de materias.

Cambiar el color de fondo del encabezado o pie de página

Cambie o agregue la propiedad background-color en los siguientes selectores.

Encabezado:

.header {
  background-color: #666;
}

Pie de página:

.footer {
  background-color: #333;
}

Cambiar el alto del encabezado o pie de página

Cambie o agregue la propiedad height en los siguientes selectores.

Encabezado:

.header {
   height: 70px;
}

Pie de página:

.footer {
   height: 20px;
}

Cambiar el espacio arriba o abajo del encabezado o pie de página

Cambie o agregue las propiedades margin-bottom y margin-top en los siguientes selectores.

Encabezado:

.header {
     margin-bottom: 20px;
}

Pie de página:

.footer {
     margin-top: 10px;
}

Cambiar el aspecto del idioma seleccionado

Agregue el selector y la propiedad siguientes:

.language-selector .dropdown-toggle {
  color: green;
}

Cambiar el aspecto del vínculo Enviar una solicitud

La plantilla header.hbs incluye una versión de escritorio y una para móviles del encabezado en la misma plantilla para que pueda ser adaptativa. La versión de escritorio está incluida en una div con una clase denominada nav-wrapper-desktop y la versión para móviles se encuentra en una div con una clase llamada nav-wrapper-mobile. Cada div contiene un vínculo Enviar una solicitud que, vale aclarar, es un vínculo aparte. Para cambiar el aspecto del vínculo, debe crear versiones de escritorio y para móviles de la regla CSS y aumentar la especificidad de los selectores.

Agregue los siguientes selectores al archivo style.css y modifique las propiedades de texto:

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

Ocultar el vínculo Enviar una solicitud

Agregue los siguientes selectores al archivo style.css:

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

Cambiar el aspecto del vínculo Iniciar sesión

Agregue o modifique las propiedades de texto en el siguiente selector:

.login {
  font-size: 14px;
  color: green;
}

Cambiar las dimensiones del logotipo

Aunque el tamaño de imagen del logotipo es 200px x 50px, se puede anular este valor predeterminado si es necesario.

Nota: Para usar un logotipo más grande que el tamaño recomendado, tendrá que alojar la imagen del logotipo fuera de su cuenta de Zendesk Support.

Para cambiar el tamaño del logotipo

En Guide, haga clic en el icono Personalizar diseño () en la barra lateral.
Haga clic en Editar tema.
Haga clic en CSS para abrir la hoja de estilo CSS y luego busque la regla siguiente:
```
.logo img {
  max-height: 37px;
}
```
Para buscar, haga clic dentro del editor de código y presione Control+F (Windows) o Cmd+F (Mac).
Modifique la propiedad Height en el selector ".logo img" para que coincida con la altura de la imagen.
Haga clic en Guardar.

Búsqueda

El cuadro de búsqueda busca contenido en la base de conocimientos y la comunidad y muestra vínculos en una página de resultados. Si desea, puede eliminar el cuadro de búsqueda. Si desea más información, lea sobre el asistente de búsquedas en la guía de las plantillas para el centro de ayuda.

Volver al índice de materias.

Cambiar el ancho o alto del campo de búsqueda

Cambie los valores width o height en los siguientes selectores.

Cuadro de búsqueda grande:

.search input[type=search] {
  height: 50px;
  width: 90%;
}

Cuadro de búsqueda pequeño:

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

Cambiar el color de fondo del campo de búsqueda

Cambie la propiedad background en los siguientes selectores.

Cuadro de búsqueda grande:

.search input[type=search] {
  background: #999;
}

Cuadro de búsqueda pequeño:

.search-small input[type=search] {
  background: #999;
}

Cambiar el aspecto del texto de la búsqueda

Cambie o agregue las propiedades de texto en los siguientes selectores.

Cuadro de búsqueda grande:

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Cuadro de búsqueda pequeño:

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Cambiar el aspecto del título de la página de resultados

El encabezado de la página de resultados de la búsqueda consiste en el número de resultados que se devuelven para el término de la búsqueda. Ejemplo: 9 resultados para "número de serie".

Agregue el siguiente selector si aún no se encuentra en la hoja de estilo, y cambie o agregue las propiedades de texto:

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

Cambiar el aspecto del resaltado de palabras clave en los resultados de búsqueda

Los términos resaltados dentro de los resultados de las búsquedas van encerrados con el elemento integrado <em> bajo el contenedor .search-result-description. Si desea que el texto resaltado se muestre en negrita con un fondo amarillo, haga lo siguiente:

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

Cambiar el aspecto de los títulos de la base de conocimientos y la comunidad

Agregue o modifique las propiedades de texto en el siguiente selector:

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

Cambiar el espacio entre los resultados

Agregue una propiedad margin-bottom en el siguiente selector:

.search-result {
  margin-bottom: 20px;
}

Cambiar el aspecto del texto de los resultados

Cambie o agregue las propiedades de texto en el siguiente selector:

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

Cambiar el color de los vínculos a los resultados

Agregue o modifique la propiedad color en el siguiente selector:

.search-result a {
  color: #484;
}

Ruta de navegación (Breadcrumbs)

La ruta de navegación ayuda a los usuarios a navegar por el contenido del centro de ayuda. Si desea, puede eliminar la ruta de navegación. Si desea más información, lea sobre el asistente de ruta de navegación en la guía de las plantillas para el centro de ayuda.

Volver al índice de materias.

Cambiar el espacio arriba y abajo de la ruta de navegación

Agregue o modifique las propiedades padding en el siguiente selector:

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

Cambiar el aspecto del texto de la ruta de navegación

Cambie o agregue las propiedades de texto en el siguiente selector:

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Cambiar el color de los vínculos a la ruta de navegación

Agregue el selector y la propiedad siguientes:

.breadcrumbs li a {
  color: #484;
}

Cambiar el carácter del apuntador (>) en la ruta de navegación

Cambie las propiedades color y content en el siguiente selector:

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

Listas de artículos

Dependiendo del tema, las listas de artículos se utilizan en la página principal, las páginas de aterrizaje de categoría y las páginas de aterrizaje de sección.

Volver al índice de materias.

Cambiar el espacio alrededor de la lista de artículos

Agregue o modifique el selector y las propiedades padding siguientes:

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

Cambiar el espacio entre los artículos

Cambie la propiedad margin-bottom en el siguiente selector:

.article-list > li {
  margin-bottom: 10px;
}

Cambiar el aspecto de los vínculos al artículo

Cambie o agregue las propiedades de texto en el siguiente selector:

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Cambiar el color de los vínculos al artículo

Agregue el selector y la propiedad siguientes:

.article-list li a {
  color: #FFF;
}

Artículos de la base de conocimientos

Puede cambiar el aspecto y funcionamiento de los artículos de su base de conocimientos.

Volver al índice de materias.

Cambiar el aspecto de los títulos de los artículos

Agregue o modifique el selector y las propiedades siguientes:

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

Cambiar el aspecto del texto de los artículos

Agregue o modifique el selector y las propiedades siguientes:

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

Cambiar el color de los vínculos a los artículos

Agregue o modifique el selector y la propiedad siguientes:

.article-body a {
  color: #930;
}

Cambiar el aspecto del nombre del autor

Agregue o modifique el selector y las propiedades siguientes:

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

Cambiar el aspecto de la última cadena en actualizarse

Agregue o modifique el selector y las propiedades siguientes:

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

Cambiar el aspecto de "¿Fue útil este artículo?"

Agregue o modifique el selector y las propiedades siguientes:

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

Cambiar el aspecto del contador de votos

Ejemplo: "A 6 de 8 personas les pareció útil". Agregue o modifique el selector y las propiedades siguientes:

.article-vote-count {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

Cambiar el aspecto de "¿Tiene más preguntas? Enviar una solicitud"

Agregue o modifique el selector y las propiedades siguientes:

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

Cambiar el aspecto del título de los comentarios

Agregue o modifique el selector y las propiedades siguientes:

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

Cambiar el aspecto del texto de los comentarios

Agregue o modifique el selector y las propiedades siguientes:

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

Preguntas y respuestas de la comunidad

Puede cambiar el aspecto y funcionamiento del contenido de su comunidad.

Volver al índice de materias.

Cambiar el aspecto de los títulos de las preguntas

Agregue o modifique el selector y las propiedades siguientes:

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

Cambiar el aspecto del texto de las preguntas

Agregue o modifique el selector y las propiedades siguientes:

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

Cambiar el color de los vínculos a las preguntas

Agregue o modifique el selector y la propiedad siguientes:

.question-text a {
  color: #484;
}

Cambiar el aspecto del nombre del autor de la pregunta

Agregue o modifique el selector y las propiedades siguientes:

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Para cambiar el color del vínculo, agregue o modifique el selector y la propiedad siguientes:

.question-author a {
  color: #484;
}

El nombre del autor de la pregunta, el tiempo desde que se publicó la pregunta y el vínculo para compartir normalmente se encuentran en una misma página, por lo tanto, desde el punto de vista de diseño, es recomendable que los tres se vean iguales. Para ello, utilice el siguiente selector combinado:

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Cambiar el aspecto del tiempo desde que se publicó la pregunta

Agregue o modifique el selector y las propiedades siguientes:

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Cambiar el aspecto del vínculo para compartir pregunta

Agregue o modifique el selector y las propiedades siguientes:

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Cambiar el aspecto del título de la respuesta

Agregue o modifique el selector y las propiedades siguientes:

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

Cambiar el aspecto del texto de la respuesta

Agregue o modifique el selector y las propiedades siguientes:

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

Cambiar el aspecto del nombre del autor de la respuesta

Agregue o modifique el selector y las propiedades siguientes:

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Para cambiar el color del vínculo, agregue o modifique el selector y la propiedad siguientes:

.answer-author a {
  color: #484;
}

El nombre del autor de la respuesta, el tiempo desde que se publicó la respuesta y el vínculo para compartir normalmente se encuentran en una misma página, por lo tanto, desde el punto de vista de diseño, es recomendable que los tres se vean iguales. Para ello, utilice el siguiente selector combinado:

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Cambiar el aspecto del tiempo desde que se publicó la respuesta

Agregue o modifique el selector y las propiedades siguientes:

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Cambiar el aspecto del vínculo para compartir respuesta

Agregue o modifique el selector y las propiedades siguientes:

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}