separate discussions-background

trash · October 2008

Hi,

I was wondering how to seperate the background of discussion so that its able to customize within the vanilla.css

Look at the Image. I keep it very simple but I think you'll get it:

http://h4xr.org/filo

The first example is the normal way: one background (yellow) for the discussion topic and the things like "Category", "Last Comment by ...".The second one is the way it should be: One BG (yellow) for the topic and one BG for the other things (grey). Maybe one for each.

...

It sounds like a little php-tweak or some css-techniques, but I'm such a noob in things like that.

thanks in advance
trash

SubJunk · October 2008

Try replacing themes/discussion.php with this:

<?php
// Note: This file is included from the library/Vanilla/Vanilla.Control.SearchForm.php
// class and also from the library/Vanilla/Vanilla.Control.DiscussionForm.php's
// themes/discussions.php include template.

$UnreadUrl = GetUnreadQuerystring($Discussion, $this->Context->Configuration, $CurrentUserJumpToLastCommentPref);
$NewUrl = GetUnreadQuerystring($Discussion, $this->Context->Configuration, 1);
$LastUrl = GetLastCommentQuerystring($Discussion, $this->Context->Configuration, $CurrentUserJumpToLastCommentPref);

$this->DelegateParameters['Discussion'] = &$Discussion;
$this->DelegateParameters['DiscussionList'] = &$DiscussionList;

$DiscussionList .= '
<li id="Discussion_'.$Discussion->DiscussionID.'" class="Discussion'.$Discussion->Status.($Discussion->CountComments == 1?' NoReplies':'').($this->Context->Configuration['USE_CATEGORIES'] ? ' Category_'.$Discussion->CategoryID:'').($Alternate ? ' Alternate' : '').'">';
	$this->CallDelegate('PreDiscussionOptionsRender');
	$DiscussionList .= '<ul>
		<div class="DiscussionTitleContainer"><li class="DiscussionType">
			<span>'.$this->Context->GetDefinition('DiscussionType').'</span>'.DiscussionPrefix($this->Context, $Discussion).'
		</li>
		<li class="DiscussionTopic">
			<span>'.$this->Context->GetDefinition('DiscussionTopic').'</span><a href="'.$UnreadUrl.'">'.$Discussion->Name.'</a>
		</li></div><div class="DiscussionInfoContainer">
		';
		if ($this->Context->Configuration['USE_CATEGORIES']) {
			$DiscussionList .= '
			<li class="DiscussionCategory">
				<span>'.$this->Context->GetDefinition('Category').' </span><a href="'.GetUrl($this->Context->Configuration, 'index.php', '', 'CategoryID', $Discussion->CategoryID).'">'.$Discussion->Category.'</a>
			</li>
			';
		}
		$DiscussionList .= '<li class="DiscussionStarted">
			<span><a href="'.GetUrl($this->Context->Configuration, 'comments.php', '', 'DiscussionID', $Discussion->DiscussionID, '', '#Item_1', CleanupString($Discussion->Name).'/').'">'.$this->Context->GetDefinition('StartedBy').'</a> </span><a href="'.GetUrl($this->Context->Configuration, 'account.php', '', 'u', $Discussion->AuthUserID).'">'.$Discussion->AuthUsername.'</a>
		</li>
		<li class="DiscussionComments">
			<span>'.$this->Context->GetDefinition('Comments').' </span>'.$Discussion->CountComments.'
		</li>
		<li class="DiscussionLastComment">
			<span><a href="'.$LastUrl.'">'.$this->Context->GetDefinition('LastCommentBy').'</a> </span><a href="'.GetUrl($this->Context->Configuration, 'account.php', '', 'u', $Discussion->LastUserID).'">'.$Discussion->LastUsername.'</a>
		</li>
		<li class="DiscussionActive">
			<span><a href="'.$LastUrl.'">'.$this->Context->GetDefinition('LastActive').'</a> </span>'.TimeDiff($this->Context, $Discussion->DateLastActive,mktime()).'
		</li>';
		if ($this->Context->Session->UserID > 0) {
				$DiscussionList .= '
			<li class="DiscussionNew">
				<a href="'.$NewUrl.'"><span>'.$this->Context->GetDefinition('NewCaps').' </span>'.$Discussion->NewComments.'</a>
			</li>
			';
		}

	$this->CallDelegate('PostDiscussionOptionsRender');

$DiscussionList .= '</div></ul>
</li>';
$this->CallDelegate('PostDiscussionRender');
?>

Then in your stylesheet you have 2 new classes to define; DiscussionTitleContainer and DiscussionInfoContainer. So you would want something like:

.DiscussionTitleContainer { background-color:#fff8c6; }
.DiscussionInfoContainer { background-color:#d2d2d2; }
.DiscussionTitleContainer li span { color:#000;text-transform:uppercase; }
.DiscussionInfoContainer li span { color:#afafaf; }

in your stylesheet

trash · October 2008

it works, thanks

but why the padding (f.e. padding:3px;) doesnt work for those elements? want some space between the typo and the bg-borders.

SubJunk · October 2008

So you have tried:

.DiscussionTitleContainer { background-color:#fff8c6;padding:3px; }
.DiscussionInfoContainer { background-color:#d2d2d2;padding:3px; }
.DiscussionTitleContainer li span { color:#000;text-transform:uppercase;padding:3px; }
.DiscussionInfoContainer li span { color:#afafaf;padding:3px; }

and no padding is added?

trash · October 2008

no, its like:

http://h4xr.org/yenh

trash · November 2008

ok. got it