- This topic has 12 replies, 2 voices, and was last updated 7 years, 5 months ago by Pratik.
-
AuthorPosts
-
June 3, 2017 at 12:18 am #116659bowessurnamesParticipant
I’ve seen some instructions for customizing the fonts in the menus and headers, but I want to make the Catch Box font darker. It’s current gray which I find really user unfriendly since it’s hard for many to read. It’s even harder given how thin the default font is, although I do really like the default font. I would like to just change it to normal black. Thanks in advance!
June 3, 2017 at 6:46 am #116671PratikParticipantHi @bowessurnames,
Please post in your site url and which area of font that you want darker color. I will need to check site url so that I can provide custom code.Regards,
PratikJune 3, 2017 at 12:59 pm #116677bowessurnamesParticipantHi, thanks! Here’s the link http://bowes.one-name.net/home/ I would love to have:
The font in the main text darker, probably black
The font for ‘including Bowe and other variants from around the world!’ to be same color but darker or weightier
The horizontal link text to be white (looks grey right now?). If they are already white they may just need to be bold for better contrast because the font is so thin
I’m open to ideas. If it would be easier to just change all fonts to a weightier non-serif font like Arial or Helvetica, and then just make the main text black, that might work too.
It’s going to be a text-heavy website so readability and contrast is important.
June 3, 2017 at 2:33 pm #116686bowessurnamesParticipantYikes, don’t know why the quote block for the ‘list’ looks so big. Now I see where the LI code is, doh.
June 4, 2017 at 11:54 pm #116729PratikParticipantHi @bowessurnames,
For color of main text, goto Appearance-> Customize-> Colors -> Basic Colors-> Header Text Color. Change it to any color you want..
To make the smaller description text weightier, try following code in Appearance-> Customize-> Additional CSS box;
#site-description { font-weight: bold; }
The horizontal link text to be white (looks grey right now?). If they are already white they may just need to be bold for better contrast because the font is so thin
I did not understand this part, can you explain with the hemp of screenshot maybe?Regards,
PratikJune 5, 2017 at 1:45 pm #116773bowessurnamesParticipantI really appreciate your help. I may not be stating this one right. Where you say ‘For color of main text, goto Appearance-> Customize-> Colors -> Basic Colors-> Header Text Color. Change it to any color you want..’ … that changes the Header font color, not the main text color. So when I type, say, a blog post, it’s the font color in the page body that I’m trying to adjust.
This works good:
#site-description {
font-weight: bold;
}For the horizontal menu, I think you’re right that it’s white (I temp disabled my blue light filter). I should first try making it bold, I assume similar to the site-description but using a different #___:
#______?______ {
font-weight: bold;
}Maybe that’s all the main body text needs too, as long as some how the text headers are differentiated enough.
Thanks again! I used to do html back in the day, but tendon problems put a stop of this sort of thing, so I don’t know anything anymore.
June 5, 2017 at 2:11 pm #116775bowessurnamesParticipantI guess I’m going to need the blue link text in bold too. The font is so anemic on its own. Not sure how anyone could comfortably read that, but maybe it’s just me.
June 5, 2017 at 10:05 pm #116791bowessurnamesParticipantWell I found the template editor with the code and tried to find the right things and tweak them, but when I did nothing change on the published web pages.
June 5, 2017 at 11:25 pm #116793PratikParticipantHi @bowessurnames,
Try following codes instead.
body, input, textarea { color: #000000; } #access ul.menu a, #access-secondary ul.menu a, #access-footer ul.menu a { color: #fff; font-weight: bold; }
This will make text in body black. Second block will make link color white and bolder.
Let me know if this solves your issue.
Regards,
PratikJune 6, 2017 at 11:44 pm #116867bowessurnamesParticipantI can’t thank you enough. I’m a full-time family caretaker and its very hard for me to fit my hobby in, and I’ve fallen very behind but trying to get this website off the ground. I am transferring from a Google site. So far copying and pasting the code from my Google Site pages, with some tweaking, works pretty well.
I added font-weight: normal; to the ‘body input text’ area and that helped a lot, but it became too black, so I went with #000033 for now (will test in daylight without my blue light filter on).
I then took the bold out of the menu links in your code, and just having them in font-weight: normal was what I was after. It seems the default font weight in the theme wasn’t normal or bold but what I’d call anemic and hard to read, whatever the technical term. I hope my preference doesn’t look garish to people in these days of light gray text and low contrast. The menu links are now only bold when active.
If I haven’t overstayed my welcome too much yet, I’d like snippets of code to:
1. make the blue hyperlinks normal weight too (these are in the widgets and the ‘body input text’), and
2. change the default space between paragraphs, and between lists/blockquotes and the text before and after, from double space to 1.5 space.My other questions aren’t so much formatting, so I’ll start another thread on them.
Many many thanks! Martha
June 6, 2017 at 11:46 pm #116868bowessurnamesParticipantThis page shows the lists with too much white space before and after. It would also be good to indent the lists by five spaces. http://bowes.one-name.net/home/
June 7, 2017 at 12:21 am #116871bowessurnamesParticipantOh my gosh, I keep noticing more. At what point do you charge for this help, or is it all just part of being in the support forum?
I’ve noticed that while all my menu links are in all caps (which I like), where the page title is repeated at the top of each page below the menus, sometimes it is all caps and other times uppercase/lowercase, and in the case of the Blog page it is in a totally different size and color. These should all be consistent. I prefer the menu links in all caps and the page title in the main body to be upper/lower, but for the life of me I can’t figure out how they got all mixed up or how to fix it. Everywhere I change the page titles to be upper/lower in the main body — menu organization or page edit/quick edit — it also becomes upper/lower in the menu links.
There must be a secret fix to this somewhere.
June 7, 2017 at 1:31 am #116886PratikParticipantHi @bowessurnames,
1. make the blue hyperlinks normal weight too (these are in the widgets and the ‘body input text’)
The link has normal weight. I tried using normal weight and it did not make any difference You can try following code:
Try following code:.widget a, a { font-weight: 700; }
You can check options here: http://htmldog.com/references/css/properties/font-weight/ and set the desired one.
2. change the default space between paragraphs, and between lists/blockquotes and the text before and after, from double space to 1.5 space.
Try following code:body, input, textarea, .widget-area { line-height: 1.42em; }
You can increase/decrease 1.42 as 1.32, 1.22 and so on.
This page shows the lists with too much white space before and after. It would also be good to indent the lists by five spaces. http://bowes.one-name.net/home/
This is because the inner html elements have margin 30 px at bottom. We can reduce it by following code:#content .entry-content p, #content .entry-content ul{ margin-bottom: 20px; }
Reduce/increase margin bottom as per your liking.
I can provide you fix for this, making all page/post titles uppercase/lowercase. Try following:
.entry-title { text-transform: uppercase; }
You can make it lowercase, or capitalize(make only first letter capital).
Support is always free as long as it is related to theme. If you liked my support, it would be great if you could leave a good review at https://wordpress.org/support/theme/catch-box/reviews/#new-post.
Also, you can upgrade to pro version, it has other features as well 🙂
Let me know if there are any more issues.
Regards,
Pratik -
AuthorPosts
- The topic ‘How to make main text darker’ is closed to new replies.