Changing font of links and reducing width of content area

Thanks for choosing Apex!

You can use this CSS to make the whole site narrower:

.max-width {
  max-width: 900px;
}

Please copy and paste the above code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

You can further reduce the “900px” value to make the site even narrower.

As for the fonts, are you currently using CSS to change the font on the site? I would recommend using an a selector to target the links, or perhaps add an !important tag to force your CSS to take effect, like this:

a {
  font-family: font !important;
}

Hi Ben,

Thank you so much! Fixed the problem and I also found out I forgot to close a tag on my previous CSS that prevent all further changes!

Sorry – three more questions:

1. How can I change the font of the post publish date?

2. How can I change the widget/sidebar text size?

3. How can I change the link formats and text size? eg. visited, hover, etc

Thanks!

Oh and one more – haha

4. How can I change the font of “continue reading…”?

Sure thing!

Try using this CSS to declare the font across the entire site:

body {
  font-family: font !important;
}

This will affect the whole site, so only the above CSS statement will need to be used to set the font.

As for the text sizes, this code can be used to change the sidebar text:

.widget > * {
  font-size: 16px;
}

That will increase the size for all text in the sidebar to 16px (currently 12px). And lastly, here is the CSS you can use to change the size of links:

a {
  font-size: 16px;
}

If you want links to stay the same size then the other link states aren’t needed. However, if you’d like to make changes based on the state, that could be done like this:

a,
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover,
a:active,
a:focus {
  color: red;
}

As an example, the above code will make links blue by default, purple if they’ve been visited, and red if the visitor hovers over them.

Thanks, Ben!

But, what if I want the sidebar widget titles to be a different size from the sidebar widget text?

And what if I want the post title links to be a different size from the sidebar links?

As the CSS you gave me currently modifies the overall sizes and link styles. Thanks!

Okay I see.

This will target the widget titles specifically:

.widget-title {
  font-size: 16px !important;
}

Here is how you can change the post title size:

.post-title {
  font-size: 16px !important;
}

And here is how you can target only links in the sidebar:

.sidebar-primary a {
  font-size: 16px !important;
}