- WordPress Site Design – Vision
- WordPress Site Design – Domain & Hosting
- WordPress Site Design – CMS
- WordPress Site Design – CMS Installation
- WordPress Site Design – WordPress Install
- WordPress Site Design – Zenphoto Install
- WordPress Site Design – Piwik Install
- WordPress Site Design – WordPress Layout
- WordPress Site Design – WordPress Files
- WordPress Site Design – Functions and Loops
- WordPress Site Design – CSS File
- WordPress Site Design – Zenphoto Integration
- WordPress Site Design – Remaining Files
This is the tricky part. All the styling is done with the CSS file. For simplicity I have put everything into one file. A lot of people break their CSS down into different files for certain information. But for this tutorial I want to have everything in one place. This is a copy of my CSS file. Certain information has been taken out, but the majority of my site’s design is in it. I suggest using it to get your theme running then go through it and edit all the attributes as you wish. I should also mention that my CSS file is a hodgepodge of bits and pieces of different style sheets throughout the web and may be a bit messy. One important thing to note is that I merged the WordPress and Zenphoto CSS files into one. This is the first step in integrating the two CMS’s.
Download the Blank CSS file and paste the content into your style.css file you made earlier.
Install some dummy content into your WordPress so you can test all elements of your css file. The following are 3 good options for this. Anyone of them will work just fine. Each page should have information on how to install.
For my design I wanted to use this panoramic picture of Drake’s Bay that I took. I wanted to have the content be in the middle and the foreground be the footer while the background was the header. As I stated in a previous post, I am certainly not talented when it comes to art. However for my first theme this picture was a good challenge to undertake. I converted the file with Photoshop using the Cutout filter. I then used that to get most of the color for my site. As you will see in my blank css file, most of the color is directly from Photoshop. I split the picture down the middle and created my top and bottom images for my site.
Being able to read and understand the CSS file will require you to know a little about CSS. I suggest looking up the differences between ID and Class. Also to be honest my file is messy and might cause some confusion. Also to help you understand what each attribute changes you need to understand where it is called from in the files my last post. Learning the CSS is the most time consuming aspect of creating a custom WordPress Theme.
Make sure you do not edit any of the CSS file below the Zenphoto separation. Only worry about getting the WordPress styled at this time. In all honesty this process could take you a couple days. This was the main reason why I began this tutorial with installing the WordPress locally on your computer. Making and reviewing changes to your CSS file is drastically faster while working locally. Have fun and take some time to get your them looking the way you like it. Once your WordPress portion of your CSS is set, you’ll be ready for the next step.