Quinto post de ayuda. En este tutorial veremos como redondear los bordes de nuestra página y ponerle bordes de colores. También veremos como anchear la página.
Poner los bordes redondeados y colores es facilito. Es simplemente añadir tres líneas al style del apartado que quieras modificar. Concretamente estas:
border-radius: 10px 10px 10px 10px;
border: 4px solid #000;
box-shadow: 0 0 5px 5px rgba(0,177,223,1);
La primera línea redondea los bordes (dejándolos igual que en el menú que tienes a la derecha).
La segunda añade un borde negro de 4 px (puedes modificar el tamaño y el color)
La tercera básicamente añade un borde de 5 px con el color y la opacidad que le pongas. El color tiene que ser en rgba:
r: red (rojo)
g: green (verde)
b: blue (azul)
a: alpha (opacidad) (Nota: La opacidad va de 0 a 1, escalando de 0.1 en 0.1. Por ejemplo, si quieres que se vea muy transparente usa 0.2)
Para conseguir los colores rgb puedes usar el photoshop (en su paleta de colores) o usar esta página: http://html-color-codes.info/codigos-de-colores-hexadecimales
Ahora que ya tienes claro el color, opacidad y anchura de tus bordes tienes que colocar los códigos en el style. Si tienes el theme Redux, busca las siguientes líneas (sin comillas) y pega debajo los códigos:
Página central: "#wrapper #content .post {"
Menús de la derecha: "#wrapper #sidebar #top {"
Página actual de la paginación: "#wrapper #content #navigation.jump_pagination .current_page {"
Demás páginas (de la paginación): "#wrapper #content #navigation.jump_pagination a {"
Por ejemplo, el style de "#wrapper #content .post {" inicialmente estaría así:
#wrapper #content .post {
font-family: {font:Body};
background: #fff;
padding: 10px;
position: relative;
}
Con el nuevo código quedaría así:
#wrapper #content .post {
border-radius: 10px 10px 10px 10px;
border: 4px solid #000;
box-shadow: 0 0 5px 5px rgba(0,177,223,1);
font-family: {font:Body};
background: #fff;
padding: 10px;
position: relative;
}
Inicialmente se vería así:
El resultado sería:
Si nos fijamos, el borde negro es interior, lo que nos resta espacio y hace que se compriman los botones poniéndose en una sola columna. Esto se puede solucionar ampliando el ancho de las secciones, en el CSS. Aprovechamos también para anchear un poco la zona de los post.
Buscamos lo siguiente en el CSS:
#wrapper #content {
width: 520px;
float: left;
}
Este CSS indica el ancho de la zona de los post. Podéis modificar el width a vuestro gusto. Yo tengo 565px.
Ahora buscamos la siguiente línea:
#wrapper #content .post img {
max-width: 500px;
}
Aquí se define cual será el ancho máximo de las imágenes (para ajustarlas a los cambios). Yo tengo 545px.
Buscamos lo siguiente:
#wrapper #sidebar {
width: 250px;
float: right;
color: {color:Background};
font-family: {font:Accent}
}
Aquí se define el ancho de las secciones. Yo tengo 260px.
Ya sólo nos queda corregir una cosa. Si nos fijamos, en este imagen hay un borde blanco cerrando:
Tenemos que buscar la siguiente línea (está en la parte final del código, encima del Copyright) y cambiarla por <br>:
<div id="bottom"></div>
El resultado sería:
