Share
Lo que vas a crearSi siguió mi tutorial anterior, ahora tendrá un tema en su sitio (o un tema secundario) que incluye enlaces a sus páginas de nivel superior en el encabezado del sitio..
Creé un tema infantil de veintiseis dieciséis, y así es como se ven mis enlaces en este momento:
En este tutorial, te mostraré cómo agregar algo de CSS a tu tema para que esos enlaces sean un poco más agradables. Comencemos por deshacernos de las balas y añadiendo flotadores..
Abra la hoja de estilos de su tema. Si creó un tema secundario, estará vacío, pero si está trabajando con su propio tema, le sugiero que agregue este estilo en la parte de su hoja de estilo donde mantiene el estilo para el encabezado..
Un resumen del código que genera los enlaces de página (si hay páginas para vincular):
Esto significa que estamos apuntando a un ul elemento con el enlaces de página de nivel superior clase y dentro de eso, li elementos con el enlace de página clase seguida por una elementos (es decir, enlaces).
Primero, vamos a quitar las balas. Agrega esto:
ul.top-level-page-links list-style: none;
A continuación, eliminemos el relleno de cada elemento de la lista y agregue un margen izquierdo declaración:
ul.top-level-page-links list-style-type: none; margen izquierdo: 0;
Ahora actualice su pantalla y verá que el estilo de la lista ha desaparecido:
A continuación vamos a poner esos enlaces flotando uno junto al otro. Agregue esto a su hoja de estilo:
.page-link float: left;
Ahora sus enlaces estarán todos juntos:
A continuación, pasemos a hacer que los enlaces se vean un poco más como botones.
Para hacer que nuestros enlaces se vean como botones, agregaremos un margen, un relleno y un fondo a los enlaces..
Agregue esto a su hoja de estilo:
.page-link a margin-right: 10px; relleno: 0.5em 10px; color de fondo: # 454545;
Tenga en cuenta que solo he usado un margen a la derecha ya que quiero que el botón de la izquierda se alinee a la izquierda de la página.
Cuando actualices tu pantalla, tus botones se verán más como botones:
Se ven mucho mejor, pero necesitan un poco de delicadeza. Vamos a editar el color del texto y el fondo para que cuando alguien se sitúa sobre el botón, cambie de color..
Ahora vamos a hacer esos botones un poco más atractivos.
Agregue dos bloques de declaración más a su hoja de estilo, asegurándose de agregarlos después del bloque de declaración para los enlaces que acaba de agregar:
.enlace de página a: enlace,. enlace de página a: visitado color: #fff; texto-decoración: ninguno; .page-link a: hover, .page-link a: active background-color: #dddddd; color: # 454545; texto-decoración: ninguno;
Esto cambia el color de los enlaces, elimina el subrayado y cambia el color cuando alguien se desplaza sobre un enlace o está activo.
Veamos cómo se ve esto en la página:
Y cuando me coloco sobre un enlace:
Mucho mejor!
En este tutorial de dos partes, aprendió a crear enlaces a las páginas de nivel superior de su sitio, que se generan automáticamente, y luego a estilizar esos enlaces con CSS para que se vean como botones..
Esto le brinda una forma agradable y prominente de permitir que sus visitantes vayan directamente a esas páginas, y será útil si tiene páginas de nivel superior a las que desea garantizar que pueda acceder a un montón de visitantes..
Accentsconagua