| Suite | Growth, Professional, Enterprise o Enterprise Plus |
| Support con | Guide, todos los planes |
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.
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
- Cambiar el color de fondo del encabezado o pie de página
- Cambiar el alto del encabezado o pie de página
- Cambiar el espacio arriba o abajo del encabezado o pie de página
- Cambiar el aspecto del idioma seleccionado
- Cambiar el aspecto del vínculo Enviar una solicitud
- Ocultar el vínculo Enviar una solicitud
- Cambiar el aspecto del vínculo Iniciar sesión
- Cambiar las dimensiones del logotipo
Búsqueda
- Cambiar el ancho o alto del campo de búsqueda
- Cambiar el color de fondo del campo de búsqueda
- Cambiar el aspecto del texto de la búsqueda
- Cambiar el aspecto del título de la página de resultados
- Cambiar el aspecto del resaltado de palabras clave en los resultados de búsqueda
- Cambiar el aspecto de los títulos de la base de conocimientos y la comunidad
- Cambiar el espacio entre los resultados
- Cambiar el aspecto del texto de los resultados
- Cambiar el color de los vínculos a los resultados
Ruta de navegación (Breadcrumbs)
Listas de artículos
Artículos de la base de conocimientos
- Cambiar el aspecto de los títulos de los artículos
- Cambiar el aspecto del texto de los artículos
- Cambiar el color de los vínculos a los artículos
- Cambiar el aspecto del nombre del autor
- Cambiar el aspecto de la última cadena en actualizarse
- Cambiar el aspecto de "¿Fue útil este artículo?"
- Cambiar el aspecto del contador de votos
- Cambiar el aspecto de "¿Tiene más preguntas? Enviar una solicitud"
- Cambiar el aspecto del título de los comentarios
- Cambiar el aspecto del texto de los comentarios
Preguntas y respuestas de la comunidad
- Cambiar el aspecto de los títulos de las preguntas
- Cambiar el aspecto del texto de las preguntas
- Cambiar el color de los vínculos a las preguntas
- Cambiar el aspecto del nombre del autor de la pregunta
- Cambiar el aspecto del tiempo desde que se publicó la pregunta
- Cambiar el aspecto del vínculo para compartir pregunta
- Cambiar el aspecto del título de la respuesta
- Cambiar el aspecto del texto de la respuesta
- Cambiar el aspecto del nombre del autor de la respuesta
- Cambiar el aspecto del tiempo desde que se publicó la respuesta
- Cambiar el aspecto del vínculo para compartir respuesta
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.
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;
}
0 comentarios