Cutenews Layouts

OK, so you've installed your cutenews and you've created your account information, but when you post your news, something ugly appears that so did not look like those flashy ones on the big sites. So what do you do? You ready this tutorial of course :P

Cutenews layouts are really simple to create. All you need is a sound grasp of table codes and you're sweet. So how to make a layout that looks like this?

Five new graphics added today!
Posted by: Jen
Posted on: 14th December 2056
Category: Graphics
Comments: 3 Comments
Ok, I got all hyped up when I drank some coffee this morning and since I don't have anything important to do today I added:
  • One user lookup
  • Two guild layouts plus matching logos
  • One website layout *gasp*
  • One shop layout
And who says caffeine was bad for people? *twitches*

Lol, Kathrin's going to be adding a surprise tomorrow so be on the lookout for that. Until then, this is Jen signing off!

The latest and greatest news from Neo-Reality

This was made to fit the table/iframe layout template we provided, so if you want to make it bigger or smaller, you'll need to change the width of the table and the table cells. Why is that? News will stretch the layout and the first table tag is so far away from the resulting news cell that the primary width tag no longer functions. That's why width has to be applied to all the table cells.

But back to the actual coding above, this is what it looks like:

<center><table width="370" border="1" bordercolor="#000000" cellspacing="0" cellpadding="2"> <tr><td bgcolor="#CC99CC" colspan="2"> <center><b>{title}</b></center> </td></tr> <tr><td width="100" rowspan="4"><center>{avatar}</center></td> <td width="270" height="25" bgcolor="#EED2EE"> <b>Posted by:</b> {author} </td></tr> <tr><td width="270" height="25" bgcolor="#ECC8EC"> <b>Posted on:</b> {date} </td></tr> <tr><td width="270" height="25" bgcolor="#EED2EE"> <b>Category:</b> {category} </td></tr> <tr><td width="270" height="25" bgcolor="#ECC8EC"> <b>Comments:</b> [com-link]{comments-num}[/com-link] Comments </td></tr> <tr><td colspan="2" bgcolor="#FFFFFF" width="370"> {short-story} </td></tr> <tr><td bgcolor="#CC99CC" colspan="2"> <center><b>The latest and greatest news from MY SITE</b></center> </td></tr> </table> <p>

A bit hard to decode through all the table tags but in order to actually modify your color scheme, you have to understand what each tag stands for. The opening table tag is simple enough, it tells you that you want a certain height, and you want it to be centered etc, But then you have the first table cell. That is the top cell where the title goes, hence the {title} inserted in the center of the cell. You can change the color of that top cell by changing the hex code of the bgcolor.

Then comes the cell with the avatar. The avatar will only show up if you actually put and avatar URL when you add news. If you doesn't have a space for you to insert an avatar when you're adding news, go to Options >> System Configurations >> News >> Use Avatars - Yes. If you're the kind of person who wants to use only one avatar to say who you are, then go to Options >> Personal Options >> Default Avatar URL. For this particular tutorial, the avatar is sized at 100x100.

The are 4 cells, one below the other that comes after the avatar tag. These are the so-called "information tags" that allow people to archive your news properly. Do not remove the {date} or {author} tags, they are important for affiliation and copyrighting because you have an exact date of updates rather than a rough time-frame, which will not prove that someone stole your layout or that you updated yesterday. The {category} tag is not necessary, but it's there to help people differentiate posts quickly. You need to create categories in order for them to show up. You have no idea how many sites I've been to where the category is blank. To create a category, go to Options >> Edit Categories. Categories will appear as check boxes when you add news.

The importance of comments is debatable. For a site that has a very active chat box, the comments par is not really necessary. But I personally think it's good because you get specific feedback for each post rather a disarray of random comments to surf through.

The next cell is the one for your actual news post. You have to put in {short-story} otherwise it won't show up properly. Whatever you do, do NOT put in the full story because then all you would see is a blank box. When you add news, you will be adding it directly to the short story section, so you don't need to even think about the full story.

And the last cell is just a bit of fun to balance out the top title cell. I think it would be nice to add something funny or sweet for your visitors to read, or you can just type out your site address, your choice.

To actually get this to show up on your show_news.php page, copy the above code and go to Options >> Edit Templates >> Active News and paste into the box (delete everything already in there and replace it with the new code). Remember to edit the color scheme to your liking so that it matches your layout, wouldn't want a purple news box when your layout is about snow, now would we?

To get it so that the text isn't in a big Times New Roman gray font, just add some CSS tags to the Active News box along with the cutenews layout so that it everything matches perfectly.

You may not redistribute the coding above and/or claim it as your own. You MUST credit Neo-Reality for the template on your index or credits page where it is VISIBLE. Credit must include a link back or Neo-Reality's address typed out in full.

Do note that this cutenews layout was created for my table layout and if you're not using that layout, you may have to change a few aspects of the table's size, mainly it's width. If you have trouble with table codes, please read over an HTML tutorial before attempting this layout.

~Jen