Font for 'Related' posts

Support
#1

Hi. This is how posts in my landing page look like:

I want the related posts at the bottom of my posts to appear in this font. How do I do this?

#2

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

h4.jp-relatedposts-post-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    font-family: "Prompt",sans-serif !important;
    font-weight: 100 !important;
    color: rgb(75, 75, 75) !important;
    opacity: 1 !important;
    margin-top: 5px !important;
}

p.jp-relatedposts-post-date {
    font-family: "Rasa",serif !important;
}

Hope it helps :slight_smile:

#3

Hi. I tried it but it doesn’t work. Here’s what I got:

The title weight looks more than 100. Also the month (date) should be all uppercase letters.

#4

Hello There,

The code did not work because you use a different code.

And Jetpack styles is overriding the code. You need to update the code and use this:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a,
h4.jp-relatedposts-post-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    font-family: "Prompt",sans-serif !important;
    font-weight: 100 !important;
    color: rgb(75, 75, 75) !important;
    opacity: 1 !important;
    margin-top: 5px !important;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
p.jp-relatedposts-post-date {
    font-family: "Rasa",serif !important;
}

Hope this helps. Please let us know how it goes.

#5

Hi. This works, thanx. And I managed to figure out the minor tweaks.

  1. But I still can’t change the font for ‘More’ to match ‘Share this’ and ‘Like this’.

I also want to change it from ‘More’ to ‘More like this.’ I tried changing this via Widgets as well as Customizer, but failed.

  1. Can you also help me remove the underline on the title when the cursor hovers over the thumbnail?

#6

Hi there,

  1. Looks like it’s every changing, now it’s h3. Please update the above CSS to this
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a,
h4.jp-relatedposts-post-title, h3.jp-relatedposts-post-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    font-family: "Prompt",sans-serif !important;
    font-weight: 100 !important;
    color: rgb(75, 75, 75) !important;
    opacity: 1 !important;
    margin-top: 5px !important;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
p.jp-relatedposts-post-date {
    font-family: "Rasa",serif !important;
}
  1. Please add this CSS as well,
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
    text-decoration: none !important;
    border-top: 1px solid #ccc;
}

Thanks!

#7

This is based on the code you just gave.

  1. ‘More’ is still not the font I’m trying to set (see my earlier post).

  2. I’ve changed ‘More’ to ‘More like this’ in the ‘Related posts’ setting but the change is not reflected here.

  3. There’s still an underline when the cursor hovers on the thumbnail. I want to remove the underline.

Hope you can help. Thanx.

#8

Hello Again,

1.) & 2.) Please update the code again and use this:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a,
h4.jp-relatedposts-post-title, h3.jp-relatedposts-post-title,
#jp-relatedposts h3.jp-relatedposts-headline,
#jp-relatedposts h3.jp-relatedposts-headline em {
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    font-family: "Prompt",sans-serif !important;
    font-weight: 100 !important;
    color: rgb(75, 75, 75) !important;
    opacity: 1 !important;
    margin-top: 5px !important;
    text-decoration: none !important;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
p.jp-relatedposts-post-date {
    font-family: "Rasa",serif !important;
}

3.) The underline is also removed already. The code above has the code to remove the underline.

We would loved to know if this has work for you. Thank you.

#9

Hey there. Thanx for this. It worked.

‘More’ however doesn’t match ‘Share this’ and ‘Like this.’ I also want to reword it to ‘More like this.’ Is this possible?

#10

Hello There,

Please update the code again and use this:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a,
h4.jp-relatedposts-post-title, h3.jp-relatedposts-post-title{
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    font-family: "Prompt",sans-serif !important;
    font-weight: 100 !important;
    color: rgb(75, 75, 75) !important;
    opacity: 1 !important;
    margin-top: 5px !important;
    text-decoration: none !important;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
p.jp-relatedposts-post-date {
    font-family: "Rasa",serif !important;
}


#jp-relatedposts h3.jp-relatedposts-headline{
    margin: 0 0 1em 0;
    display: inline-block;
    line-height: 1.2;
    font-size: 9pt;
    font-weight: 700;
    font-family: "Prompt",sans-serif;
    font-style: normal;
    font-weight: 100;
    text-transform: uppercase;
}

The result should be this:

Regretfully you can reword it using css. CSS is only for styling and not for overwriting or rewording. You will have to check the Jetpack’s Related Post option is there is a setting to change that. If there is none, you will have to stick to “More”.

Best Regards.

#11

Great. Thank you so much for your help!

#12

You’re most welcome!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.