Tidying My Headlines Template [Archive] - Vivvo CMS Support Forums

View Full Version : Tidying My Headlines Template

Elton

02-03-2007, 10:51 AM

I'm rubbish at web designing (I'm okay at managing sites, just rubbish at designing them LOL) and could do with some help.

I want to include a 300x250 ad block in my headlines. I've done this, but it looks a bit naff.

http://www.anglersnet.co.uk/

What I'd like to do is have the text below the image (I think). Can anyone tell me what I need to amend to achieve this? I'll paste the code below.

Also, any other tips for making that bit a bit neater would be appreciated.

Thanks in advance,

Elton


<div id="headline_created" class="plainTxtGray" style="border-bottom: 1px solid #999999;"> {CREATED} </div>
<table cellpadding="0" cellspacing="0"width="100%" class="headlineBox">
<tr>
<td colspan="2"><h2 id="headline_caption">{CAPTION_TITLE}</h2></td>
</tr>
<tr>
<td valign="top" width="150" height="170">
<img id="headline_image" src="{ROOT}files/{IMAGE}" align="left" border="0" alt="image" /></td>
<td valign="top" height="170">
<span id="headline_author" class="plainTxtGray">{AUTHOR} </span>
<div id="headline_body" class="headlineTxt" align="justify">{BODY}</div>
</td>
<td valign="top" height="300"><table width="300" height="250" border="1" cellspacing="0" bordercolor="#EEEEEE" style="border-collapse: collapse" cellpadding="0"><tr bordercolor="#999999" bgcolor="#BFD2C8">
<td height="18" colspan="2" nowrap class="largertext"><div align="center"><strong><font color="#004000" size="2" face="Tahoma, Arial"><a href="http://www.tacklebargains.co.uk/cgi-bin/at.cgi?a=232715&e=/discount_fishing_tackle.htm"><font color="#004000">Discount Fishing Tackle</font></a> Offers from <a href="http://www.tacklebargains.co.uk/cgi-bin/at.cgi?a=232715" target="external"><font color="#004000">Tacklebargains</font></a></font></strong></div></td></tr><tr><td width="33%" height="205"><div align="center"><script src="http://www.tacklebargains.co.uk/randomimage.js"></script><script>SetAffiliate("432029");this.document.write(TextList[NumArray[0]]);</script></div></td><td height="205" width="33%"><div align="center"><script>this.document.write(TextList[NumArray[1]] );</script></div></td></tr><tr><td width="33%" height="205"><div align="center"><script>this.document.write(TextList[NumArray[3]]);</script></div></td><td height="205" width="33%"><div align="center"><script>this.document.write(TextList[NumArray[4]] );</script></div></td></tr></table>

</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" class="player">
<tr>
<td valign="top"><a href="#" onclick='change_headline(2); return false;' ><img src="{ROOT}/img/back.gif" border="0" id="back" align="left" alt="back" /></a>
<a href="#" onclick='change_headline(1); return false;' id="pauza" ><img src="{ROOT}/img/pause.gif" border="0" id="pause" align="left" alt="pause" /></a>
<a onclick='change_headline(3); return false;' href="#"><img src="{ROOT}/img/forward.gif" border="0" id="forward" align="left" alt="forward" /></a></td>
<td colspan="2" align="left" class="category_link_depth3"><strong><a id="headline_link" href="{LINK}">Full Story</a> » </strong></td>
</tr>
</table>

Micha

02-03-2007, 03:48 PM

Well it all depends on what you want to achieve :)
If this is the code that is currently on your site (because the text there is bellow the image as you wanted), I've sorted it out a little bit, and cut the unnecessary code out :)
Hope it helps :)


<div id="headline_created" class="plainTxtGray" style="border-bottom: 1px solid #999999;"> {CREATED} </div>
<table cellpadding="0" cellspacing="0"width="100%" class="headlineBox">
<tr>
<td colspan="5"><h2 id="headline_caption">{CAPTION_TITLE}</h2></td>
</tr>
<tr>
<td valign="top" width="150"><img id="headline_image" src="{ROOT}files/{IMAGE}" align="left" border="0" alt="image" /></td>
<td width="5"></td>
<td valign="top">
<span id="headline_author" class="plainTxtGray">{AUTHOR} </span>
<div id="headline_body" class="headlineTxt" align="justify">{BODY}</div>
</td>
<td width="5"></td>
<td valign="top" width="300">
<table width="300" height="250" bgcolor="CCCCCC" cellspacing="2" cellpadding="0">
<tr bgcolor="#BFD2C8">
<td height="18" colspan="2" nowrap class="largertext" align="center">
<strong><font color="#004000" size="2" face="Tahoma, Arial"><a href="http://www.tacklebargains.co.uk/cgi-bin/at.cgi?a=232715&e=/discount_fishing_tackle.htm"><font color="#004000">Discount Fishing Tackle</font></a>
Offers from
<a href="http://www.tacklebargains.co.uk/cgi-bin/at.cgi?a=232715" target="external"><font color="#004000">Tacklebargains</font></a></font>
</strong>
</td>
</tr>
<tr>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script src="http://www.tacklebargains.co.uk/randomimage.js"></script><script>SetAffiliate("432029");this.document.write(TextList[NumArray[0]]);</script></td>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script>this.document.write(TextList[NumArray[1]] );</script></td>
</tr>
<tr>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script>this.document.write(TextList[NumArray[3]]);</script></td>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script>this.document.write(TextList[NumArray[4]] );</script></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" class="player">
<tr>
<td valign="top"><a href="#" onclick='change_headline(2); return false;' ><img src="{ROOT}/img/back.gif" border="0" id="back" align="left" alt="back" /></a>
<a href="#" onclick='change_headline(1); return false;' id="pauza" ><img src="{ROOT}/img/pause.gif" border="0" id="pause" align="left" alt="pause" /></a>
<a onclick='change_headline(3); return false;' href="#"><img src="{ROOT}/img/forward.gif" border="0" id="forward" align="left" alt="forward" /></a>
</td>
<td colspan="2" align="left" class="category_link_depth3"><strong><a id="headline_link" href="{LINK}">Full Story</a> » </strong></td>
</tr>
</table>

Elton

02-05-2007, 03:06 PM

Thanks, Micha. I'll give that a go when I get back home.

The text isn't currently below the image, though - it's ton the right of it:

http://www.anglersnet.co.uk

Elton

02-05-2007, 04:53 PM

Hmmmmm....that didn't work :(

Just in case we'e talking at cross-purposes, it's the Vivvo headline text that I want to appear under the headline image.

vnbet

02-05-2007, 07:08 PM

Help Templates http://www.anglersnet.co.uk :confused:
http://www.vnbet.net/vivo

:confused: Latest News
http://www.vnbet.net/upfile/photo/img/17b68a4150ba3c16a79936a7515da7eb/tset.jpg
:confused:
thanks

Micha

02-06-2007, 07:39 AM

Just in case we'e talking at cross-purposes, it's the Vivvo headline text that I want to appear under the headline image.

Heh, sorry, I thought you were talking about the right side thumbs :o

Anyways here is the code with the text bellow the headlines image:


<div id="headline_created" class="plainTxtGray" style="border-bottom: 1px solid #999999;"> {CREATED} </div>
<table cellpadding="0" cellspacing="0"width="100%" class="headlineBox">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0"width="100%">
<tr>
<td colspan="5"><h2 id="headline_caption">{CAPTION_TITLE}</h2></td>
</tr>
<tr>
<td valign="top"><img id="headline_image" src="{ROOT}files/{IMAGE}" align="left" border="0" alt="image" /></td>
</tr>
<tr>
<td valign="top">
<span id="headline_author" class="plainTxtGray">{AUTHOR} </span>
<div id="headline_body" class="headlineTxt" align="justify">{BODY}</div>
</td>
</tr>
</table>
<td>
<table width="300" height="250" bgcolor="CCCCCC" cellspacing="2" cellpadding="0">
<tr bgcolor="#BFD2C8">
<td height="18" colspan="2" nowrap class="largertext" align="center">
<strong><font color="#004000" size="2" face="Tahoma, Arial"><a href="http://www.tacklebargains.co.uk/cgi-bin/at.cgi?a=232715&e=/discount_fishing_tackle.htm"><font color="#004000">Discount Fishing Tackle</font></a>
Offers from
<a href="http://www.tacklebargains.co.uk/cgi-bin/at.cgi?a=232715" target="external"><font color="#004000">Tacklebargains</font></a></font>
</strong>
</td>
</tr>
<tr>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script src="http://www.tacklebargains.co.uk/randomimage.js"></script><script>SetAffiliate("432029");this.document.write(TextList[NumArray[0]]);</script></td>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script>this.document.write(TextList[NumArray[1]] );</script></td>
</tr>
<tr>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script>this.document.write(TextList[NumArray[3]]);</script></td>
<td bgcolor="#eeeeee" width="50%" height="205" align="center" valign="top"><script>this.document.write(TextList[NumArray[4]] );</script></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" class="player">
<tr>
<td valign="top"><a href="#" onclick='change_headline(2); return false;' ><img src="{ROOT}/img/back.gif" border="0" id="back" align="left" alt="back" /></a>
<a href="#" onclick='change_headline(1); return false;' id="pauza" ><img src="{ROOT}/img/pause.gif" border="0" id="pause" align="left" alt="pause" /></a>
<a onclick='change_headline(3); return false;' href="#"><img src="{ROOT}/img/forward.gif" border="0" id="forward" align="left" alt="forward" /></a>
</td>
<td colspan="2" align="left" class="category_link_depth3"><strong><a id="headline_link" href="{LINK}">Full Story</a> » </strong></td>
</tr>
</table>


Cheers :)

Micha

02-06-2007, 07:50 AM

@vnbet:

If you want your latest news to appear in two columns like on the image go to your Vivvo administration >> Control Panel >> Preferences >> Home page, and under "Latest News" block you can set number of columns for "Latest News" section.

Elton

02-07-2007, 11:47 AM

Thanks, Micha. That's a lot better. I just want to move that Full Story over a bit now :)

Is there a way of making the text format in the article summaries in headlines and article_Short.tpl files? A few people have commented that it looks a bit odd as it is.

Cheers,

Elton

Micha

02-07-2007, 05:11 PM

Do you want the “Full Story” link on the same line as it is now, or you want it right after the headline summary text?

As for changing the text format, for headlines you can edit this class .headlineTxt in your templates/style.css file.
To format article short text style is a bit more complicated because it uses the same class .plainTxt that appears on various parts of Vivvo.
You can do next, in your templates/style.css file make a new class, for example:

.plainTxtShort {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #999999;
}

Then you open you article_Short.tpl and just rename the class of the containing div from <div class="plainTxt"> to <div class="plainTxtShort">

That should do the trick, now it all depends on how would you want it to look like :)

Elton

02-08-2007, 08:28 AM

Do you want the “Full Story” link on the same line as it is now, or you want it right after the headline summary text?

Hi Micha,

I'd like it just below the summary text, if possible :)

Thanks for the other tip - I'll give that a try later.

Best wishes,

Elton

Micha

02-09-2007, 08:54 AM

Right after this line:

<div id="headline_body" class="headlineTxt" align="justify">{BODY}</div>

try adding:

<div class="category_link_depth3" align="right"><strong><a id="headline_link" href="{LINK}">Full Story</a> » </strong></div>

This should do it, then just remove the <td> that contains the Full story link (I think it’s somewhere around line 48 at the bottom of the template).

Elton

03-10-2007, 08:15 AM

Thanks, Micha. Finally got round to doing some work on my own site today and that worked a treat :)

Micha

03-10-2007, 10:33 AM

You're welcome :)