Diseño de Temas para WordPress
He aqui un ejemplo diseño con css de un tema (solo el index) wordpress, de 3 columnas, una barra de navegación , pie de página y cabecera de página, la imagen que se muestra debajo describe el funcionamiento del mismo, y los detalles que se aplican con el css, debajo de la imagen el codigo html para general la web y el css que la formatea.
Este diseño cuenta con lo siguiente:
- Container
- Header
-Top Navigation Menu
- Left Navigation Menu
- Right Navigation menu
- Content Part
- Footer
Aqui vemos el codigo html del index:
<div id=container>
<div id=”header”>
<h2>Header</h2>
</div>
<div id=”topnav-container”>
<ul id=”topnav”>
<li> <a href=”#”>Home</a> </li>
<li> <a href=”#”>Categories</a> </li>
<li> <a href=”#”>Services</a> </li>
<li> <a href=”#”>About us</a> </li>
<li> <a href=”#”>Contact us</a> </li>
</ul>
</div>
<div id=”leftnav”>
This is a left navigation bar.
This is a left navigation bar
This is a left navigation bar
</div>
<div id=”rightnav”>
This is a right navigation bar
</div>
<div id=”content”>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
</p>
</div>
<div id=”footer”>
<h2>Footer</h2>
</div>
</div>
Aqui vemos el CSS que formatea este diseño:
#container {
margin: 10px auto;
width: 95%;
border: 1px solid gray;
}
#header {
padding: 3px;
border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}
%
read more
