change font for blog post title for Travelify WordPress theme

How do I change the font for a blog post title?
I tried it here:
.entry-title {
font: 24px ‘Arial’, sans-serif;
line-height: 1.4em;
}

and switched the original font for Arial and few others but nothing has changed.

Your approach should work just fine for single post view when post title is not linked anywhere. In blog page you need to specify that you want to modify entry-title that links to single blog post.

Here is an example:

.entry-title,
.entry-title a {
  font: 24px 'Arial', sans-serif;
  line-height: 1.4em;
}

Let me know if this is what you were looking for.

I don’t understand this: “In blog page you need to specify that you want to modify entry-title that links to single blog post.”

For example, I want to change the font of blog post title, as well as blog post body.
And for blog page body as well.

I tried your code but nothing has changed now. Even the first code I tried doesn’t work…font is still the same.
Can you take a look please? http://www.travelwiththesmile.com/about/

Then try to separate font into font-size and font-family. Maybe that will do it. Add this code to Appearance >> Theme Options >> Other >> Custom CSS.

.entry-title, 
.entry-title a {
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1.4em;
}

Thanks Aigars, it worked. I just have few more questions:

  1. From now on, when I would like to change the font for entry-title for post or page, should I change it in theme options-other-custom css? because I used to do it in appearance-editor (which somehow didn’t work well) and don’t want to overwrite it where I’m not suppose to.

  2. do you have any tutorial online? Fonts and the terminology is confusing for me.
    or can you specify what do I change in customise-typography-heading 1, heading 2, heading 3 etc. I think these are the headings in the actual post but for example heading 3 is also changing the font on the right side widget.

  3. how can I change the “gap” between navigation? I would like to have Home, About, Blog etc. further apart each other.

I’m trying to understand it right.
Thanks.

  1. If you make changes directly into style.css it should work the same way, however, all these changes will be lost once you update theme because all files are reverted to default ones during an update. To make changes update safe you should either use Child Theme or add CSS inside Custom CSS field in Theme Options.

  2. There is no guide for that but any basic CSS guide will help you to get started with that. Also some basics about Google Chrome or Firefox Dev Tools wouldn’t hurt, so you can can check which element you want to target using CSS.

  3. You can make menu items wider by using a simple CSS code like this:

#main-nav a {
  padding: 8px 40px 0 40px;
}

Use this code via Theme Options >> Other >> Custom CSS. You can tweak pixel values to get the results you were looking for.

Let me know if this helps.

Yes, that helped.
I will use the Custom CSS field in Theme Options then.

My last questions:

  1. Can you please “edit” this code:
.entry-title, 
.entry-title a {
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1.4em;
}

so I can also change the color and font weight?

  1. How do I delete that little arrow that appears on the widget Recent posts?

  2. Is there a code I can use to delete the date from here: When I open a post, the top line with: name, date, category & #of comments?

  3. I would like to add a widget to my right sidebar which is not in the offered list of widgets? I would like to add a picture there that links to something. Do I need a plugin for that?

Thanks a lot for all your help.

  1. This is how you can change color and font weight using CSS:
.entry-title, 
.entry-title a {
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1.4em;
  color: #111;
  font-weight: bold; /* Can be used numbers such as 500 to add specific width but not all fonts supports all wights */
}
  1. You can remove this arrow by adding this simple code to Appearance >> Theme Options >> Other >> Custom CSS
.widget ul li {
  background-image: none;
}
  1. Post date from entry meta can be removed like this:
.entry-meta .posted-on {
  display: none;
}
  1. You can use Jetpack plugin that have many useful features and one of those includes image widget. However, it is much easier to just format your image the way you want using WordPress regular post/page editor. Then copy/paste code that WordPress generates by switching to Text editor in WordPress. Then add this code inside Text widget which is available under Appearance >> Widgets are you are good to go.

Hi Aigars, can you please help me with 2 issues?

  1. When I’m logged in as admin on my blog and add text under the picture, it is centered like I want. But when I check on the blog afterwards, it is aligned to the left and with a different font. How can I fix that?

  2. Right after the picture, there is a huge gap, and then comes the text. It looks like there is one more line but I can not delete anything. This gap doesn’t show up when I’m editing the page.

Why is it different in admin view and on the blog?
Please see it here: http://www.travelwiththesmile.com/about/

Thanks.

WordPress default styling is different from what that is set by theme itself.

To align post caption and reduce space below images with captions you can add this simple CSS to Appearance >> Theme Options >> Other >> Custom CSS:

.wp-caption .wp-caption-text {
  text-align: center;
}
.wp-caption {
  margin-bottom: 0;
}

Let me know if this is what you were looking for.

Yes, that helped. But I would like the text under the picture to be even closer to the picture.

Also, I need to verify my website through different webmasters by downloading the HTML verification file and uploading it to my website. Do I paste this file also to: Appearance >> Theme Options >> Other >> Custom CSS?

Thanks.

You can reduce padding even further by adding this code:

.wp-caption .wp-caption-text {
  padding: 5px;
  margin-bottom: 5px;
}

These are just an examples and you can use any values you want. Even zero if that what you are after.

There are numerous verification methods for Google Webmaster Tools, however, only one can be done via WordPress dashboard - Meta tag verification. If you choose this method then meta tag that looks like this:

<meta name=“google-site-verification” content=“5KEGFzFDIiMo8KQv67jlpWq8yZDBKlq” /> (don’t copy this as this is jut and example and your code will be slightly different)

And add it inside Appearance >> Editor >> header.php right somewhere between opening and closing <head> </head> tags.

Other methods:

HTML file verification can be done by uploading this via fila your website root folder. This can be done via FTP or your hosting control panel.

Domain record verification can be done via your domain registrar (possibly the same company that offers you a hosting)

Got it, thanks.