Welcome to the 4th part in taking a Photoshop PSD file to WordPress theme using Dynamik for Genesis tutorial series. In the third part of the series, we styled the primary navigation menu and the navigation menu that will be in the header area. In this part of the PSD to WordPress tutorial, we’ll style our content, comment areas, sidebar and footer.
Because we added our fonts and colors in the body section, our fonts, font sizes and colors are pretty much done for us already. We still need to change the background of where our content will go to help it match with the rest of the site. I used the beige color, #F6DBAC, that will become our widget areas on the front page as the content background color. Make sure to add it to the post content background and the page content background.
In order to make our blockquote stand out, we need to make it a different color than the content background. I started with the #F6DBAC and darkened it up by using the slider that pops up. I ended up with #AB9877, but you can make it as dark or as light as you’d like.
We have to change the paddings and margins for the content areas since Dynamik for Genesis, To add the margins for the heading font, content paragraphs, post byline and post meta values, we need to use the #Custom button. For our purposes, we’ll use the following CSS:
margin: 0 10px
We’ll change the padding on the content area so that it lines up with our sidebar and decreases the space around it b changing them to: Top 0px, Right 0px, Bottom 0px and Left 0px. If you were to hit a refresh on the browser window of our site, you’d see that it looks much better after making these changes.
Styling the sidebar in Dynamik for Genesis
To bring some attention in our sidebar, we’ll continue using the same colors that we have been using. The sidebar heading font will have the same red that we use for our hyperlinks, #E20711 and make the sidebar content the same color as the page and post content, which is #F6DBAC.
If you look at it now after refreshing, you’ll notice that the headings are kind of hard to read, so making them a little bigger and using the same color as the sidebar content, #F6DBAC, would be best.
Styling your footer in Dynamik for Genesis is quite easy! We’ll start off by changing the font to ‘Lobster’. The colors that were added through the body section of Dynamik Design are good. Styling the background is a matter of picking an image that we got from slicing our PSD, footer-bg.png, and selecting the proper background color. Our body background will extend past our footer, so we’ll select that same color so it all flows nicely.
We don’t need a top border because the footer-bg.png contains a nice shadow effect in it, so we set the thickness of the border to 0.
Most of our styling of the website is done! In the next tutorial, we’ll change the site widths a little and start setting up our EZ-Home page.
Do you have any questions or comments on PSD to WordPress using Dynamik for Genesis? Do you have any experience or anything you’d like to share? Please leave a comment below.