Change font and line width in Veni blog posts

• 

  kidsonhike · Member · Jul 7, 2017 at 7:16 am

  • Copy link
  • Add topic to favorites

  Hey.

  I’d like to change the font in my Veni blog posts (and only in the blog posts, not in the entire site). Also I’d like to reduce the width of the text-lines in the blog posts.

  How can I do this?

  The blog I need help with is: (visible only to logged in users)

• 

  julsyd · Member · Jul 7, 2017 at 12:44 pm

  • Copy link

  Hi kidsonhike,

  You’ll need to upgrade to the Premium or Business plan, if you haven’t already, in order to add custom CSS to your site.

  If you tell me which Google Font you want to use in your blog posts, I can help you with the CSS for that.

  To reduce the width of the text in blog posts, you’ll need to reduce the overall width of the entire post. You can do that by adding the following to My Site > Customize > CSS:

  .single-post.no-sidebar .container.container-small {
  max-width: 700px;
  }

• 

  kidsonhike · Member · Jul 7, 2017 at 5:40 pm

  • Copy link

  Hey.

  And thanks for the reply. I have Business, and the don’t I want to use is Minion Pro.Skickat från min iPhone
  7 juli 2017 kl. 14:44 skrev donotreply>:
  WordPress.com body { font-family: arial; font-size: 0.8em; } .post, .comment { background-color: white !important; line-height: 1.4em !important; }

• 

  thesacredpath · Member · Jul 7, 2017 at 11:51 pm

  • Copy link

  Hi, we can do this with the following custom CSS since you have Minion Pro loaded for Headings.

  .page-content p, .entry-content p, .entry-summary p, .featured-page p .entry-summary p {
    font-family: "minion-pro-2", serif;
  }

• 

  thesacredpath · Member · Jul 8, 2017 at 12:16 am

  • Copy link

  Hi, use the following instead of the above as it picks up one post/page element that was not changing to the new font. The second CSS rule sets the width of the content to 650px. It was 800px. You can adjust that value as desired.

  .page-content p, .entry-content p, .entry-summary p, .featured-page p .entry-summary p, .entry-content {
    font-family: "minion-pro-2", serif;
  }
  .no-sidebar .container.container-small, body.search .container.container-small, .page-template-portfolio-page .gallery-wrapper .container.container-small, .tax-jetpack-portfolio-type .gallery-wrapper .container.container-small, .post-type-archive-jetpack-portfolio .gallery-wrapper .container.container-small {
    max-width: 650px;
  }

• 

  kidsonhike · Member · Jul 8, 2017 at 8:04 am

  • Copy link

  Hey thesacredpath.

  Many thanks – but that changes the font in the entire site, rather than only on the blog posts…

• 

  thesacredpath · Member · Jul 10, 2017 at 9:01 pm

  • Copy link

  Do to how Veni’s CSS is done, this is a bit tricky. Since you mention only posts, I have excluded the child pages and the static page you have created. This changes only blog posts, and there could be some HTML content type things that this will miss. I’ve included what would typically be within posts (ordered and unordered lists, paragraphs, block quotes and links.

  .home .site-main .entry-content p, .featured-slider .entry-summary p, .single .entry-content p, .single .entry-content ul, .single .entry-content ol, .single .entry-content blockquote p, .single .entry-content a {
    font-family: "minion-pro-2", serif !important;
  }

• 

  kidsonhike · Member · Jul 11, 2017 at 6:53 am

  • Copy link

  Hey again.

  Many thanks for all the help. Above you helped me reduce the width on my blog-posts-pages. Could you also help me reduce the width (to 550px) on all other pages, but not the starting page?

  I.e. this page now has width 55px: https://kidsonhike.com/2017/07/08/tyresta/

  But this page doesn’t: https://kidsonhike.com/how-to/gear/

• 

  g471n · Member · Jul 11, 2017 at 8:15 am

  • Copy link

  Hi kidsonhike

  Try this:

  .no-sidebar .container.container-small {
      max-width: 550px;
  }

  @thesacredpath … I hope I’m not interfering in your thread :)

• 

  kidsonhike · Member · Jul 11, 2017 at 8:59 am

  • Copy link

  Thanks! That seems to work!

• 

  g471n · Member · Jul 11, 2017 at 9:14 am

  • Copy link

  You are welcome. Thanks for the feedback :)

• 

  thesacredpath · Member · Jul 12, 2017 at 1:46 am

  • Copy link

  @g471n, no worries, and many thanks for the help.