Screencast: Part 2: Create a CSS page for our custom WordPress theme

This is another simple video. We add some basic css to center our web page in the browser and style our nav bar. We then will connect our CSS page to our index.html. Along the way we’ll use a snippet to add closing comments, a plugin to auto fill in the path and a command to open index.html in the browser. All the links to learn how to do each of these are provided at the bottom of this page.

assets/css/style.css
[prettify]
#wrapper {
margin: 15px auto;
width: 960px;
}
nav ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

nav ul li { display: inline; }

nav ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

nav ul li a:hover
{
background-color: #369;
color: #fff;
}
[/prettify]

index.html
[prettify]




Simple WordPress

header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

© 2012




[/prettify]

Download Finished Files

finished-source-files-wordpress-step-02

Links

Back to Main WordPress Page with list of tutorials on creating a WordPress custom theme from scratch.

Leave a Reply

Your email address will not be published. Required fields are marked *