Building A Website: Part 1
Creating The Default Styling
Topics Covered In This Section
As we start to create the default styling we will now get our first look at the customization area available in WordPress and Themify. To get to this area we are going to click the ‘customization’ tab within the ‘Appearance’ section.
This is a very important section, and will give us a lot of control over our site. Currently we don’t have any content and haven’t even built a homepage, so for now let’s click the sample page link and we will take care of some of the styling using that page as a reference until we create something more substantial.
That’s a little better. Keep in mind the page background isn’t gray but we can take care of some of major styling we need while on this page. There is a ton of variability here so for the sake of time and everyone’s sanity I am only going to go through the styling for our site. Feel free to mess around and see what changes affect what. The changes we will make will still give you a very good idea of how this area works and there will be no shortage of content.
So where do we start. I have always believed the best place to start is by picking your color scheme and font style, and then setting the styling for your different headings. Let’s start diving in.
1) Picking A Color Scheme
Picking a color scheme is one of the most important parts of designing a website. When you are designing for a client most of the time they may already have a logo created, and when that is the case the color scheme of the logo should be the color scheme of the site. Other times they may not have one and will look to you for direction for their color scheme. When that is the case I always recommend looking here and simply ask them to pick on that they like. In our particular case we are designing our own site, so we do not have the opinion of a client to work off of so we will need to pick our own. I have been wanting to test out a simple black and white color scheme recently so this is what we are going to do. I will also probably work some grey in there as well to balance things out. Keep in mind too that we may change this, part of designing is that you have to be willing to adjust things if they don’t work, but we will cross that bridge if we get there. So, let’s set turn the navigation bar black.
To change the color of the navigation bar we are going to click the header dropdown. From there click the background color and drag the marker down to black or enter #000000 in the box.
It doesn’t look very good yet so let’s get the font in there to be white. To change the font color we will need to click both the ‘header font’ and ‘header link’ dropdown and from there set the color setting to #ffffff.
Cool, that looks good for now. We will change it more later to really bring the site together. For now let’s do the same thing for the footer. To do this click the footer dropdown and move the background color to #000000 as well as change the link and font color to #ffffff.
Cool, that looks good for now but if you noticed we haven’t been making all of these changes on our ‘Sample Page’ since our site does not have a static page set to its homepage yet. So let’s go ahead and take a look at the ‘Sample Page’ and see what it looks like.
Well, that is not what we wanted. The link is red. The reason it is read is because we didn’t set our active link color, active link being the link of the page we are currently on. To change the active link color go to the ‘Main Navigation’ dropdown and then to the ‘Menu Active’ section and set the color to #ffffff.
That’s better. However if you noticed, when we hover over these links nothing happens, and while not a bad thing it would be nice if there was a slight color change to let the user know they are hovering over it. Let’s go ahead and take care of this now, so to enable our links to change when you hover over them we will go to the ‘Menu Active Link Hover’ , ‘Menu Link Hover’, and ‘Header Link Hover’ tabs and move those to #e3e3e3.
Now when we hover over our links we should have a nice color change. The next step will be setting our default font
Setting The Default Font
To set our default font we will click on the ‘Body’ dropdown and then clicking the ‘Body Font’ tab.
To set our default font we will click on the ‘Body’ dropdown and then clicking the ‘Body Font’ tab. Normally when it comes to fonts you will want to choose one and stick with it across your entire site. Personally I like simpler fonts. I think they make the site look more professional. The one I usually go with is Open Sans, and that is what we are going to go with now.
This sets our default font across the entire site, but we aren’t quite done yet. We still have to set the default font for our headings, which are another form of text. To change our heading fonts we will go to the headings tab. From there we will change each heading 1 – 6 to Open Sans as well, along with setting some standard sizes. Feel free to mess around with the sizes but I have found that the ones we are setting now work for pretty much any site.
We are about done setting up our font. The Last thing we need to do is to set the font in our header and footer. So let’s go to the header font section and the footer font section and change those to Open Sans as well.
That should about Cover it for our fonts. Let’s go ahead and click the publish button to save our changes and move on to changing our logo and tagline.
Setting Up Our Logo And Tagline
The Site Logo and tagline are changed under the ‘Site Logo & Tagline’ section. It should be pretty common sense but the logo is changed in the logo area and the tagline in the tagline area. You can choose between an image, text or none. In our case we are going to opt for text, though we may come back and change this later to our actual logo as our site comes together. We will just have to see. For now we will put ‘MWD’ in for the logo text and ‘Design Academy’ in for the tagline and see how it looks.
I think that looks pretty good for now. We will certainly be back to this section to make additional changes but I think we have completed our default styling and are ready to start designing our homepage.