wp list bookmarks formatting

  • Resolved auan

    (@auan)


    14 years, 11 months ago

    Hello all,

    Just a question concerning the wp_list_bookmarks() function. On the bottom right of this blog are displayed “Useful Links”, which are user input links from the link tab on the WP dashboard, and are called using wp_list_bookmarks(). Now as you can see, for example with Aotearoa New Zealand Evaluation Association, it is a single link, but the string is longer so it breaks to a second line.

    Sidebar source:

    <div id="sidebar">
	<div id="contact">

        <img src="<?php bloginfo('stylesheet_directory'); ?>/images/ContactMathea.png" width="220" height="36" />

        <h4>Address</h4>
        <p>PO Box 5694 <br />
        Lambton Quay <br />
        Wellington 6145 <br />
        New Zealand</p>

        <h4>Phone</h4>
        <p>+64 4 971 9981</p>

        <h4>Mobile</h4>
        <p>+64 27 281 2774</p>

        <h4>Email</h4>
        <a href="mailto:[email protected]">[email protected]</a>

	</div>
    <div class="blogsidebar">
    <?php
	if ($atpage=="Blogpage"){

		$args=array('title_li'=> '<h4>Categories</h4>','hide_empty'=>0,'orderby' => 'ID','exclude' => 1);
		wp_list_categories($args);
		?>

        <h4 class="archives">Archives</h4>
        <?php
		$args=array('type' => 'monthly','limit' => 12);
		wp_get_archives($args);
		?>
        <a href="<?php bloginfo('url'); ?>/archive">See older entries</a>

        <h4>Recent Entries</h4>
        <?php
		$args = array('numberposts'=>5);
		$myposts = get_posts($args);
		$first=true;
		foreach($myposts as $post){
		 ?>
            <ul>
	            <li><a href="<?php echo($post->guid); ?>"><?php the_title(); ?></a></li>
	        </ul>
         <?php

		 } 

		$args=array('categorize'=>0,'title_li'=> '<h4>Useful Links</h4>');
		wp_list_bookmarks($args);
	}
	?>
    </div>
</div>

    The problem is that, even though it’s the same string, when it breaks to the next line it has the same line-spacing as a single line link would have, which makes it troubling for the user to decided if it’s the same link or if they are seperate. So my question is asking if there is a way to reduce line spacing or padding for strings that go over one line?

    Many thanks.

Viewing 9 replies - 1 through 9 (of 9 total)

  • you could try something like this at the end of style.css:
    ul.blogroll li {margin-bottom:12px;padding:0;line-height:13px;}

    Thread Starter auan

    (@auan)

    Hello, thanks for the reply!

    If I applied that css in my external style sheet how would apply it to

    $args=array('categorize'=>0,'title_li'=> '<h4>Useful Links</h4>');
		wp_list_bookmarks($args);

    if it is not enclosed with list tags? Also how will that make it determine the string size?

    Are you asking how to truncate the link text?

    somesuperduperlongtitle

    becomes..

    somesuperduper...

    as you can see, it is already enclosed with list tags,

    <li id="linkcat-" class="linkcat"><h2><h4>Useful Links</h4></h2>
	<ul class='xoxo blogroll'>

<li><a href="https://www.eval.org" title="www.eval.org" target="_blank">American Evaluation Association</a></li>
<li><a href="https://www.anzea.org.nz" title="www.anzea.org.nz" target="_blank">Aotearoa New Zealand Evaluation Association</a></li>
<li><a href="https://www.aes.asn.au" title="www.aes.asn.au" target="_blank">Australasian Evaluation Society</a></li>
<li><a href="https://www.evaluationcanada.ca" title="www.evaluationcanada.ca" target="_blank">Canadian Evaluation Society</a></li>
<li><a href="https://www.europeanevaluation.org" title="www.europeanevaluation.org" target="_blank">European Evaluation Society</a></li>
<li><a href="https://weblogs.elearning.ubc.ca/mathison" title="weblogs.elearning.ubc.ca/mathison">Sandra Mathison</a></li>
<li><a href="https://www.spear.govt.nz" title="www.spear.govt.nz" target="_blank">SPEAR good practice guidelines</a></li>
<li><a href="https://www.google.com">Test 1</a></li>

	</ul>

    and my idea of formatting is targeted at the list element of the unordered list with the class .blogroll.

    the style does what you asked for: = narrowing the line height with in the breaking link, and adding clear space between different links.
    if you would even try it, without arguing against it, you could see the effect, and tweak the numbers if it is not clear enough.

    Thread Starter auan

    (@auan)

    Hey. I am asking is it possible to give the second line of a string(if it is long enough to have a second line) different line spacing compared the the global value that is applied to the whole of wp_list_bookmarks($args)

    Thanks

    no

    however, what the following style does, is to give a fixed line height to the list element (which applies if the list element breaks into a second line) and extra fixed space to the next list element ( by adding a margin-bottom)

    ul.blogroll li {margin-bottom:12px;padding:0;line-height:13px;}

    if you put this line at the end of style.css, and play with the number values, you will hopefully clearly see how it works.

    There’s no need to do anything with the wp_list_bookmarks if you just want to adjust link line-height..

    CSS can deal with the line-height, whether you stick it in a list or any other element, all you need do is write CSS that specifically targets that given area, alchymyth gave you one example..

    You can target the links if you want, just like alchymyth’s example, but aimed at the links specifically ..

    ul.blogroll li a {
// YOUR CSS DEFINITIONS HERE
}

    Thread Starter auan

    (@auan)

    Thank you all very much. I shall try it out when I head to work!

    Thread Starter auan

    (@auan)

    Many thanks alchymyth, and t3los. It worked great. Sorry if I couldn’t get my head around it properly. Someone was clouding my mind by suggesting Javascript, which after getting it to work seems highly impractical.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘wp list bookmarks formatting’ is closed to new replies.