Pretty date and comments bars in sNews CMS
filed under: sNews CMS / Hacks & Mods
At the request of one of my readers, I will do my best to explain this little hack for sNews CMS to move the date and comments from the standard "infoline" location below the article to the top, and format them with pretty icons.
So let's get started by backing up your snews.php file and hacking on a copy.
We want the date & comments to go between the article title (if there is one) and the actual article text, so find the function articles, now locate the following code;
if ($r['displaytitle'] == 'YES') {
if (!$_ID) {
echo '<h2 class="big">'.$link.$uri.'/'.$r['asef'].'/">'.$title.'</a></h2>';
} else {
echo '<h2>'.$title.'</h2>';
}
}
and insert the following code below it;
if ($infoline == true) {
echo '<div class="post_date">'.$a_date_format.'</div>';
if ($r['commentable'] == 'YES' || $r['commentable'] == 'FREEZ') { //let's show the comments bar only if comments are enabled or frozen
echo '<div class="post_comments">'.$link.$uri.'/'.$r['asef'].'/#'.l('comment').'1">'.l('comments').' ('.$comments_num.')</a></div>';
}
echo '<br class="clearer" />';
}
OK, that code adds the date and comment divs up top below the title and before the main article text, so now let's remove the calls from the infoline below the articles, unless you want the old style date and comments below as well. Find and following and comment out (don't delete any lines of code, we want to keep things for future reference or to return to original) as highlighted below;
switch (true) {
case ($tag == 'date'):
//echo $a_date_format;
break;
case ($tag == 'readmore' && strlen($r['text']) > $shorten):
echo $link.$uri.'/'.$r['asef'].'/">'.l('read_more').'</a> ';
break;
case ($tag == 'comments' && ($commentable == 'YES' || $commentable == 'FREEZ')):
//echo $link.$uri.'/'.$r['asef'].'/#'.l('comment').'1">
//'.l('comments').' ('.$comments_num.')</a> ';
break;
case ($tag == 'edit' && _ADMIN):
echo ' '.$edit_link;
break;
case ($tag != 'readmore' && $tag != 'comments' && $tag != 'edit'):
echo $tag;
break;
}
Now find the next switch statement below it and comment out as follows;
switch ($tag) {
case 'date':
//echo $a_date_format;
break;
case 'readmore':
case 'comments': ;
break;
case 'edit':
if (_ADMIN) {
echo ' '.$edit_link;
}
break;
default:
echo $tag;
}
That should do it for the code in the snews.php file. Now we need to add the appropriate styles to your stylesheet so the divs don't stack on each other and look hideous. You can use whatever images you like, these are the two I use (from pinvoke)... 
... save them to your public_html/images folder, and then add these styles to your stylesheet;
.post_date {
float: left;
width: 49%;
color: #444;
height: 16px;
margin: 10px 0;
padding-left: 20px;
background-image: url('../images/date.png');
background-repeat: no-repeat;
background-position: center left;
}
.post_comments {
float: right;
width: 49%;
color: #444;
height: 16px;
margin: 10px 0;
padding-right: 20px;
text-align: right;
background-image: url('../images/comment.png');
background-repeat: no-repeat;
background-position: center right;
}
.clearer {
clear: both;
}
As always, feel free to change the styles to suit your specific needs, and don't hesitate to let me know if there's anything missing or if you get any errors.
54 comments
Add a new comment »Categories
Recent Entries
Recent Comments
- Redbeard (I managed to get Vampire: The Masquerade - Bloodlines ...)
- Tina (Installed this today and working like a charm :) Thanks!)
- Tina (Thanks for this great mod :) Working on my site for quite a ...)
- konga (Hi Matt, if you plan to update it, please have a look into ...)
- David (Yo Matt, I have a problem, when I use this mod. ...)
- Dave (Have a Toshiba NB305. Win7 starter would not do screen ...)
- Daichisan (Howdy Matt, I dont really get it, whats ...)
- Matt (Mine is just customized further, that's all :) It just spits ...)
- Matt (David, Do you own or admin the server? Do you have exec ...)
Popular Entries
- Compact archives for sNews 1.7 (5/5)
- Light-weight related articles mod for sNews 1.7 (4.78/5)
- SEF / SEO search for your sNews website (4.75/5)
- 1024x600 netbook wallpapers of Evangeline Lilly (4.67/5)
- An improved tag cloud for sNews 1.7 (4.67/5)
- Gravatar mod for sNews 1.7 (4.67/5)
- Image / math hybrid captcha version 2, vastly improved (4.64/5)
- Related Articles mod for sNews CMS, public beta release (4.6/5)
- An easy mod to create custom break titles for your sNews articles (4.6/5)
Dec 29th, 2008 at 3:24 pm
Thank you!!! .. you are cool.. i'll try your steps tomorrow ~ been busy today.
Jan 6th, 2009 at 3:24 pm
It works!! ... i put it just below the 'read more' link. and i even add readmore icon .. thanks a loads.
Jan 6th, 2009 at 3:48 pm
lol, awesome man, you're welcome
Jan 28th, 2009 at 5:01 pm
thank you very much!
PP
Feb 12th, 2009 at 1:05 am
Howdee Matt?
Just a little question: how can I add category's name before the date?
Feb 12th, 2009 at 6:22 am
Hi Sven,
To show the category the article is in, you simply need to echo the $r['name'] variable before the date in the second line of new code, like this;
to make the category a clickable link, you,'ll want to do it like this;
Feb 12th, 2009 at 8:48 am
Me again Matt.
I put my real first name since I just noticed there was another Sven posting on your blog. How another is possible?:-D
I'm gonna try your Mod since I got some issues with another one.
Thanks for your help. I really appreciate.
1 yellow star has been delivered.
Feb 12th, 2009 at 10:15 am
Sorry it's me again.
I've dropped the css and the sNews file to my website.
There's a slight issue:
when on the blog home page the h2 clickable title drive to the page and it becomes a non-clickable h1.
There I can't make the clickable category's name being displayed.
Where's my falut?
This is the code I use (I hope it won't screw up the post)
if ($r['displaytitle'] == 'YES') {
if (!$_ID) {
///// Byline mod
echo ''.$link.$uri.'/'.$r['asef'].'/">'.$title.'';
//echo ''.$link.$uri.'/'.$r['asef'].'/">'.$title.'';
} else {
echo ''.$title.'';
}
## Byline Mod /////////////////////
if ($infoline == true) {
echo ''.$link.$uri.'/">'.$r['name'].''.$rname.'';
echo ''.$a_date_format.'';
if ($r['commentable'] == 'YES' || $r['commentable'] == 'FREEZ') { //let's show the comments bar only if comments are enabled or frozen
echo ''.$link.$uri.'/'.$r['asef'].'/#'.l('comment').'1">'.l('comments').' ('.$comments_num.')';
}
echo '';
}
///////////////////// Byline mod ends
///////////////////////////////////
Feb 12th, 2009 at 11:36 am
Not your fault, it's that the category name isn't being selected on all the queries, silly me, I had assumed otherwise, you can make the following changes;
// article or page, id as indentifier $query_articles = 'SELECT a.id AS aid,title,a.seftitle AS asef,a.category AS acat,a.keywords_meta AS keywords,text,a.date, a.displaytitle,a.displayinfo,a.commentable,a.visible, c.name AS name FROM '._PRE.'articles'.' AS a LEFT OUTER JOIN '._PRE.'categories'.' as c ON category = c.id WHERE a.id ='.$_ID.$visible;then on the other query,
// get the rows for category if ($_catID) { $query_articles = 'SELECT a.id AS aid,title,a.seftitle AS asef,text,a.date,a.keywords_meta AS keywords, a.displaytitle,a.displayinfo,a.commentable,a.visible,c.name AS name FROM '._PRE.'articles'.' AS a LEFT OUTER JOIN '._PRE.'categories'.' as c ON category = c.id WHERE position = 1Feb 12th, 2009 at 11:39 am
Found it! Sorry to be so dumb
Feb 12th, 2009 at 11:54 am
If you're thinking of using the $_XNAME variable, that won't always work either. I just spent about 20 minutes looking into it, you definitely want to add the category name selection to the mysql queries in the articles function.
Feb 13th, 2009 at 1:49 am
Is that last piece of code workin on your side?
On mine it displays the category articles instead of the article itself.:-D
That code is almost working:
///// Byline mod
echo ''.$link.$uri.'/'.$r['asef'].'/">'.$title.'';
//echo ''.$link.$uri.'/'.$r['asef'].'/">'.$title.'';
} else {
echo ''.$title.'';
}
## Byline Mod /////////////////////
if ($infoline == true) {
echo 'Bafouillé dans : '.$rname.''.$link.$uri.'/">'.$r['name'].'';
echo 'Bafouillé le : '.$a_date_format.'';
if ($r['commentable'] == 'YES' || $r['commentable'] == 'FREEZ') { //let's show the comments bar only if comments are enabled or frozen
echo ''.$link.$uri.'/'.$r['asef'].'/#'.l('comment').'1">'.l('comments').' ('.$comments_num.')';
}
echo '';
}
I say almost since the category link isn't displayed when on the article page.
(see: http://carnet.hiseo.fr/blog-en-vrac/la-solution-pour-lanonymat-sur-le-web/)
I think it is usefull for visitors to have access to the category when reading an article. For pagination pages OMHO it has no interest to be displayed.
What's your opinion?
Feb 13th, 2009 at 7:09 am
Hmm, this is puzzling, if you look at the source of my page, I have the div/category link in a comment right before the date.
The reason it's not working on your site is the r[name] variable isn't being set in all the mysql queries, so that code above should do it, but you're saying when you add it, it shows you the category page instead. If you look at your article page source, you'll see the link is actually there, but not the name, so we have to figure out exactly why your query isn't working right after you update the code above.
Can you use the contact form and email me the code you're using for the first two instances of $query_articles? I'll run them on my server and see if we can figure out why it's not working.
Feb 13th, 2009 at 8:28 am
My fault!
When we join the category table we now have two "id" fields, so we need to add the alias "a" (to tell it to match the article table id) in front of the id on that first query.
I have highlighted the change in the comment above.
i.e.
should be
WHERE a.id ='.$_ID.$visible;Feb 21st, 2009 at 12:53 am
Wonderful, thanks.
Do you plan to release your Ajax search mod? Sorry if you already did and I missed it.
Feb 21st, 2009 at 8:18 am
Hi Mark,
The ajax search autocomplete I'm using isn't really sNews specific, and it's not dynamic at this point. It's working off a hard list of keywords & phrases
I'm still a bit of a jquery/ajax newbie right now, but I'm learning and hope to get something working with sNews at some point, I want to use jquery's plug-in too so you can keydown through the list, etc
Check out the demos on this page
http://docs.jquery.com/Plugins/Autocomplete
Apr 25th, 2009 at 9:10 am
Yet another usefull mod, gotta love your site mdj.
After adding this mod, I got curious, and wanted to add name and date to the comment,, a bit like you have:
asundrus said on Apr 25th, 2009 @ 2:45 am
blah blah
where my default sNews would just show:
blah blah
asundrus
I did search for this, but couldn't find any solution, although i'm pretty sure it's a simple mod.
Apr 25th, 2009 at 6:44 pm
Asundrus, there's a switch statement within the function comment that handles all of that output. To modify the order and layout, there's this bit of code towards the beginning of your snews.php.
// INFO LINE TAGS (readmore, comments, date) $tags = array( 'infoline' => '<p class="date">,readmore,comments,date,edit,</p>', 'comments' => '<p class="meta">,name, '.l('on').' ,date,edit,</p>,<p class="comment">,comment,</p>' );the "comments" bit is the part you'll want to edit.
Hope that helps.
Apr 25th, 2009 at 11:07 pm
@asundrus if i m you i would like to add time in comment after nick name so nick name can be "sole"..Like adding BR tag to split date from nick name....That is looks better and easy to see nick name too... :)
@Matt i buy new pc laptop gatawey and big 24' screan also gatawey....I m back in bussiness but i need time to build my new site...Also im going to help Rui with his new cms ......
Apr 25th, 2009 at 11:11 pm
@Matt what MOD you use to make your style ADMIN diferent color??? Did you use 1.7 or 1.6 snews? Thx bro...
Apr 26th, 2009 at 7:59 am
Hi Sasha, I'm using 1.7. What I do is wrap each comment in a separate div, and then when I go to start it, I check the email field from the gravatar mod, if it matches the admin email, I just assign a different class, does that make sense?
if ($email == s('website_email')) { echo '<div class="admincomment">'; } else { echo '<div class="comment">'; }Maybe I'll try a write-up on it sometime if there's interest.
Apr 28th, 2009 at 8:47 am
@Matt, thanks for the hint, and @Sasha good point, will try that.
Regarding the admin comment style, it's really nifty, but what happens if someone uses the admins name?
or is there some code or something, which could prevent this, like checking names say, you use the name admin, and visitors are not allowed to use that name, and if they try, they will get an error of some sort.
Apr 28th, 2009 at 12:14 pm
Asundrus, sort of, it's not the name, but the email field that's used to match.
What I do to prevent anyone from doing that is simply change the email address if it's not the admin, i.e
if (!_ADMIN && $email == s('website_email')) { $email = "fakeadmin@fake.com"; }Stick that right above the SQL INSERT statement in the function comment and if someone tries to spoof the admin email, it'll change the email to fakeadmin@fake.com. The only problem it doesn't solve is if you change the website email, old admin comments won't show different unless you update the email as well in the DB, easy enough to do by hand really :)
Apr 28th, 2009 at 1:39 pm
Hi again.
Sorry for continuing "off-topic" but I really like this admin comment, but maybe iv'e been looking at snews.php to much today, cause all I got so far, is the part to insert before the SQL INSERT, where would I add:
if ($email == s('website_email')) {
echo '';
} else {
echo '';
}
and I guess I need a mod to make use of email, or?
i'm sorry if i'm asking stupid question, but i'm eager to learn.
Apr 28th, 2009 at 1:43 pm
Sorry for doublepost, but I guess I need the gravatar mod, for use of email?
Apr 28th, 2009 at 1:46 pm
Hi asundrus, yes, you have to use the gravatar mod to use emails in the comment forms, you need this to identity the admin/non-admin, otherwise you really don't have anything unique to base a comment poster on.
Plus gravatars look cool :P
http://mdj.us/snews-cms/hacks-mods/gravatar-mod-for-snews-17/
as for adding in the email check code, inside the function comment, there is an SQL INSERT statement that looks something like this;
$query = "INSERT INTO "._PRE."comments(articleid, name, email, url, comment, time, approved, ip) VALUES('$post_article_id', '$name', '$email', '$url', '$comment', '$time', '$approved', '$userip')"; mysql_query($query);just stick the code above that bit
Apr 28th, 2009 at 2:12 pm
Nifty, it's working, now I just need to add the admincomment styling, and i'll stop my off-topic, but i'm just kinda psyked about this hehe.
Apr 28th, 2009 at 8:35 pm
Hi Matt thx for fast reply :)...I m going to try that comment styling but for now i m too busy to make my web site...I created some picture also and thx to Rui my site is online again...I host my site on Rui server for now....Your site looks great and i like your MOD work..That is awesome...keep up good work Matt....
Apr 28th, 2009 at 9:26 pm
I got it working, or I should say my mate and I got it working, it's his site we are using these mods for, we only had a few silly errors with the styling, but it looks nice now.
Thanks again Matt for your help, maybe I should get my friend to post here instead, as it's his site, and i'm just the one with most sparetime and hi's the one doing all the work hehe.
Apr 28th, 2009 at 9:41 pm
Hey
Just wanted to say thanks for the help Matt, asundrus should have told me about this site long ago, but i've been busy so I didn't have time to look around untill now.
Apr 29th, 2009 at 6:55 am
No problem guys, one of these days I'll do a proper tutorial on the admin comment styling.
So many ideas, so little time!
May 7th, 2009 at 10:01 pm
@ #6| Matt said on Feb 12th, 2009 @ 6:22 am
Thanks for showing me the link over at snews's forum
I just added the tip from you comment, and it's just working perfectly, so simple yet sp usefull.
May 8th, 2009 at 2:08 pm
Back again, it shows the category in the article, but if you click on comments, the category link disappears, and I did ad the code from #9
May 8th, 2009 at 2:45 pm
slemborg, are you sure you added everything, including the "c.name AS name" bit? you have to scroll to the right a little to see it, but it's highlighted there.
Once you do that, it should be selected into the $r['name'] variable if the category exists.
Double check that bit and let me know, it's been a while since I did this code and I may be missing something else.
May 8th, 2009 at 4:01 pm
Thanks for the reply, I will double check as soon as i'm done eating, coding makes me hungry heheh..
May 8th, 2009 at 4:10 pm
Couldn't wait to test, it works now, and yes, I didn't scroll to the right, I was missing a small part of the code.
Aug 3rd, 2009 at 7:04 am
The stylesheet didn't work for me with the Clean template.
It was fine though when I removed "width: 49%" from .post_date.
Aug 3rd, 2009 at 7:07 am
Hmmm, not sure why that is Michael, but if it's working for you now, then I suppose all is good :)
Nice site BTW!
Nov 13th, 2009 at 3:27 am
Ah ah... me again Ringo.
Another thought : another idea maybe ? What about having a reply link in the comment box. Then when a visitor post a comment and another reply to the comment, his comment is styled diffrently?
Nov 13th, 2009 at 6:58 am
Damn Sven, I like it!
That shouldn't be too hard to make a reply link, use javascript to insert the original comment with a [quote] tag or something, then modify the comment function to display quote inside a html blockquote.
Nov 13th, 2009 at 9:02 am
Hmmm, OK, there's a couple different ways to go with this;
1) a simple "reply to comment #" at the top of the comment
2) add a parent field to the comments table and then nest replies below the original comment, this would require a recursive query though, and I don't think it's worth it.
I need to think on this for a bit.
Nov 13th, 2009 at 9:47 am
Oh oh... and this recursive query may slow down the page?
BTW, Paul (aka Poppoll) sent me a link yesterday to ajaxify the comments box. - http://net.tutsplus.com/videos/screencasts/learn-how-to-ajaxify-comment-forms/
I'm goin to watch it and maybe work on it.
Nov 13th, 2009 at 10:01 am
Yeah, the recursive querying is too expensive to make it worth it, IMO. It should be really simple to add a button to insert [reply @ Sven, comment #42], or something similar, maybe link back to the original post, I think that's probably the cleanest way to handle it.
Adding some Ajax to the comments/commentform should be pretty easy using JQuery, are you just looking at adding animations, or are you looking at posting the comment and having it added on the same page?
Nov 15th, 2009 at 5:26 am
"are you looking at posting the comment and having it added on the same page?"
Yeap that's it.
I saw the demo yesterday and found it really great.
When I have time I'gonna try to make it as an Add-on.
Hopefully a downloadable package is available. Look @ the code.
I think it's do-able.
Have a nice day Matt.
Nov 16th, 2009 at 7:14 am
I think the best way to do the comments Ajax form would be to create a separate PHP file to perform all the comment submitting-related functions, then simply call that with Ajax, basically like my polls mod. It wouldn't be that hard, but you'll need to know enough PHP and javascript.
I may have a look some time, however, I'm in the middle of some major sNews hacking here on my own site right now, and I hope to launch a refreshed looking site soon.
Nov 16th, 2009 at 5:27 pm
Thanks, just what I needed.
Nov 17th, 2009 at 10:23 am
Ah ah... a new version?
I can't wait!
About the ajaxiffied comments, I've tried yesterday evening.
The guy is really clever: the online demo is really usefull.
I could make it works easily, but in stand alone.
Then to make it work with sNews it fails... sigh.
A little question regarding the code you post (PHP).
How can you avoid being parsed?
Despite and tags I got my HTML pieces of code parsed.
Nov 17th, 2009 at 12:53 pm
Yeah, I'm cleaning up tons of code, both inside my snews.php, as well as simplifying the design, getting rid of a few components, but primarily I've written a big chunk of code that displays the articles as lists, much cleaner than the [break] way, at least the way I wanted it.
As for not displaying the HTML, you need to use html entities, particularly the left and right arrow brackets, i.e., use
in the source and it will display as
in the page
Nov 18th, 2009 at 10:32 am
I've done that too:
$conditional = '
prints:
$conditional = '
Does this go with:
>
> if ($user === 'Sven') {
> do_something_buggy();
> }
>
:-D
Nov 18th, 2009 at 11:25 am
Sven, try wrapping it in <pre>PRE</pre> or this <code>CODE</code> tags?