Customizing the visual links

Hi there,

Can you give me a link to what you have right now?

You want a different color for different posts? Or just the same color used for whenever there is a visual link block? What would you want the color to be?

Hi Brecht,

I just want to know if it is possible to have a different color for each post on the page. Right now, I figured out how to change the color from white to blue for all of them using CSS, but is there a way to have a different color for each post?

Here is how my CSS currently looks to change the color to blue on my website which has been working:

.vlp-link-container, .vlp-template-default {
background-color: #000000 !important;
color: #00ccff; font-size: 14px !important;
}

Are there settings in the plugin to do this for each individual post?

Here is the link of how your plugin currently looks on my website with my CSS:
https://clientswebdesigns.com/sanssouciblogs/

It’s on the homepage of the website, but you need to scroll down to the heading that says, “Featured Series Mini Books”. It’s under that heading.

Also, on a mobile device, is there a way to add some padding between the post image and the post title? They look too close together on the iPhone.

Thank so much.

We don’t have anything in the plugin to change that color per post.

One option would be to include an HTML block in a post where you want to change the color and add the CSS overriding the link color in there. That way the color would change for that particular post only.

You could use something like this to add margin:

@media all and (max-width: 450px) {
    .vlp-link-image {
        margin-right: 10px;
    }
}

Thank you, Brecht,

Is there a way to adjust the line height of the post title? Some of the post titles I have a very long so they wrap around to the next line with a double space. Can that be adjusted in the CSS? It would be applied to all the posts titles.

• This reply was modified 1 year, 10 months ago by lauritasita.

CSS could be used, but that particular property can be edited in the Link Template Editor as well. You can set the line height when editing the title block.

Hi Brecht,

If I want to use CSS to edit that property could you tell me the how that would look? It doesn’t seem to work if I code it this way because I need to be able to the post title property and this will only edit the summary information under it: How do I code the CSS to edit the post title only?

.vlp-link-container, .vlp-template-default {
background-color: #000000 !important;
color: #00ccff; font-size: 14px !important;
line-height: 1em !important;
}

Thanks.

Why not use the template editor? You can edit the title block specifically there.

If you do want to use CSS you can target the .vlp-link-title selector specifically.