You will find lots of Nice Looking Sophisticated Themes from Elegant Themes Gallery. All of their Themes are Unique and nicely designed. Few of my clients are using Elegant Themes due to “ePanel” Features.
Everything is fine with their themes except the “Read More” button. Everywhere of their theme you will find Read More Buttons, its not bad but maximum of cases we don’t want Read More Buttons to show at the end of Each Post and Pages. These buttons looks nice at the end of the Post or Page Excerpt but the Bug with some of their theme is the Read More button display at the end of the full post. Some times its very annoying to have them in your every Post or pages.
If you are using Post Excerpt the button will appear, if you will use <!–more–> tag the Button will appear there, at the end of your post it would be there. There is no such option available under the ePanel to disable Read More button, so we have to fix this problem on our end.
If you are using any Elegant Themes and having the same issue & you want to get rid of it then please follow my Short Tutorial below.
- Log-in to your Admin Panel
- Then Click On Appearance >> Editor
- By default style.css will load within the editor so we need to work on the style.css file
- Just add following code at the last line of your style.css file, this trick will work for all themes (Its working fine for me)
a.readmore { display: none; }
- In this way all the “Read More” buttons will be disappear from your all posts and pages.
- Whenever you want to add any “Read More” button to any post or page and link it to the full post or any other page or outside link then paste the following code in to your same style.css file.
a.readmore2 { background:url(images/readmore.png) no-repeat right bottom; color:#ffffff; display:block; float:right; font-size:12px; height:29px; line-height:27px; padding-right:15px; text-shadow:1px 1px 1px rgba(0,0,0,0.4); font-weight: bold; margin-bottom: 25px; } a.readmore2 span { background:url(images/readmore.png) no-repeat; display:block; height:29px; padding-left: 15px; } a.readmore2:hover { color: #f6f6f6; }
- Then Just add following code in your desired post or pages to display the read more button with desired link.
<a class="readmore2" href="#"><span>Read More</span></a>
5 to 6 months back I was working with a Real Estate Theme for a client and I faced the above difficulties. In all Places you will find Read More button appear but at that place we didn’t want it and it was spoiling my custom design with that theme, so I asked the Log-in Details of my client to check this in their support forum but surprised to see lots of people asked the same question for different themes but their Moderator never bothered to reply them correctly, all those members asked the same questions many time but nobody replied them, one of their moderator who is from India has replied to one of the thread but that trick also didn’t work.
Its not a Big deal to fix the problem because everything is possible and we can do what ever we want with the WordPress Theme but presence of Mind always required. So I have the person who replied there in my client’s name and many people PM my client and thanked him, I read their Message and solve their Problem over PM. Today I found few people are suffering from this issue so I thought to write the same tutorial here, it will be very helpful for those who don’t like those “Read More” buttons.
Please follow the steps and implement it, I hope it will solve your problem, if not then please drop me a comment here or you can always Contact Me using the Contact Form.
Thanks for the great tip. Despite doing this, I’m still having trouble getting rid of these buttons on my site using the Envisioned theme. I see exactly what you are doing here and, looking at the source for the page containing the buttons, this should work but, for some reason, my Read More buttons are still there. I’ve tried adding the new style information to both the main styles.css file and the colour-scheme specific stylesheet yet neither seems to work. Can you offer any hints as to what else could be preventing these new style definitions from being acted upon (as you can probably guess, I’m not a CSS expert at all!). To be sure, I tried 3 different browsers, 2 of which definitely haven’t cached the site before and also used Ctrl+F5 to force a reload on Firefox. All still show the buttons.
Some more information – the tip works perfectly on the Deep Focus theme so my problem is somehow specific to Envisioned. I’ll post a question over in the Elegant Themes support forum and update this comment thread if and when I receive an answer.
I finally found the answer (though I still don’t understand why your original version didn’t hide the buttons). This may only affect Read More buttons on the homepage but that’s the only place I was seeing them so here’ the style.css addition I had to make:
.service a.readmore { display: none; }
Dave They are time to time changing their coding and improving their quality. My Trick works for the Most of their themes but this trick was specially for their real estate theme. But this css code will disable all the Read More buttons from the Home Page. So for different page we need to add our css code as per the requirements. Just like one of my client asked me all the read more button should be removed from the Home Page but all other pages the Button should appear so for this case my trick will work if anybody else want to display the button in one area and remove from other locations then its code will be different.
So for different purposes the code will vary. Thanks for Posting the Solution above so that other readers can read it and it would be very helpful for them.
If in future you will face any problem then please feel free to write me here with your site link so that I can check it and get back to you with solution.
Take Care Dave
I’m still having this issue of not being able to remove the “read more” buttons on the bottom of the home page. I’m using the Professional theme. If anyone has any ideas, please let me know. Thanks.
Hi Nilesh. I got your Mail this morning about your Issue. I was checking your coding and I didn’t find the code I suggested in my Post to use in your Website. Anyways Please apply following code in your “style.css” file and save it, It will definitely remove 4 “read More” buttons from your website’s Footer areas.
—————————————–
#content a.readmore {
background: url(“images/readmore.png”) no-repeat scroll right bottom transparent;
color: #282828;
display: none;
float: right;
font-size: 11px;
height: 27px;
line-height: 27px;
padding-right: 13px;
text-shadow: 1px 1px 1px #FFFFFF;
}
————————————————-
If you face any problem don’t hesitate to write here. But Paste the code properly in your css file otherwise it won’t work.
Thanks
Hi Debasis,
Can you take a look at my website. When I added the first code displayed above on your page, all the “Read More” buttons were hidden. Can you tell me how to avoid this?
Thanks
Amit
Hi Amit,
This Trick is for those who wants to remove the “read More” button entirely from their site. But One Can Display the “Read More Button” In their Desired Post or Pages by Adding the following Code in Their Each Post or Page Content ( in HTML Mode)
Read More
If you want to display the read More Button back in your website then Just Delete or Comment the following CSS code from your style.css file.
Just Delete the following Line
a.readmore {
display: none;
}
Or Comment it Like
/*
a.readmore {
display: none;
}
*/
I Just checked your site all “Read More” Buttons are showing in their Proper Place, so I think you have removed the code from your “style.css” file. Please feel free to contact me if you need my help.
Take Care
Hi Amit.
i was wondering if you could help me with the epanel thing by elegant theme. I f i want to display two pages only on the frontpage body (homepage body). How can i edit the epanel?
Inthe Homepage section they have 3 content area. How can i reduce it to two, Please let me know if u can help . Thank you
Hi Ashraf,
May I help you? Myself Debasis Author of this Blog. If you need any assistance please let me know. BTW Are you writing to Amit or Me?
Thanks
~Debasis.
Wow, that’s clean. Gr8 Tutorial friend…really you saved me… my employer gave a task to do over Elegant theme and i was working on it but couldn’t understand how to remove “read more” buttons so I was very tensed and finally came at your site and followed each steps…after it my all problem solved…All Credit Goes to you Only.
Thanks
Hi, Debasis,
I have tried your tricks in my website (Elegant ~ The corporation theme), but it doesn\’t work. Any other solution to remove the \"read more\" button shown in the post?
Your kind reply is greatly appreciated.
Rgds,
Lee
Hi Lee I Just visited your site and I found There is No read More present in the home page except the featured slider. So Please let me know which area “Read More” button you want to remove. I will definitely help you in solving this problem.
Take Care.
~Debasis
Dear Debasis,
I wish to remove the “read more” button from the featured slider.. possible to do that?
Rgds,
Lee
Hi Lee Its possible to remove “read More” buttons from the feature slider area. For doing this You need to update the following css in your style.css file.
====================================================================
#featured-slider a.readmore span {
display: none !important;
}
#featured-slider a.readmore {
display: none !important;
}
=====================================================================
Just add the above css code at the end of your style.css file and update it, it will remove the “read More” buttons from the featured rotating slider. Please try it and then let me know.
Thanks
I’m using the Magnificent theme here and Glow at http://www.coachingbythestars.com
I want to show the comments to my blog, and the easiest way would be to change “read more” to comments. I think.
Can you help?
Marry Thanks for Dropping ur Comment with your Question. Tomorrow you will get a Reply from me on this matter with proper solution.
Take Care.
~Debasis
I had the same issue my self and seen that you still haven’t found the fix, try placing this at the end of the css file:
#featured #slides a.readmore span { display: none !important; }
#featured #slides a.readmore { display: none !important; }
just a slight alteration from what Debasis Pradhan mentioned. worked for me mate.
Thanks Aaron for dropping your comment. When I was using the older version that technique was working fine but that’s the basic fundamentals for removing the read more buttons, so on that basis you can alter the code and fit it as per your need.
DUDE thank you so much, this saved my life…okay maybe not my life but it helped me mucho time.
THNAKS!
Gr8 to Hear Ali That My Short Tutorial Helped you. Thanks for leaving your comment. Keep In touch & Subscribe to my Blog for some more good Upcoming Tutorials.
Thanks
Hi Debasis,
could you please tell me if it\’s possible (and how exactly it\’s possible) to increase the number of words before \’read more\’ button. Like say, I would like to see 200 words instead of 55. I\’ve tried many suggestions including some plugins, nothing works. My theme is Polished.
Thank you in advance!
Hi Nataly,
Due to some of my personal problem I’m not getting time to experiment on your request immediately, will it be ok if I will Submit the Solution after 1 or 2 days?
sure, I’ll wait:) sorry to bother you! but these themes need really professional approach, usually I can deal with everything myself and this is the first case when I couldn’t fix it myself:)
I have an issue on my blog, though I’m still working offline. When I make use of in my post, it breaks my post (which I want it to do) but does not display the read more link. Please, what I’m I doing wrong and what do I need to do? Thanks in advance
Can you please Submit your Blog Link to me where you have used the theme? So that I can take a look at it and try to provide you the best solution.
Take Care.
~Debasis.
Doesn’t work with Theprofessional theme.
John,
My Current Membership Has Been Expired so I am Unable to download any latest Themes so for this reason I am unable to Update that Post because in New themes may be they have changed many coding so accordingly I also need to change the code, so it may work.
Whats your Site Link?
I have found a solution that works for Theprofessional theme. Just remove the line
<a href="” class=”readmore”>
in the files: featured.php and home.php
this removes the read more button in the home page and in the feature slider
Thanks John For the Updates So Others can Get Benefit Out of It.
Thank you very much for your trick, It worked for me!
I have another question, Do you Know how to remove the link to the page of the Slider? I want only show the title of the page… (Or remove completely the \"box\" of the title and caption of the slider and show only the image…) I searched a lot but I didn\’t find it!
Thanks in advance!!!
Hi, great thread. I thought I’d chime in with a question too. I’m currently running Elegant Themes – InStyle and I’ve been trying to figure out how to remove, or switch on or off, the three blurbs with thumbnails in the content area on the home page. It’s a new site I’m putting together for a photography business and I’d like to have the background images on the homepage (acting as a simple folio) to be clean, simple and unimpeded, just the header with the images cycling in the background. I wish the ePanel would have a “none’ option for the three content areas under the hompage tab instead of being limited only to selecting pages.
Any chance I could get a little help?
Thanks
Tony Actually sometimes I also hate those 3 boxes in Home Page. The Home Page without Boxes looks nice with rotating background images. Though there is no such options offered by Elegant Theme Team but we can remove those 3 boxes completely from the Home Page, so the background images will be on Home Page only with rotating format.
If you like that then Please open your style.css file and paste following code at the very end of the file and save it, it will solve your problem.
#services {
display: none !important;
}
I Hope this will help you. Please try it, if you need any help then please feel free to Update me here.
Take Care.
Debasis, you’re the man! That worked like a charm. A simple 2 second fix, versus my 4 hours of messing around trying to figure out what the hell was happening, lol. Although I still think the Elegant Team should have options in place that allow the user to toggle features like that on or off within the ePanel or something, maybe an idea for future releases.
Thanks so much for your help, it’s very much appreciated.
Take care.
Thanks Tony. Previously I sent them the mail suggesting some modifications but I never heard back from them. Anyways Our problem is solved now. if you ever face any difficulties then please post your question here, I will try my best to solve your problem.
Take Care.
Hi Debasis, I am running into the same issue with my site. I can’t get rid of the three blurbs at the bottom. I used what you recommended but they still won’t go away.
Do you think I am doing something wrong? Thank you for your help! Brandi
#services {
display: none !important;
}
Hey Brandi are you talking about this site: novitacare.com? If so and you want to remove 3 read more buttons from the bottom Blurbs then the code is this:
.readmore {
display: none !important;
}
Hi Debasis,
Thank you for the quick response back. Yes, it is for NovitaCare.
I tried the code you just gave me, it isn’t working for some reason.
Do you know if there is a way around not having the three service pages display at the bottom? I really just want it to be the slider with nothing at the bottom, but from what I am reading, I can’t get that figured out either. I tried the code you mentioned earlier in the blog for this as well.
Thanks again for your help.
Brandi
Brandi I think you are making any mistake or any mistake in implementation because I tested that code and its working fine on my end. For removing the 3 Blurb from the home page then please Paste the following code in your “style.css” file to the end of the code and I have tested it and its working fine on y end….
#blurbs {
background: url(“images/blurbs-bg.png”) repeat-x scroll 0 1px #FFFFFF;
border-bottom: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
display: none !important;
margin: 0 auto;
padding: 35px 0 40px;
width: 958px;
}
Hi, I am signed into WP, went to editor then style.css and copied and pasted the code you gave me at the bottom and it still isn’t working.
Send me ur Admin Details… bapidebu@gmail.com
I am available for 5 mins. so I am trying to fix it for you within this….
TC.
Thank you!!! You’re the best.
Thanks Brandi! Stay connected with me and if you have any WordPress related problem then please do let me know.
Take Care.
I am working with Elegant Theme’s Business Card Theme. I cannot figure out how to add a Contact Us Form. Can you advise?
Thanks Very Much!
Hi Renee,
Can you Create an account for me and add administrator privileges so that I can check the issue for you and try to fix it for you.
Thanks.
Great tutorial. You helped me alot with this. I’ve got another problem. I removed the “read more” buttons from the three burbs on the homepage, but I wanted the button to show on one of them. I have added the button by manually adding the code to the page, but it shows on the page itself too. Any way to hide that ? It should show on the homepage but not on the page itself. Thank you.
Hi Haseeb,
Sorry for the Late reply. I was out of Town for a Project Work. I Came Few days back… So replying you today. Currently there is no solution for this… but I will work on it and Update the Post with some New code.
Thanks for letting me know about this issue.
Hi Debasis, your method for removing the ‘Read More’ and subsequently ‘Learn More’ buttons seems effective for most people. For me it worked great on removing the Learn More buttons from ET’s Nimble theme but it does not seem to be working for Simple Press. I have added both pieces of code to remove the Read More buttons from the page and the slider but it does not appear to be working, any thoughts?
Also, the code for removing Read More from the slider doesnt seem to work with Deep Focus.
Hi Debasis, i figured out how to remove the read more button from Deep Focus slider – not to worry!
Still cant figure out Simple Press however
Alex It was a Generalized Code which was working perfectly for most of the themes but as u Know the Elegant Theme Team Updating the Codes and launching New Versions so due to this his code didn’t work for you. When you face any problem with any site Just Put your Site Link in the comment Box so I can check your site and provide you a Better Solution.
Thanks.
Hi Debasis,
I have tried all of the solutions here to remove the readmore button from my theme but none of them have worked. I have the Chameleon Elegant Theme and the website is texashomegardening.com. Can you please help me with what I am doing wrong please?
Hi Ryan,
I think There is no Read More Button over your given site. I Just checked that site and I didn’t find any Read More Button there.
Please let me know if you are still facing this problem.
I am unable to remove it from the featured slider, I am sorry I should have mentioned where I was speaking about.
That’s why I was Looking for… Ok here is The Code for you. It will work Nicely. Just Paste the code in your style.css file at the end line or the Bottom of the code.
This failed to work as well… Any other ideas?? I’ve been messing with this for two days, can’t figure it out.
Ryan Please check your site there is no “read More” Button over your Slider Area. Previous it was there. The Code which I sent you will work for removing the button from your slider area. Kindly clear your Browser cache and Recheck the site u will see the changes because I can see the changes.
Thanks.
Oh I have just seen what your code did. I am trying to completely remove the bubble, read more, text, basically everything. The only thing I want shown is the image as the read more area takes over half of the image….
You should tell me about your requirement exactly because you told me to remove read More Button then you tell me to remove it from the slider. Anyways wait Giving you the code for this.
Here is the Code.
—————————————————————
.featured-description {
background: url(“/wp-content/themes/Chameleon/images/featured-description.png”) repeat scroll 0 0 transparent;
border-radius: 7px 7px 7px 7px;
display: none !important;
height: 160px;
padding: 37px 33px 40px 40px;
position: absolute;
right: 53px;
top: 50px;
width: 340px;
}
—————————————————————
This worked. Sorry, I didn’t put in words what was in my mind very well. I thought the readmore button was that whole grey area. Thanks again.
Its Ok Ryan. I am happy that I was online and able to reply you and short out your problem. Ryan If you found this Site helpful then please Like Our Facebook Fan Page and Share this Post in Different Social Sites or you can share it over your Facebook Wall.
Everyday I am getting 100 of Mails to provide support on different things And I never hesitate to provide support freely but No one Realize to Share the Post or Site or leave a Valuable feedback about this blog in their Personal sites.
Thanks.