0,00 USD

No products in the cart.

Monday, April 12, 2021

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.

Home » Historic Recipes » Hueman Free Theme CSS Tweaks
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 many hot cups of coffee does this post or page deserve?

Click on an icon to rate it.

Average rating: 0 / 5. Vote count: 0

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

As you found this post useful...

Care to share?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

Coffee Image for Email Subscribe
Get Caffeinated!

OK, we can't send you caffeine--or even coffee-- but we can send you new content. Subscribe to our email list and get new posts delivered to your inbox. If you don't specify preferences, you'll be signed up for a weekly digest of new posts in all categories, as well as occasional promotional emails and surveys. However, if you would like to customize the frequency and type of content you receive, you can sign up here.

Cheryl
Cherylhttps://www.caffeinejournal.com
Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also be interested in:

Recently Popular

Share this
Send this to a friend