Este tutorial es para los usuarios de WordPress que saben un poco acerca de los códigos HTML y CSS. Puede personalizar un tema de WordPress básico de la opción del editor. Es muy fácil de personalizar algunas opciones básicas de edición. Desde editor puede agregar, editar, borrar todos los códigos HTML, PHP y CSS de la plantilla.
01. Para editar / añadir / eliminar los códigos van a Apariencia -> Editor.
02. A la derecha del editor hay varios archivos html, php y css como archive.php, author.php, category.php, style.css, index.php etc. Pueden ser categorizados como plantillas y Estilo. Si usted no sabe ABC de html, php o CSS no intente cambiar nada en los archivos .php. Pero todavía se puede cambiar un poco de estructura básica de la página web como el color de la fuente, el cuerpo de color del texto, en dirección etc de la página style.css. Observe que el código puede variar dependiendo de las plantillas. Haga clic en style.css.
03. Para cambiar el texto del cuerpo, tamaño de fuente, color, cabecera, etc ir a style.css y encontrar el cuerpo de la etiqueta (marque la última captura de pantalla) .I estoy cambiando el tamaño de la fuente (font-size: 12px;) a 12 píxeles y el cambio del color (color: # 5681d6;) también. Puede utilizar el selector de color en línea (por ejemplo - https://www.colorpicker.com/) para escoger su propio código de color.
body {
font-size: 12px;
font-size: 1rem;
font-family: Helvetica, Times New Roman, sans-serif;
texto-rendering: optimizeLegibility;
color: # 5681d6;
}04. Para el estilo de los enlaces de la ONU visitó, visitó, vuelo estacionario, y activos que se pueden cambiar el código siguiente -
a: link {color: PickAnyColor ;}
a: visited {color: PickAnyColor ;}
a: hover {color: PickAnyColor ;}
a: active {color: PickAnyColo r }/ * * Encabezado /
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
}
h1 .site-cabecera,
.site encabezado h3 {
text-align: center;
}
.site-header h1 a,
.site -header h3 a {
color: # 515151;
display: inline-block;
text-decoration: none;
}
.site-header h1 a: hover,
.site encabezado h3 a: hover {
color: # 21759b;
}
.site- encabezado h1 {
font-size: 24px;
font-size: 1.714285714rem;
line-height: 1.285714286;
margin-bottom: 14px;
margin-bottom: 1rem;
}
.site encabezado h3 {
font-weight: normal;
font-size : 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: # 757575;
}
.header imagen {
margin-top: 24px;
margin-top: 1.714285714rem;
}
06. Para el estilo de la barra lateral como la reducción o el aumento de la anchura, barra lateral color de fuente, tamaño de fuente, etc, entonces se puede cambiar de editor.Compruebe el siguiente código.
/ * * Sidebar /
.widget área .widget {
-webkit-guiones: auto;
-moz-guiones: auto;
guiones: auto;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
word-wrap: break-palabra ;
}
.widget área .widget h3 {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.widget área .widget p,
.widget área .widget li,
.widget área .widget .textwidget {
fuente -size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
}
.widget área .widget p {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.widget área .textwidget ul {
lista -estilo: disco exterior;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
.widget área .textwidget li {
margin-left: 36px;
margin-left: 2.571428571rem;
}
.widget área .widget un {
color: # 757575;
}
.widget área .widget a: hover {
color: # 21759b;
}
.widget del área de # s {
anchura: 53.66666666666%; / * Definir un ancho para evitar dejar caer una amplia submit botón * /
}
Comentarios