• Resolved gdaytaiwan

    (@gdaytaiwan)


    Hi there

    I’m completely new to coding and I’m looking to do a number of different things to the font.

    I like the font type the way it is, only thing is I want to change ALL of the orange accent colour for menu highlights, hovers, and content hyperlinks to #00bcd4 (had to look that up but basically any aquamarine)

    Secondly for paragraphs only, I’d like them reduced in size. Including block quotes and captions.

    Could someone help me do this? Is adding code in “Additional CSS” enough?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi there,

    The theme uses the orange color 22 times, so it’d be a bit tedious to list all of the changes here.

    However, I’ve opened the theme’s style.css file and done a quick find/replace of those colors for you in a file that you can download on GitHub here.

    While technically you could paste it all into Additional CSS, it’s more code than you really need.

    If you wanted to use the file above to pick out the parts you need to keep, the first thing you would do is search for #00bcd4. Here’s the first instance of code where that appears:

    
    button:hover, button:focus, button:active,
    input[type="button"]:hover,
    input[type="button"]:focus,
    input[type="button"]:active,
    input[type="reset"]:hover,
    input[type="reset"]:focus,
    input[type="reset"]:active,
    input[type="submit"]:hover,
    input[type="submit"]:focus,
    input[type="submit"]:active {
      border-color: #00bcd4;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      color: #00bcd4;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

    You’ll always need what comes before the { symbol, but not always everything that comes before the } symbol. Essentially you’re only keeping the references to things that use your new color. So in this example, you would end up with this once you removed everything but the color references:

    
    button:hover, button:focus, button:active,
    input[type="button"]:hover,
    input[type="button"]:focus,
    input[type="button"]:active,
    input[type="reset"]:hover,
    input[type="reset"]:focus,
    input[type="reset"]:active,
    input[type="submit"]:hover,
    input[type="submit"]:focus,
    input[type="submit"]:active {
      border-color: #00bcd4;
      color: #00bcd4;
    }

    So that slightly smaller bit of code could be pasted into your Additional CSS area, and you could move on to the next instance of #00bcd4, repeating the same process until you have them all pasted into your Additional CSS area.

    Secondly for paragraphs only, I’d like them reduced in size. Including block quotes and captions.

    Here is some CSS for the text’s defaults. Adjust the numbers to your liking:

    .entry-content p {
       font-size: 1.0em;
    }
    
    blockquote {
        font-size: 1.25em;
    }
    
    .wp-caption-text {
        font-size: 0.8125em;
    }
    Thread Starter gdaytaiwan

    (@gdaytaiwan)

    Thanks so much for your help!

    Everything works well…and the font size is much easier on the eye now!

    You’re welcome. I’m glad I could help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing font size and colours’ is closed to new replies.