Remove the 'read more' boxes
-
On the front page: https://ppstaking.com/
I’d like to remove the read more boxes;
I.e.
Read More <span class=”screen-reader-text”>Professional Poker Staking</span>What CSS code can I enter in the editor to do that.
The blog I need help with is: (visible only to logged in users)
-
Hi ppstaking
This will hide all ‘read more’ links on your site. Is this what you are wanting to do?
a.more-link { display: none; }To add custom CSS
Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.
-
Yes, that is what I was asking for. Thank you!
It helps a lot knowing what the selectors are. Is there a way of finding out the selector from inspecting element?After deleting them, I think I want to keep them.
Any idea what ‘value’ I use to change the colours in to the same colour as the header background colour (the dark yellow)
a.more-link {
background-color: yellow;
}
Is not the yellow I am looking for. I’ve seen #ffc used here:https://en.support.wordpress.com/custom-design/css-basics/It would be really good to have a list of selectors, properties and values so I can do this more independantly without having to ask so many questions.
I appreciate your help.
-
Can I change the title of a.more.link from ‘read more’ to something else?
Would need to know the ‘property’ of that “read more” text. -
This article has some good information on how to use your browsers developer tools to identify CSS selectors – https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
-
Just use the # symbol before the color code. Like this.
a.more-link { background-color: #ffc; } -
I don’t think it is possible to change the ‘read more’ text with the theme you are using. Have a look at this forum thread with a similar request.
https://en.forums.wordpress.com/topic/how-to-edit-the-text-in-read-more-button?replies=6
-
Seen that link before. It’s not very helpful imo.
I understand, but how to find my background colour code?
-
-
-
I was also having trouble finding it in the CSS. I used a program called ‘Digital Color Meter’ on my Mac that can identify any color on the screen.
-
w3schools is a good place to learn more about CSS – https://www.w3schools.com/css/css_colors.asp
-
-
Hello there @ppstaking,
I saw something at .ORG you might use. You can hide the text and add an image background with the CSS. That means you can have an image with the text you want instead of Read more. I’m not 100% sure if it will work for you but it’s worth a try!
It’s in here > https://codex.wordpress.org/Customizing_the_Read_More
Below a section “Adding an Image”. -
Can I change the title of a.more.link from ‘read more’ to something else?
Hi there,
The “read more” text can be changed by using the CSS below.
Replace “Your Text Here” in the CSS with the text you want, but please keep it inside the quotation marks.
a.more-link { color: transparent !important; } a.more-link:before { content: "Your Text Here"; color: #fff; position: absolute; } a.more-link:hover:before, a.more-link:hover:active, a.more-link:hover:focus { color: #222; transition: .3s all ease-in-out; }If the CSS doesn’t work for you, please keep it in the customizer, then post back here so that I can troubleshoot it.
Thanks :)
-
None of that code seemed to work for me – I copy pasted pretty much all of it and the read more text box stayed the same. Likely I am doing something terribly wrong.
But any way – It seems potentially easier just to create ones own static page with attractive link buttons using CSS, rather than do this work around. -
None of that code seemed to work for me – I copy pasted pretty much all of it and the read more text box stayed the same.
I was refering to https://codex.wordpress.org/Customizing_the_Read_More when I said this.
Your code worked great, Gary !
-
-
-
I’ve got a further test for you if you are willing.
How would you code seperate read more text for each of the three read more boxes?
- The topic ‘Remove the 'read more' boxes’ is closed to new replies.
WordPress.com Forums 