How to Remove Read More Buttons from Elegant Themes?

Elegant-ThemesYou 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 awesome with their themes except the “Read More” button, because few clients didn’t like it as it appear everywhere. Everywhere of their theme you will find Read More Buttons, its not bad at all but maximum of cases we don’t  want Read More Buttons to show at the end of Each Post and Pages, need or requirements vary clients to clients. 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 some 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.

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. I Participated in those discussion on behalf of my clients and tried to help few people. I found many contacted over PM to my client and asked for help so I did help them.

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.

  1. 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 :)

  2. 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 :)

  3. 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

  4. 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 :)

  5. 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 :)

        • 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 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.

  6. 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:)

  7. Samuel Kanmbiey

    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

    • 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

  8. 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!!!

  9. 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;
            }

  10. 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.

  11. 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

        Please could you assist me with the issue on my deep-focus theme.
        I have read through all the comments above and have managed to get rid of the “read more” issue, but the bubble still appears when I hover over the slider.

        the link is http://mail.xtranet.com.au/ks/

        Thank you in advance,
        Grant.

          • Ok Gr8 Here is your Solution. Please paste The following Given Code to your style.css file.

            #slides .description, .slides .description {
            background: url(“images/description-top.png”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
            color: #8E8D8D;
            display: none !important;
            font-size: 12px;
            line-height: 18px;
            padding-top: 19px;
            position: absolute;
            right: -11px;
            text-shadow: 1px 1px 1px #FFFFFF;
            top: 33px;
            width: 275px;
            z-index: 14;
            }

          • You are Most Welcome… Very Soon Starting a new Blog where I am adding Lots of Tutorials, Helps on WordPress, Elegant Themes and Other WordPress Themes. keep in touch with this Blog.

            Always feel free to Drop me comments if you need any help.

            TC.

  12. 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.

        • 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.

          a.readmore {
          background: url(“images/readmore.png”) repeat scroll 0 0 transparent;
          border-radius: 7px 7px 7px 7px;
          bottom: 0;
          color: #7B9297;
          display: none !important;
          font-family: ‘Kreon’,Arial,sans-serif;
          font-size: 13px;
          height: 27px;
          line-height: 27px;
          padding: 0 13px;
          position: absolute;
          right: 0;
          }

          • 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.

  13. 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.

  14. Hello, thanks for all these answers. But, I havn’t found the good solution to my problem… I’ve tried your both solutions, but it didn’t work well…

    I’m using the same theme as Ryan, Chameleon. I would like to keep the Read more in the slider, but not in the posts…

    When I’m using the usual WP button It doesn’t work at all on the home page. I’ve nothing at all.
    So, I’ve used the shortcodes form Chameleon [learn_more] Content goes here[/learn_more] . They are quite pretty on the Home page, but I would like them to desapear when I click to open the post… Could you please help me. Excuse my bad english.

  15. Hi, sorry to bother you but I’m on a dead end.
    I’m using Nimble from elegnat themes, and did a few customization, take a look at http://www.consulenzafamiliare.com , suggestions are greatly appreciated.
    I’m stuck with the buttons, I want to style “Read more..” and “Go to..” but I can’t find the way, I asked the forum but the customization is too deep and they don’t support, that’s why I’m here.

    What I want to do is:
    1 – Remove the zoom from “Read more” button to all the pages.
    2 – Style all the buttons on the same way, maybe a light grey or #F0E7B4
    3 – remove shadow and borders

    Really glad if you could help.

    • Hey Luca Sorry Bro I was Not well… So I was Not checking My Blog But today I back Updated it. So do you still need my Help? Please let me know so that I can work on your question.
      Thanks and Sorry for the late reply.

  16. Hi there

    I’m using Elegant Themes Trim Theme.
    The first bit of code for removing Read More worked just fine.
    The second bit for inserting RM on specific posts did not. The Read More does show up in the intended location on the individual post BUT when I click on it nothing happens and I am not lead to the full post. Even when I click on the post title to see what happens, I am then taking through to the full post but the Read More then shows up in the middle of all the text!

    Help please!

    Prabs

    • I am using the Elegant Simple Press theme. I wanted to remove the “read me” buttons from the home page. I edited the home.php file.

      Here is the code that worked for me.

      <!– <a href="”> –>

      I just remarked it out.

  17. Opps! I was unable to post the code in the previous reply. I’ll try again.

    I am using the Elegant Simple Press theme. I wanted to remove the “read me” buttons from the home page. I edited the home.php file.

    Here is the code that worked for me.

    ‘<a href="”>‘

    I just remarked it out.

    Your comment is awaiting moderation.

    • Hey Eddie,

      Did you figure out the code for removing the “Read More” buttons on the SimplePress Elegant Theme? I am trying to get rid of it on my homepage in the feature gallery. If you have a solution… that would be greatly appreciated. thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>