How to make the font color darker with light style

[tmws]

Hi. Is there any way to make the regular font on pages darker? Meaning right now it is sort of a grayish color on a white background. But the visual editor says that it is black. Can I make that gray appear more black? Thank you!

Topic

[Jason Bobich]

Hello,

There is no option for this, and this would be a style customization you’d need to make to the theme.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

body { color: #000; }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[aplus]

Hi tmws,

In case others are struggling with the same issue, here is what I used:

body { color: #000; }
.boxed-layout .boxed-inner { color: #000; }
.boxed-layout .element-inner { color: #000; }
.post_grid { color: #000; }
article { color: #000; }
#comments .comment-body { color: #000; }
#respond { color: #000;}

• This reply was modified 10 years, 1 month ago by Jason Bobich. Reason: There's no need for subtle insults at the author & the product. Support terms are clearly laid out
• This reply was modified 10 years, 1 month ago by Jason Bobich.

[Jason Bobich]

body,
.boxed-layout .boxed-inner,
.boxed-layout .element-inner, 
.post_grid, 
article, 
#comments .comment-body, 
#respond {
	color: #000;
}

For reference, checkout /assets/css/style/light.css for styles used in the light style that you can copy to your Child theme’s custom.css to modify.

[tmws]

Thanks for the reply Jason. I don’t know how to enter code and this issue isn’t that important for me to learn again. I just wanted to say that in future updates you might want to consider this option, plus the option of making the number in the upper right hand corner larger (renders particularly small on phones)–I have tried entering HTML in that line and it doesn’t work. Older people can’t read the lighter / smaller text (say over 45) and many business owners with money are in that category. I love the look of the theme (including the font color). But I’m making this site for a 50 year old family member who can’t read the text without glasses and he has requested larger and darker, which I can’t easily do. Pretty much everyone over 45+ can’t read small writing w/o glasses. But again I love this theme and appreciate all of your replies. Just food for thought. Take care.

[Jason Bobich]

@tmws Thank you for the feedback.

If you are looking to implement the CSS change we’ve provided, simply go to Appearance > Theme Options > Styles > Custom CSS and just paste this block into the option. While I understand this is not ideal for you, this will accomplish what you’re looking to do. No learning required 🙂

body,
.boxed-layout .boxed-inner,
.boxed-layout .element-inner, 
.post_grid, 
article, 
#comments .comment-body, 
#respond {
	color: #000;
}

[tmws]

Thank you!! I might give it a try. Should this type of edit be in a child theme? Also, is there any way to make the text at the top right hand corner, where you have a phone number, any larger? Thank you again!! I adore your work and appreciate your help!! 🙂

[Jason Bobich]

Should this type of edit be in a child theme?

So, you’ve got two ways I’d suggest implementing your CSS changes.

1) If you’re not using a Child theme, you can paste your CSS changes in the Custom CSS option on your Theme Options page. However, this can become cumbersome and hard to manage if you’re doing a lot of changes.

2) You can use a Child theme. Basically when you do this, nothing really changes. The only difference is that instead of putting your custom CSS on your Theme Options page, which then gets stored in your database, you’re putting them in the “custom.css” file actually located in your Child theme on your server. — Make sure to watch this video: http://vimeo.com/41331677

Also, is there any way to make the text at the top right hand corner, where you have a phone number, any larger?

You could do it something like this:

#branding .header-text {
	font-size: 20px;
}

[tmws]

Many thanks!! I’m going to install both of your suggestions (for darker font and larger text) in the Custom CSS option on the Themes Options page. I will worry about a child theme if I need more changes. So far anyway, those are the only changes that I would want to the theme. This theme is fabulous and really doesn’t need anything else. My biggest fear is that everyone will choose this theme because it’s the best of the best on themeforest. Thank you for an awesome theme and support!! 🙂

[tmws]

Jason, Those changes were perfect. I can see why you had the smaller number in the original design–this is a compromise from a visual standpoint, but the number renders bigger on a phone, so I think I’m going with the bigger number.

At the risk of wearing out my welcome, can I please ask you whether there is any way to make the number in the header appear in a button, so that mobile users will understand that they can click on the number? And/or is there any way to create a button or clickable phone number in a headline on any given page? I’m trying to optimize this for mobile. I understand if this is too much coding support to provide. The bigger number is good enough if I can’t make this happen. I just changed the words before to “Click # on Mobile” But I would rather make it obvious with a button. Either way thank you!!!!!!!!!!!

[Jason Bobich]

On most smartphones, if you have a phone number displayed it will automatically turn it into a clickable link when displayed on the phone’s web browser. For example, if you were to view the theme’s live demo on an iPhone, you’ll see you can click the phone number.

If you make the phone number a specific link in the old-fashioned way like:

<a href="tel:5555555555">(555) 555-5555</a>

… then it can be confusing because then you’ll have a button for users on the computer that links to nothing.

[tmws]

Thanks Jason. FYI on my Samsung Galaxy 3 (latest Android from Samsung purchased last month) the phone number from the top right header is clickable, but for some reason phone number in headline was not. So I just deleted the number from the headline. Problem solved. Thank you!

[val]

Thank you for this post and for all the info. These were two issues I was seeking answers for and was glad to find them here.

Being over 45 – I love the look of the text color, but it is a bit difficult to read.

On the line:

{
color: #000;
}

What number would I use to change the text to a darker color gray, but not black. I’m assuming the #000 is black, but I’m not sure what number to replace it with, as I’ve only ever used the full color number, such as #636060?

[Jason Bobich]

What number would I use to change the text to a darker color gray, but not black. I’m assuming the #000 is black, but I’m not sure what number to replace it with, as I’ve only ever used the full color number, such as #636060?

@val You’re correct. A hexidecimal color value contains 6 digits. But any time you have value that has 6 identical digits, you can write it as 3. In other words, it’s like a short-hand abbreviation for it.

So, for example, #000 and #000000 are identical. However you write it, it doesn’t matter. Both are black.

This might be helpful in selecting a shade of grey: http://www.december.com/html/spec/color0.html

[sunday]

Thanks for this code help, Jason. I agree about the “over 50” eyesight!

[wswriter]

Jason,
What would be the “Custom CSS” code for making the h1, h2, and h3 tags black?
Robert

[Author]

Replies