• Under search, I found a great write up listing how to create custom READ MORE buttons in CSS, I’ve posted the link below.

    It even provides the CSS text for a Read More Button with a “leaf” image – I would like to copy this script and need HELP.

    Where do I place the CSS script? I’m afraid of making a mistake. Can someone walk me through this process? PLEASE
    https://codex.www.ads-software.com/Customizing_the_Read_More

Viewing 15 replies - 1 through 15 (of 17 total)
  • your theme has a style.css The css goes in there

    css files are not so picky….it can go anywhere in that file. If you can find the css that controls how your posts look, I would put it there….for organization sake.

    Just make sure you don’t accidentally put it inside another elements {} or accidentally delete any of them

    Just make a backup of your theme each time you want to mess around with it….then you don’t have to worry about making a mistake.

    Thread Starter theasheart

    (@theasheart)

    Thank you for being so gracious in your timely response. Under Editor I have the following lists: Should I just list the CSS code under style sheet? Or in one of the templates?
    Templates
    404 Template (404.php)
    Archives (archive.php)
    Comments (comments.php)
    Footer (footer.php)
    Header (header.php)
    Main Index Template (index.php)
    Page Template (page.php)
    Search Form (searchform.php)
    Search Results (search.php)
    Sidebar (sidebar.php)
    Single Post (single.php)
    Theme Functions (functions.php)
    bookmark.php (bookmark.php)
    comments-old.php (comments-old.php)
    Styles
    Stylesheet (style.css)

    all css goes into a stylesheet which the editor puts at the bottom of the list of templates.

    Your theme’s only stylesheet is ‘Stylesheet (style.css)’ so that’s where it goes.

    Thread Starter theasheart

    (@theasheart)

    I thought so, so I put the following CSS script in under Content, save it and gave it a go. No changes. Hummm…..maybe I should try something easier. ??

    Here is the instructions:
    The design possibilities with CSS are practically unlimited, and WordPress allows you to use images in many of their Template Tags, including the more tag. To add an image, there are two ways to do it. Begin with the most simple — listing it in the_content() template tag.

    This examples features the image of a leaf after the “Read More” text.

    <?php the_content(‘Read more…<img src=”/images/leaf.gif”
    alt=”read more” title=”Read more…” />’); ?>

    Notice that the code uses an ALT and TITLE in the image tag. This is in compliance with accessibility and web standards, since the image is both an image and a link. Here is what it might look like.

    and I told him that he should get moving or I’d be on him like a limpet. He looked at me with shock on his face and said Read More…

    You could even add a style to the image and more tag, as mentioned above, to style it even more. To use the image without the “Read More” text, just delete the text.

    Is this what you put in your css?

    <?php the_content('Read more...<img src="/images/leaf.gif"
    alt="read more" title="Read more..." />'); ?>

    ??

    That’s not css…..I think you got the instructions a bit confused.
    that’s the php stuff, it would go into index.php

    from the same section

    .moretext {
       width: 100px;
       height: 45px;
       background:url(/images/leaf.gif) no-repeat right middle;
       padding: 10px 50px 15px 5px

    Is css

    Thread Starter theasheart

    (@theasheart)

    thank you. That’s why I asked. ughhh..

    sorry…since you asked about css I assumed you knew the difference in code….so I was telling you how to deal with css.

    So now I have to ask a question….do you have a graphic you are trying to use? I just want to make sure you have uploaded that image to your themes images folder.

    Thread Starter theasheart

    (@theasheart)

    nope…I thought it was magically going to appear! lol

    I definately am in the remedial school.

    I added all that text and still nothing. I might delete the leaf bit just to see it it reads “more”
    that would be better than ….

    ok…so….first off. Which example are you trying now? the first (php) method or the second (css) method?

    you’ll need the image on your host for it to work either way…

    Also, have you wrote a post using an exerpt/read more? You need to do that too…..

    Thread Starter theasheart

    (@theasheart)

    Uh, I saved the gif pic of the leaf and am looking for a place to put it. Where exactly is the image folder.

    wordpress directory->wp-content->themes->your theme->images

    Thread Starter theasheart

    (@theasheart)

    Not sure if this makes a difference but I log on as an Admin in WP via Joomla – the folks who host my website.

    SO, when I’m looking at my dashboard. I click on Themes and I see the cute little theme I installed but I don’t see an image file. It does say,

    All of this theme’s files are located in /themes/Vector_Flower.

    But I don’t know how to get there.

    I think I’m lost. More than lost…..totally out of the running.

    yeah…you can’t get to your themes images really through WP admin…. it’s through ftp …… onto your server/host

    Thread Starter theasheart

    (@theasheart)

    ok, I get the image deal. So let’s say, I just make it simple. Instead of Dots, it reads, “READ MORE.”

    Should I use CSS or PHP? Because I put both in. I’m very enthusiastic.

    php…in your index.php

    Something to that effect should already be there

    <?php the_content('Read the rest of this entry &raquo;'); ?>
    is mine for instance…..so when I make a post, if I use the ‘more feature’ or craft an excerpt, it’ll have part of the post then say Read the rest of this entry >>

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Customizing the Read More with Image – HELP ME PLEASE’ is closed to new replies.