Personalización del tema Luxeritas Child (style.css)
Luxeritas es un tema de Wordpress nacional gratuito y altamente funcional.En este blog, presentaré los contenidos personalizados de style.css del tema hijo.
Cómo editar el tema hijo de Luxeritas
Hay dos formas de editar style.css
1. Ingrese directamente en "Hoja de estilo: style.css"
Pantalla de administración: Luxeritas → Editar tema hijo → Seleccione la etiqueta "style.css"
Ingrese el código después de "/ * Por favor escriba el estilo para el tema hijo de acuerdo a su preferencia. * /".
2.Ingrese "CSS adicional" para personalizar la apariencia
Pantalla de administración: Luxeritas → Personalizar (apariencia) → CSS adicional
Recomendamos esto porque puede ver el resultado de reflejar el código al mismo tiempo que ingresa el código.
Style.css personalizado
Título del sitio en negrita
Para aquellos que piensan que los caracteres estándar son un poco delgados y la impresión es delgada.
/ * Título del sitio * / #sitename {font-weight: bold;}
Agregue una sombra debajo del menú de la tira para que parezca un material
Hay una sombra en esto ...
Será esto.Es una diferencia sutil, pero la atmósfera del sitio cambia inesperadamente.
/ * Sombra bajo la navegación global * / #nav {box-shadow: 0 2px 10px rgba (0,0,0, .2)}
Color de desplazamiento que no se puede configurar desde la personalización de apariencia
El color de desplazamiento estándar para los títulos de los artículos y los artículos anteriores y siguientes es rojo.No creo que haya elementos para cambiar directamente desde la personalización de la apariencia.
color: Puede cambiarlo colocándolo en el código de su color favorito a continuación.Por cierto, "# 00b22f" es de color verde claro.Además, el título del artículo está en negrita para que sea más fácil de leer.
/ * Título del artículo * / .entry-title a: hover {color: # 00b22f;} .entry-title {font-weight: bold;} / * Artículos antes y después * / #pnavi a: hover {color: # 00b22f }
Tarjeta de blog para diseño de materiales
Tendrás una tarjeta de blog como esta.Mueva el cursor para hacerlo esponjoso.
/ * Diseño de tarjeta de blog * / a.blogcard-href {padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba (0, 0, 0, .13); transición: .3s;} a. blogcard-href: hover {box-shadow: 0 4px 20px rgba (0,0,0,0.25); transform: translateY (-5px);} .blogcard-img {margin: 0px 10px 0 0; border: none} p .blog-card-title {margin: 5px 5px 5px 5px;} p.blog-card-desc {display: none;} p.blogcard-link {clear: none; margin: 5px 0 5px 5px;} pantalla solo de @media y (ancho máximo: 430px) {p.blogcard-link {display: none;}}
Me referí a la siguiente página.
Personaliza tu tarjeta de blog de Luxeritas para que flote como un SANGO
Cambiar el color de la paginacion
Al igual que el título del artículo, permaneció en rojo y no se pudo cambiar desde la personalización de apariencia. Está atenuado con "# 999999".
.pagination> .active> span, .pagination> li> a: hover {background: none; background-color: # 999999;}
Cuando lo cambia, se ve así ↓
Cambio de diseño de la nube de etiquetas
/ * Cambio de diseño de nube de etiquetas * / .tagcloud a {border-radius: 3px; / * Redondea las esquinas * / padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px}
Redondeé las esquinas de la etiqueta para reducir el ancho de la línea.
Márgenes eliminados debajo del título del artículo
Cuando puse un anuncio de Google Adsense debajo del título del artículo, me preocupaba que el interlineado antes y después del anuncio pareciera ser grande. Después de quitar el margen, pude instalarlo de la manera más compacta posible.
/ * Metainformación (actualizada) Eliminar margen inferior * / .meta, .post .meta {padding: 5px 0; margin-bottom: 0px;} / * Eliminar margen encima y debajo del artículo * / .post- title-upper,. post-title-under {margin-bottom: 1px;}
Eso es todo