[Kali TParticipant]

What file do I edit to change the size of the font and the font-family in the footer? And what is the syntax?

The default font is far too small and hard to read for my purposes. I couldn’t find any documentation on editing the style sheet…

My site: burningcities.com

Thanks!
Kali

[Ryan PParticipant]

You can edit this with html or css mock up on the footer content box on the optimizer or in the individual widgets you used in the footer widget section.

An example
<span style="font-size: x-large;">Your Text</span>

You can use the values large, x-large ext or you can use em or px. Whatever you’re comfortable with. I’m not sure if any of them are outdated or prefered. I just know they all work.

[Kali TParticipant]

I did manage to change them in the footer by using this css code in the Customizer CSS box:

div.x-colophon-content p { font-size: 20px;
font-family: 'Nunito', sans-serif;}

div.x-colophon-content p a:hover {color:red;}

and adding this to the javascript box:

  WebFontConfig = {
    google: { families: [ 'Nunito:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

But… I want to make the changes on the child theme stylesheet instead of cluttering up those small boxes, because I think I will make a lot of changes. I tried editing the styles.css sheet at the top level of the x-child-renew directory, but no joy. Am I editing the wrong style sheet? What code should I paste, and where?

Thanks!

[SupportMember]

Hi Kali!

Thank you for the update.

Do you mind if we take a look at the website? Try to add !important on the css values when you add them on style.css.

div.x-colophon-content p { font-size: 20px !important; font-family: 'Nunito', sans-serif !important; }
div.x-colophon-content p a:hover { color:red !important; }

We will give you a better response once we have taken a look at the website.

Thanks!

[Kali TParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Kali,

The child theme is best used for your own IDs and classes. Overriding X styles, you need to place the CSS in the Customizer. Please feel free to post your questions in separate posts according to topic.

We’re here to help.

Thanks.

[Author]

Posts