Block: Trimmed Forum Titles

By nickfitz on 6 Nov 2006 at 04:15 UTC

Ive got a "latest forum posts" block, and I was wondering if it was possible to trim the titles so that they all fit on one line.

EXAMPLE:

This is how it is now:
- What a great forum post
it really is wonderful.
- yes it is nice forums
- I know that there is a
lot to post about.

This is how I want it:
- What a great forum...
- Yes it is nice forum...
- I know that there is...

Something like that??

Comments

A suggest to get you going

nevets commented 6 November 2006 at 05:28

The block has css class like 'block-forum-1' (I think it's 1, it may be another number). So you can do something like

.block-forum-1 a {
height: 1em;
width: 200px;
overflow: hidden;
}

You may need a:link and/or a:visited and/or a:hoover in addition/in place of just 'a'.

You want to adjust height so it holds just one line of text and width to correspond to a value probably less than the width of your sidebar. overflow should keep the browser from trying to display another line.

If you provide a link to the site I can also try and provide a more specific answer.

If im using a custom

nickfitz commented 6 November 2006 at 16:20

If im using a custom page-front.tpl.php and calling the block content using:
$block = module_invoke('forum', 'block', 'view', 1); print $block['content'];

How can I implement that style command?

-------------------------
Nick Fitz

In that case I would do something like

nevets commented 6 November 2006 at 16:38

In that case I would do something like this. First changing your code slightly to something like

<?php
$block = module_invoke('forum', 'block', 'view', 1);
print '<div class="frontpage-forum-block">';
print $block['content']; 
print '</div>';
?>

So the content of the block has a surround div with a class that we can use for theming. Then in style.css add

.frontpage-forum-block a {
display: block;
width: 30px;
height: 1em;
overflow: hidden;
}

Note the addition of setting display to block and as before you will want to adjust width and height as needed.

In theory, it sounds good --

nickfitz commented 6 November 2006 at 17:26

In theory, it sounds good -- but it doesnt steam to be doing anything; The site itself is www.x3o.com/gaming1/index.php -- and im working on the left blocks, though it doesnt have to be exclusive to the front page or anything.

-------------------------
Nick Fitz

Correction -- its not that

nickfitz commented 6 November 2006 at 17:28

Correction -- its not that the style does not work, but how we are calling it right now, does not work. For example I added the line font-size: 1px; and it did not change the font size, which leads me to believe that we are not pulling the class properly?

-------------------------
Nick Fitz

This should get you going

nevets commented 6 November 2006 at 18:46

The following rule will limit the length/height of all links (a tag) inside an item list in the left sidebar (so it applies to both the Forum Post and Recent Comments). The setting of background-color is meant for debugging, it helps by highlighting the elements the rule covers. You may want to adjust the width.

#sidebar-left .item-list a {
background-color: yellow;
display: block;
height: 1em;
width: 140px;
overflow: hidden;
}

Whats not clear is why you do not just use the regions plus standard blocks for placing the blocks. It will give you more html/css by default to help limit what is covered. Currently there are no surrounding elements for the Forum Post or Recent Comments that differentiates them. They both share the #sidebar-left id but there is not that makes one list unique from the other (which is why I had suggested the surrounding div earlier).

Thanks, that worked!

nickfitz commented 6 November 2006 at 18:59

Thanks, that worked -- my next question for you is; can it display a "..." after the title, so that it can indicate that there is still more to the title, and 2, can there not be a bullet?

-------------------------
Nick Fitz

Bullets be gone

nevets commented 6 November 2006 at 20:06

First getting rid of the bullets

#sidebar-left .item-list ul {
padding-left: 0;
}
#sidebar-left .item-list li {
list-style: none;
}

The second part removes the bullets, the first with padding-left moves the list its over to the left (you may want a non zero value).

As for the text an ellipses, there is a rule text-overflow: ellipses but it only applies to IE.

Thank you so much, you have

nickfitz commented 6 November 2006 at 20:14

Thank you so much, you have been very helpful, but of course I've got to run one more thing by you.

First: How can I remove the time time since posted associated to the comments.

Second: Is it possible to put how many times its been viewed, to the right of the title?

-------------------------
Nick Fitz

Not with just CSS

nevets commented 6 November 2006 at 20:27

Re: How can I remove the time time since posted associated to the comments. There is not css class that wraps the time element so it can not be removed directly with css easily but changing #sidebar-left .item-list a to #sidebar-left .item-list li will do the trick by limiting how much information is displayed for each list item (li).

Second: Is it possible to put how many times its been viewed, to the right of the title? This one needs more than css to do. For comments approach would be to look at the live discussion module which does what you want. The problem here is the count is appended to the title so it would disappear when you limit the space for the title. Another approach would to write a snippet to display the information and trim the title in code (instead of css). I am pretty sure there is a block that displays forum titles with counts (I am pretty sure you can do it with the view module) but once again you may need custom code if you want to limit the length of the displayed title.