(This is part of the Atahualpa Tutorial for Beginners series)
One of the important things you would want to think about when it comes to designing your blog is the color scheme. What are the main colors that make up the overall design of your site?
If you have no idea of what color combinations you like, the best thing is to go online and look at a range of sites. Yes, this is what I do.
For this tutorial, I have come out with a simple color scheme. The site will consist of the following colors as a start.
In brief, these colors are allocated for the following purposes.
#0179C1 – Link color
#666666 – Body text
#ffffff – Blog background
#000000 – Headline
Once you have decided the color scheme, we can start configuring the text and link colors.
i. Configuring the Body Text and Link Color
1. Go to Appearance > Atahualpa Theme Options.
2. Click the Body, Text & Links option.
3. The Body Style section is where you can configure the site background color, body text font type, size and color. Change the font type, color and size to the following values:
font-family: calibri, arial, sans-serif;
font-size: 1.0em;
color: #666666;
The font-family configuration sets the font to Calibri. If a browser does not support this font, then it will use Arial. And if a browser does not support both, which is very unlikely, it will revert to the browser’s default sans-serif font.
4. Change the link configuration according to following values:
Link Default Color: 0179C1
Link Hover Color: 0179C1
Link Default Decoration: none
Link Hover decoration: underline
Link Text Bold or Not: normal
5. Click the Save changes button.
6. Browse a post to see the changes.
ii. Configuring the Headline Text and Link Colors
Before you start styling the headline text and links, you need to understand that the headline text is the title you see on each post, whereas the headline links are clickable link titles of the posts found on homepage, category, archive and etc.
1. Select the Style POSTS & PAGES.
2. Enter the configuration below in the HEADLINE Box: Text to set the headline text to black, Cambria font and normalized the font decoration as the default is bold.
font-family: cambria, arial, sans-serif; color: #000000;
font-weight: normal;
3. Now change the headline link color on the homepage to black by configuring color: #000000 in the HEADLINE Box: Links box.
4. Change the headline hover color to blue #0179c1 by configuring color: #0179c1 in the HEADLINE Box: Links: Hover.
5. Click the Save changes button.
Well, there are more things you can do to style the body and the headline text and links. You just need to know the right configuration/parameter to enter.
For example, underlining the headline, you will need to enter text-decoration: underline.
The best place to get advice on styling matter is the Atahualpa forum.
(This is part of the Atahualpa Tutorial for Beginners series)