No "Read More" Button

Sparkling
1

Hello,

in my new installation of Sparkling (after adjusting the colors), I’m missing the [Read More]-Button on my front-page. When I look at the site through the “Adjust Theme” then I can see them, but not, when I am on my normal frontpage.

I use the “more” tag with the built-in button in the editor.

It’s the same problem, the guy in this post has: https://colorlibsupport.com/t/no-read-more-button/

I can share the URL with someone willing to troubleshoot this.

Kind Regards

2

Hi @raken,

I hope you are well today and thank you for your question.

Could you please try using the CSS solutions posted in the following topics?

https://colorlibsupport.com/t/difficulty-with-read-more-summary-at-the-end-of-a-new-post/
https://colorlibsupport.com/t/read-more-tag-doesent-work/

Best Regards,
Movin

3

Hello,
thank you for the fast reply.

I tried your ideas and I attached some images to this post.

If I add

body.home a.more-link {
    display: block;
    color: #DA4453;
}

I get the link as seen on the image “mehr.PNG”

If I do

body.home a.more-link {
    font-size: 0;
}
body.home a.more-link:before {
    content: "Read More";
    display: block;
        float: right;
    margin-top: 10px;
    font-size: 12px;
    padding: 11px 13px;
    background-color: #DA4453;
    border-color: #DA4453;
        color: #FFF;
    text-transform: uppercase;
        border-radius: 4px;
}

I get it like you can see in picture “full.PNG”

And if I try

body.home a.more-link {
    display: block;
    color: #DA4453;
}
body.home a.more-link:before {
    content: "Read More";
    display: block;
        float: right;
    margin-top: 10px;
    font-size: 12px;
    padding: 11px 13px;
    background-color: #DA4453;
    border-color: #DA4453;
        color: #FFF;
    text-transform: uppercase;
        border-radius: 4px;
}

It looks like in “weird.PNG”

But no matter what I do. In the live preview it always looks like “weiterlesen.PNG”. And that’s how it is supposed to look like.
If I do anything different then above, it always looks like in “full.PNG”

The only thing I have set as a custom CSS so far is this:
#page a:hover, #page #secondary .widget a:hover{color: #0094b4;}
Because I couldn’t change the hover-color of the post-topics.

You can find the blog under localnewcomer.de (it’s german).

Kind Regards

4

With using the code

body.home a.more-link {
    display: block;
        float: right;
    margin-top: 10px;
    font-size: 12px;
    padding: 11px 13px;
    background-color: #333333;
    border-color: #333333;
        color: #FFF;
    text-transform: uppercase;
        border-radius: 4px;
}

i get the result shown in the picture I attached.
It’s not what I’m aiming for, but it’s a temporary solution.

I can’t seem to change the text it displays. (that’s what I need to do)
Also it only changes the color of the text and not the whole button when hovering over it. (Not so much of an issue)

Kind Regards

5

Remove the existing CSS code that you are using and instead try using the below CSS code. Change the text “Read More” and colors in the below code to whatever you want to set.



body.home a.more-link{
    font-size: 0;
    background-color:transparent;
}
body.home a.more-link:before {
    content: "Read More";
    display: block;
    float: right;
    margin-top: 10px;
    font-size: 12px;
    padding: 11px 13px;
    background-color: #DA4453;
    border-color: #DA4453;
    color: #FFF;
    text-transform: uppercase;
    border-radius: 4px;
}
body.home a.more-link:hover:before {
    background-color:#38a638;
    color:#000;
}
6

I can reduce the code I provided in my last post to this:

body.home a.more-link {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    padding: 11px 13px;
    background-color: #333333;
}

If I use your code it just doesn’t display anything. It seems like if I “remove” the regular “Read More” I can’t add anything there. As you can see in my second post, I can have the regular “Read More” and add a custom “Read More” Button.

Everything disappears as well, if I add display: none; to the body.home a.more-link {}

If I do display: block; font-size: 0; it looks fine, until you hover over it. the hover is higher then the button.

If you want to troubleshoot on the live site, tell me which code I should use for you to look into it. Currently I use the last one you provided.

Kind Regards

7

Ok. I finally worked it out.

body.home a.more-link{
    display:block;
    font-size: 0;
    background-color:transparent;
}
body.home a.more-link:before {
    content: "Weiterlesen";
    display: block;
    float: right;
    margin-top: 10px;
    font-size: 12px;
    padding: 11px 13px;
    background-color: #0094b4;
    border-color: #0094b4;
    color: #FFF;
    text-transform: uppercase;
    border-radius: 4px;
}
body.home a.more-link:hover:before {
    background-color:#333333;
    color:#0094b4;
}
8

You are most welcome here :slight_smile: