Support » Themes and Templates » Format "read more"

  • Resolved IlanK

    (@ilank)


    Hi,

    I’d like to format the read more by placing it in a div class.
    Whenever I try to do that though it makes all the text that div class, but not the actual read more.

    My div class is called “readmore”

    Here is my webpage: http://www.payitforwardfriends.com

    I am using the Ari theme.

Viewing 15 replies - 1 through 15 (of 21 total)
  • Moderator Andrew Nevins

    (@anevins)

    Wrap it with jQuery.
    Assuming you have jQuery referenced, try;

    jQuery('a.more-link').wrap('<div></div>');

    I’m not sure how to use jQuery. Would you provide more instructions please?

    Moderator Andrew Nevins

    (@anevins)

    If you want to wrap the read more link in a div on all pages, add this code to the bottom of your footer.php file, just above the </body> element.

    If you want to wrap… on just one template, find that template and add this code to the bottom of that template file.

    <script type="text/javascript">
    jQuery(document).ready(function() {
     jQuery('a.more-link').wrap('<div></div>');
    });
    </script>

    This second code doesn’t seem to reference the read more div class and link it to the read more text.

    I assume I need to do something else but I’m not sure what.

    I added the code to the footer.

    Thank you!

    Moderator Andrew Nevins

    (@anevins)

    It has wrapped the ‘Read more’ text in a <div> element.
    You need to then use CSS to style/ format it.

    There is also information on Customizing the Read More and designing the more tag located in the Codex, if that’s of any help.

    Where do I put the name of the div element?

    Thanks Clayton!

    Moderator Andrew Nevins

    (@anevins)

    You give the div element some attributes through the jQuery above,
    E.g

    <script type="text/javascript">
    jQuery(document).ready(function() {
     jQuery('a.more-link').wrap('<div class="read-more"></div>');
    });
    </script>

    Alright in my footer I have the code

    <script type="text/javascript">
    jQuery(document).ready(function() {
     jQuery('a.more-link').wrap('<div class="readmore"></div>');
    });
    </script>

    and in my CSS I have the code

    #readmore {
    	color:#00CC00 !important;
    }

    However my read more is clearly not green. Have I made an error?

    Thanks so much by the way

    Moderator Andrew Nevins

    (@anevins)

    You’re calling your CSS selector with an ID(#) rather than a class(.),
    also you should apply the color to the anchor.

    Andrew,

    I changed it to . so the code is now

    .readmore {
    	font-size: 15px !important;
    	color:yellow !important;
    }

    this code works on changing font size, but does not working on changing color.

    I am not sure what you mean to the anchor.

    I figured it out. It’s linked to the actual theme and is in theme options. I don’t think there’s a way to specifically change its colour, you have to change a lot at a time.

    Moderator Andrew Nevins

    (@anevins)

    I don’t think there’s a way to specifically change its colour

    also you should apply the color to the anchor.

    You mean like in the div?

    Moderator Andrew Nevins

    (@anevins)

    Yes.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Format "read more"’ is closed to new replies.