Styling the read more link

  • Resolved Mr Lucky

    (@voodoochill)


    6 years, 6 months ago

    Is there a way to style the Read More link

    I have this parameter
    morelink="Read more"

    But it doesn’t have an ID so if I use custom CSS on the link (e.g. to make it a button) that also applies to the title and the image showing with the excerpt which are also links.

    I can style the title separately by using

    .lcp_catlist h3 a

    But cannot find a way to style the Read more link without it also affecting the image link. Can anyone please help?

    Thanks

    • This topic was modified 6 years, 6 months ago by Mr Lucky.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor zymeth25

    (@zymeth25)

    I see you haven’t read the documentation so I’ll drop you a link ??

    https://github.com/picandocodigo/List-Category-Posts/wiki/HTML-&-CSS-Customization

    TL;DR

    morelink_class and/or morelink_tag

    Thread Starter Mr Lucky

    (@voodoochill)

    Ah thanks, I didn’t see that part of the documentation, I was looking under More parameters you can use

    But I have tried this and does not seem to be working, what am I doing wrong:

    [catlist id=8 excerpt_size=60 excerpt=yes orderby=date posts_morelink="Read more…" morelink_tag=p morelink_class=morebutton title_class=lcp_title title_tag=h3 numberposts=-1 order=DESC thumbnail=yes]

    The tag and class are not there when I view page source in inspect elements.

    Thanks.

    Plugin Contributor zymeth25

    (@zymeth25)

    posts_morelink is not morelink, if you use posts_morelink you need to use posts_morelink_tag etc.

    Thread Starter Mr Lucky

    (@voodoochill)

    Thank you of course.

    posts_morelink_class is working fine but posts_morelink_tag=p is not inserting a p tag (I have tried p, span, div)

    Plugin Contributor zymeth25

    (@zymeth25)

    This is because this parameter is not supported, if you go back to the docs you’ll see posts_morelink_tag is not listed there. (I somehow missed that in my previous post) In the current implementation you can only specify posts_morelink_class and it will be applied on the anchor element.

    There is a pull request on Github that fixes this but it hasn’t been merged yet.

    If the only thing you need is a <p> like functionality you can specify display: block; for the class set in posts_morelink_class and then apply any other CSS you want.

    • This reply was modified 6 years, 6 months ago by zymeth25.
    Thread Starter Mr Lucky

    (@voodoochill)

    If the only thing you need is a <p> like functionality you can specify display: block; for the class set in posts_morelink_class and then apply any other CSS you want.

    Yes, that is what I did to get round it, but I wanted to be able to make it like an inline button on a separate line.display:block causes it to be full width or specific width, rather than stretching to accommodate the text.

    Plugin Contributor zymeth25

    (@zymeth25)

    You can try display: table which should achieve what you need. No other workarounds I can think of. You can also check out custom templates.

    Thread Starter Mr Lucky

    (@voodoochill)

    You can try display: table which should achieve what you need.

    Thanks that works perfectly

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Styling the read more link’ is closed to new replies.