blog.robbychen.com theme

Changed to a new theme

For some reasons, I just don’t like the default 2014 theme included in the WordPress. It’s neither attractive nor minimalistic. I’m not a big fan of black and white theme, especially there is a green search button at the top right corner.

The theme I’m using right now is Sixteen. I chose this theme from featured theme section because I know that I will have a hard time searching for a preferred theme from a vast selection of themes.

After I switched to this new theme, I began to tinker its settings and code. Shortly after, the new theme for this site is created.

I changed a few settings for the theme, especially the header image. I’d like to make the site as simple as possible, so I changed the header image to a single colored image (green-ish color, resembles the color of Google Android).

And here is the custom CSS I wrote to achieve the current layout for the site:

.widget-title, .main-navigation a:hover {
 color: #ffffcc !important;
}
.main-navigation a {
 color: #7a5a24;
}
.featured-image a {
 position: absolute;
 width: 230px;
 height: 140px;
}

The first style in the code above changes the widget title’s text color and navigation menu’s link hover color. I don’t like the original color because it’s too dark in contrast to its black background and it’s hard to see. I then switched the link color for the navigation menu with the original link hover color to be more relative between the link and hover states in the second block of code since they all contained yellow.

Within the last style, I fixed the link for the featured image not cover the entire area for the featured image area on the homepage. If you don’t understand the last sentence, try to install this theme on your local WordPress and insert a featured image which its width is less than 230px or its height is less than 140px and see what happens with the link when you hover over the featured image on the homepage. This should give you the reason why this fix is needed.

Of course, I’m not proficient in CSS. If you find any errors in the code above, any errors on the site itself, or any general questions or issues around the site, please leave a comment below and I will respond to you (as well as fix the mentioned issue if appropriate) as soon as possible.