Hueman Free Theme CSS Tweaks

Zip is using the Hueman free them currently. Here are a few CSS changes he made for styling the author box, links, and tags.

0
(0)

Hueman, the theme that Zip is currently using, is pretty good, but you can’t fully customize some of the styles in the customizer — which is true to a greater or lesser degree with most themes. This post goes over a bunch of little CSS “tweaks” that Zip asked me to help with to change the appearance of some items in his theme. We’ll be styling the author box, font color, tags, and more, and learning a bit of CSS along the way.

You can use the same ideas here to customize other themes, but they may have different selectors. If you’re not sure how to use the developer console to inspect elements and identify CSS selectors, we went over that in this post. If you want to customize your widget titles, check that post.

Styling the Hueman Theme Author Box

Hueman comes with an author box underneath the post. Not all themes add one — if you want an author box and your theme doesn’t have one, you’ll find plugins like Simple Author Box that will add one for you. But Zip thinks his author box is plain.

Here’s what the author box looks like by default. It includes Zip’s Gravatar, name, and the bio he set in his user profile settings. And I’m sure it will include some social icons when Zip gets around to creating social media accounts.

Making the Author Avatar Round

To make the user avatar round, you’re going to use the border-radius CSS property.

Zip finds that the avatar for the author box is .author-bio .bio-avatar img. For some things, like comments, you might find that the selector is, simply, .avatar. Let’s use border-radius to make the image round:

.author-bio .bio-avatar img {border-radius: 50%;}

Give the image a border radius of 50% and you have a round avatar image:

Add a Colored Border to the Author Avatar

Suppose Zip wants his avatar to be just a bit fancier, still. Let’s add a colored border to it. We’ll use the same CSS selector but add some additional CSS:

  • the border property expressed in px
  • the border-color expressed as a hex color (you can use some color names, a hex color, or an rgba color here)
  • and the border-style property, which can be solid, dotted, dashed, double, groove, inset, groove, or outset. He wants a solid border.

So he changes his CSS to this:

.author-bio .bio-avatar img {border-radius: 50%; border: 5px; border-color: #b00a38; border-style: solid;}

and gets this:

Change the Author Font

But Zip wants something…more. Let’s change the author font. We’ll use the Rock Salt font to match the headers that he’s using on his website right now. Let’s color it turquoise:

He finds the CSS selector for the author name in the Hueman theme is .author-bio .bio-name.

To give it some style, we’ll use the color: property to change the color of the font, the font-family: property to designate the font we want to use and the font-size: property to make the font a bit larger.

So he adds this:

.author-bio .bio-name {color: #2f9d94; font-size: 25px; font-family: 'Rock Salt';}

and gets this:

Changing the bio description font.

So suppose he wanted to change the font of the bio itself. He’d just need to find the selector for that element (which is .author-bio .bio-desc) and use the color property for something like this (not that he could also add font-size: 14px; if he wanted to make his font smaller.)

.author-bio .bio-desc {color: black;}

Changing the primary body font color in Hueman theme

In fact, Zip already changed the body font color in a similar way. In most themes I’ve encountered, you can easily change the body font colorin the customizer. I did not find this in the free version of Hueman. However, we can easily change it with just a bit of CSS.

The CSS selector for normal paragraph font is p. So to change his body font to black, he just added:

/*body font color*/
p {color: #000000;}

The color for links in this theme is whatever color you set as the primary color in the customizer. But what if you wanted a different color for links in posts?

Changing your link color and underlining links on hover with CSS

You could use the a property. Let’s change the links to hot pink:

p a {color: #FF1493;}

Or what if he wanted to just underline the links on hover in hot pink but keep the color as-is? Instead of using underline, I’ve found that it works better for me to use a border-bottom property, so we’ll have to use a:hover and give the bottom border a style and width. But he doesn’t want to underline ALL links on hover, just the ones in the post or page body. He finds that he must use .entry for that. So he enters:

/*body link color*/
.entry a:hover {border-bottom: #FF1493 dotted 4px; color: #2f9d94;}

Now the links in his text body stay the same color on hover, but get a hot pink dotted underline when someone hovers over them. Will he keep it this way? For now, maybe…but he can eventually test link colors to see which get the most clicks. We’ll save that for a later post, though.

Changing the Post Tags Color With CSS in Hueman Free Theme

The Hueman theme lists the tags for each post at the bottom of the post. By default, they look like this:

But Zip wants more emphasis on them and he wants them to match his theme colors. He uses this to set colors and a background for each tag.

/*post tags color*/
.post-tags a {
    background: #b00a38;
    color: white;
    border-radius: 3px;
}
.post-tags span {color: #2f9d94; text-transform: uppercase; font-weight: bold; font-size: 20px;}

He uses background: to set the background color, white color for the font, and a border-radius of 3px to make the corners just a bit rounded for each tag. Then he sets the color for the word Tags: makes it uppercase using text-transform, makes it bold using font-weight: and sets a font-size of 20px.

This is the outcome:

These are just a few CSS “tweaks” that Zip added. We’ll eventually be writing more about CSS in our glossary.

Zip’s mostly done with basic design. He can make a few changes as he goes.

But an important part of design is images and graphics. I think in the next post, we’ll go over some places you can get free photos or graphic resources for your website.

How much love or how many cups of hot coffee does this post deserve?

Click to rate it!

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you gave this post a good rating:

Follow us on social media!

We're sorry you didn't like this post.

Help us improve!

Tell us how we can improve this post.

Cheryl Dimof
Cheryl Dimofhttps://www.lovecoffeewordpress.com
Cheryl is a "retired" Occupational Therapist who loves writing and is a WordPress enthusiast. She used to be like Rapid Rabbit, but these days, her spirit animal is Zip the Sloth. She's looking forward to getting more active again, though, and likes cycling, kayaking, meditation, reading and writes/blogs a lot. In fact, she crazily writes several blogs: Pacific Northwest and Beyond, Caffeine Journal, and as she actually worked in geriatrics and is actually getting older herself, is writing a blog about that: Ancient & Awesome.

More from author

Subscribe to Comment Notifications
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related posts

Write Something!

If you have a WordPress or blogging tip to share, consider writing a short post here.

Latest posts

Adding Google Analytics to WordPress

Zip has installed an SEO plugin. So he probably wants to be able to find out how many visitors are actually coming to his website and what pages they are viewing. In this post, he'll install Google Analytics using a plugin so he can start viewing analytics data for his new website.

How to Use Yoast to Configure Your Post for SEO

Zip's added the Yoast SEO plugin to his blog. Let's look at how he can optimize a post (or page) for search engine optimization using the Yoast plugin as well as some things to keep in mind when using this helpful plugin.

Sloth Installs an SEO Plugin (Why You Should Use an SEO Plugin and How to Configure Yoast SEO)

Zip has completed basic design work on his blog. Next, he's going to move on to Search Engine Optimization. In this post, we briefly look at some of the plugins available to help with SEO, and install and configure the Yoast SEO plugin.

Keep Up on Our Latest Tips

Subscribe to our email newsletter, and you'll receive a weekly digest of new posts, and occasional newsletters or special offers. You can change your preferences or unsubscribe at any time you'd like.

0
Psst! Hey you! Yeah, you. Want to leave a comment?x
()
x