[jennycccParticipant]

Hi,

I was wondering if you can help me with the following…

(1) How can I change the font size/color for all the different headers (for individual h1, h2, etc)?
(2) Where can I find the original full detailed css and php files so I can modify based on that? Or more generally, can you please let me know how I can best modify different elements (any best practices)?

Ps. I’m currently using the child theme.

Thank you very much!

[John EzraMember]

Hi there,

Thanks for writing in!

For #1
You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

// Headings
// =============================================================================

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 1.25em 0 0.2em;
  font-family: $headingsFontFamily;
  font-weight: $headingsFontWeight;
  letter-spacing: -1px;
  text-rendering: optimizelegibility;  
  color: $headingsColor;

  small {
    font-weight: normal;
    line-height: 1;
    color: $grayLight;
  }

  a {
    color: $headingsColor;

    &:hover {
      color: $accentColor;
    }
  }
}

h1,
.h1 {
  margin-top: 1em;
  font-size: 400%;
  line-height: 1.1;
}

h2,
.h2 {
  font-size: 285.7%;
  line-height: 1.2;
}

h3,
.h3 {
  font-size: 228.5%;
  line-height: 1.3;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

h4,
.h4 {
  font-size: 171.4%;
}

h5,
.h5 {
  font-size: 150%;
}

h6,
.h6 {
  font-size: 100%;
  text-transform: uppercase;
}

Note: the global heading colors can be edited in the customizer. Appearance > Customize > Typography > Headings > Headings Font Color >> Set to “On”, then select your color.

For individual, you can add the CSS rule color:#ffffff (change color value) to each “H” level from h1-h6.

For #2

It would be best that you try not to edit the original files. You can override them via style.css file in the child theme,
Checking the original file won’t help much as it is minified for performance.

So it would be best to modify the above code and paste it into your style.css file (child theme).

Hope this helps – thanks!

[jennycccParticipant]

Super helpful! Thank you very much! 🙂

[NicoModerator]

You’re most welcome.

Let us know if you need anything else.

Thanks. Have a great day! 🙂

[rapsojoParticipant]

Hello, I am new to using cornerstone and I am trying to figure out how to change my heading sizes (H1, H2, H3) The heading sizes are too big and I want to reduce them. Do I need to do something like the above. I am hesitate about it, as it is a bit beyond my skill-set. Thanks

[Rue NelModerator]

Hello There,

Thanks for updating the thread!

To change your heading size, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

h1,
.h1 {
  font-size: 40px;
}

h2,
.h2 {
  font-size: 34px;
}

h3,
.h3 {
  font-size: 30px;
}

h4,
.h4 {
  font-size: 26px;
}

h5,
.h5 {
  font-size: 22px;
}

h6,
.h6 {
  font-size: 20px;
}

Feel free to adjust the number of pixels for your preferred sizes.
Hope this helps. Kindly let us know.

[JoeyHendricksonParticipant]

Thanks for providing the CSS! I noticed the “icons” aren’t able to display in the featured header, after applying the code above. Just me, or is there a way to add this back into the css?

[ThaiModerator]

Hi @joeyhendrickson,

Would you mind providing us with your website URL so we can take a closer look?

Thanks.

[swillcox1976Participant]

This reply has been marked as private.

[swillcox1976Participant]

*font

[Rue NelModerator]

Hello @swillcox1976,

Oswald Google font has light, normal and bold only. You can check it here: https://www.google.com/fonts#UsePlace:use
Right now the title is already set to Oswald. This is because you already have set all your headings in the customizer, Appearance > Customize > Typography > Heading to Oswald.

Hope this helps.

[swillcox1976Participant]

no it did work!
http://www.willcox.ch/AlphaValuePE/wp-admin/customize.php?url=http%3A%2F%2Fwww.willcox.ch%2FAlphaValuePE%2Ffund-directors-partners%2F

the banner for some reason, is bold and I want it light
;(

[swillcox1976Participant]

This reply has been marked as private.

[swillcox1976Participant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

You can change the heading font weight in your customizer. Please go to Appearance > Customize > Typography > Heading > Headings Font Weight.

This is the only available font weight for Oswald.

Because adding a banner under your navbar requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once the child theme is active and ready, you can insert the following code in your child theme’s functions.php file

function add_custom_banner(){ ?>
  
  <?php if ( is_page('about-the-developer') ) : ?>
  <div class="custom-header-container">
    <div class="x-container max width">
      <!-- our custom header codes here -->
      <img src="http://placehold.it/1200x120" alt="My custom header">
    </div>
  </div>
  <?php endif; ?>

<?php }
add_action('x_after_view_global__navbar', 'add_custom_banner');

Please let us know if this works out for you.

[Author]

Posts