Docs

[Andysallis]

Hi guys!

I am trying to replicate the look and feel of the Recent posts, for use with the related posts plug in that I have, so far all my attempts have ended with it either looking weird or completely breaking the whole page!

Links are in the next post,

thanks.

[Andysallis]

This reply has been marked as private.

[Darshana]

Hi there,

Thanks for writing in! Customization requests for 3rd party plugins would be outside the scope of the support we can offer. However you can try adding the following CSS rules into your Customizer, Custom > CSS area.

.jp-relatedposts-post {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding-right: 0 !important;
}

.jp-relatedposts-post-a {
    color: #000000 !important;
    font-family: "Oxygen",sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

Hope that helps.

[Andysallis]

This reply has been marked as private.

[Lely]

Hi There,

Also try adding this:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
    width: 32%;
    margin-right: 1%;
}

Which color fade are you referring too? Please clarify.

[Andysallis]

When you hover over the image it fades darker, I am wanting to make it fade to a blue like I have for the recent posts.

The above CSS didn’t seem to work for the gap sadly.

EDIT: never mind, adding !important fixed it

[Paul R]

Glad to know it’s fixed. Have a nice day! 🙂

[Andysallis]

Hi, I am still needing help in getting the blue colour to show.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
    position: relative;
}
.jp-relatedposts-post:before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    position: absolute;
}
.jp-relatedposts-post:hover:before {
    background: rgba(49, 118, 165, 0.17);
}

Let us know how this goes!

[Andysallis]

no change unfortunately

[Rad]

Hi there,

Please add this,

  #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover, 
  #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
  
    filter: alpha(opacity=100) !important;
    -moz-opacity: 1 !important;
    opacity: 1 !important;
  
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post > .jp-relatedposts-post-a {
background-color: rgb(49,118,165);
    display: inline-block;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover > .jp-relatedposts-post-a img {
filter: alpha(opacity=85) !important;
    -moz-opacity: 0.85 !important;
    opacity: 0.85 !important;
}

Hope this helps.

[Andysallis]

using the above code, just removed the hover effect, not to worry, I shall keep it as it is.

[Nabeel A]

Sure, do let us know if you need any assistance.

Cheers!

[Author]

Posts