WordPress.org

Ready to get started?Download WordPress

Forums

Change font of entire website (6 posts)

  1. MrAwesome2013
    Member
    Posted 9 months ago #

    Dear friends,

    I'm the author of this blog and I want to change the grey fainted color of all the text to black instead. What color code do I have to change in the .css or is there an easier way?

    Best
    Anders

  2. Eightbit Puzzle
    Member
    Posted 9 months ago #

    If your theme does not have an option through the interface try the following:

    First make a backup of your style.css

    For the author and meta info you have this color: #C6C6C6 (line 226 in your css file). Replace it with #000000

    Your title has #656464 (line 214 in your css file) - again replace it with #000000

    Hint: you can install ad dons for your browser called developer tools. They will tell you what styles are applied to a specific Html element by right clicking on it. After you identify the style, you can go and change it to your preference in your style-sheet.

  3. esmi
    Forum Moderator
    Posted 9 months ago #

    No! Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

  4. martcol
    Member
    Posted 9 months ago #

    I'm wondering if you really need to change that grey text at all? I think that your theme looks attractive and neat and the use of grey text provides a visual clue to the nature of the text even if it isn't entirely consistent i.e. it's clickable.

    Of course, that's just my opinion but I thought I would say it anyway. On top of that, if you change the text to black or darker, you may find that you will need to change the hover text color as there could be very little to distinguish between the two states.

  5. esmi
    Forum Moderator
    Posted 9 months ago #

    The pale grey text fails the recommended color contrast ratios quite miserably and really needs to be changed, IMO.

  6. martcol
    Member
    Posted 9 months ago #

    So, going with esmi, you could try dropping this into a child-theme style.css

    You can set your own hex values for color

    h1.main_title a {
        color: #141414;
    }
    h1.main_title a:hover {
        color: #626161;
    }
    p.meta, p.meta a {
        color: #141414;
    }
    p.meta a:hover {
        color: #626161;
    }
    #sidebar li a, #footer li a {
        color: #141414;
    }
    #sidebar a:hover, #footer a:hover {
        color: #626161;
    }

Reply

You must log in to post.

About this Topic