Designing a Minimalist Blog with the Headway WordPress Theme

Today we’re going to take a look at how to put together a minimalist blog design from scratch. No Photoshop involved, not a single image to upload. All of this will be done right in your browser!

If you’d like to follow along, be sure to grab a copy of Headway (affiliate link). I very highly recommend it, especially if you’re into DIY blog design. Keep in mind, also, that this video is mostly just for learning Headway and a bit about how CSS and WordPress work. Design is so much more than throwing some fonts and colors on a page. You have to know why you’re doing it.

So, that said. Let’s dive in!

(If you can’t see the video, click here to see it on Vimeo.)

CSS Code

a.header-link-text-inside, #tagline, h2.entry-title a, h1.entry-title, div.sidebar span.widget-title, div.leaf-top { font-family: Rokkitt; }

/*-------- Header --------*/
a.header-link-text-inside { font-size: 36px; text-transform: uppercase; letter-spacing: 1px; }
#tagline { font-size: 48px; text-transform: uppercase; }
div#top { margin-bottom: -10px; }
div#navigation a, div#navigation a:visited { color: #ffffff; background: transparent; }
div#navigation a:hover { color: #8cb359; text-decoration: none; }
div#wrapper{ border-top: 3px double #000; }

/*-------- MAIN CONTENT ------- */
h2.entry-title a, h2.entry-title a:visited, h1.entry-title { font-size: 36px; text-transform: uppercase; }
div.entry-content p:first-child { font-family: Rokkitt;  font-size: 24px; line-height: 30px; margin-top: 5px; margin-bottom: 0px;}
blockquote p:first-child { font-family: Helvetica !important; font-size: 14px !important; }

/*-------- Sidebar -------*/
div.leaf-top { font-size: 24px; text-transform: uppercase; }

/*-------- Footer --------*/
div#footer { border-top: 3px double #000 !important; }

Similar Posts:

None Found