Title means, hehe... that this "mod" or whatever makes it possible to style the "namebox" and the numbers of post to appear differently depending on if the post is odd or even. Talking about this:
http://p-ahlqvist.com/site-snews/redesign-in-progress/#Comment1 . Now, this is my "test" comments made in order to try my idea, might change as the development of the site goes on... (if it ever
)
Ok, now I'm not sure this qualify as a MOD, but I post it here and we can move it to more appropriate place if found out to be something else....
Mika's MOD:
http://www.ni5ni6.com/snews-mods/comments-area-styling-and-visuals/ Follow this first, so that you have the right "gofromplace". You do need to get that in order to be able to style it, now won't ya
You see a bit down the mod that you need to change the info line in snews.php... It's the first function after all variables:
$tags['comments'] = '<div class="comment_div,style,">,<p class="number">,counter,</p>,<p class="top">,name, wrote this on ,date,edit,</p>,<p class="bottom">,comment,</p>,<br style="clear: both;" /></div>';
Instead of all these p tags, I changed a couple of them to divs, the
p class="number" became
DIV class="number"... the
p class="top" became
DIV class="top" and finally
p class="bottom" became
DIV class="bottom"... Now go see to that it looks like this: (the whole function tags() )
// INFO LINE TAGS (readmore, comments, date)
function tags($tag) {
$tags = array(); $tags['infoline'] = '<p class="date">,readmore,comments,date,edit,</p>';
$tags['comments'] = '<div class="comment_div,style,">,<div class="number">,counter,</div>,<div class="top,topbox,">,name, skrev kommentar ,date,edit,</div>,<div class="bottom">,comment,</div>,<br style="clear: both;" /></div>';
return $tags[$tag];
}
Now that is done, we've established what will show, now we need to show it. A bit down in function comment() you'll find this line:
foreach ($tag as $tag) {
switch (true) {
...
Directly after this case: (that effects the whole comment_div)
case ($tag == 'style'): echo $commentNum %2 == 0 ? ' border_even' : ' border_odd'; break;
You add the case which will effect only the top part (the one containing the name, date, and edit links)
//Odd-even topbox styling
case ($tag == 'topbox'): echo $commentNum %2== 0 ? ' top_even' : ' top_odd'; break;
Those top_even, top_odd are the classes I call for the topbox to style differently depending on odd or even count of post... we'll come to the actual styling later. Now, if you followed Mikas tut you will have the following line as the case for "number":
case ($tag == 'counter'):
echo '<a name="'.l('comment').$commentNum.'" title="'.l('comment').' '.$commentNum.'">'.$commentNum.'</a> '; break;
Now this need to change if you want the numbers to have the possibility to change according to odd even state, swap the above Mika code for (Thanks Mika for tutoring and "professorship" that lead me to do this
):
/ /Odd even number styling in comments
case ($tag == 'counter'):
$my_style = $commentNum %2== 0 ? ' num_even' : ' num_odd'; echo '<a name="'.l('comment').$commentNum.'" title="'.l('comment').' '.$commentNum.'" class="'.$my_style.'">'.$commentNum.'</a>'; break;
So, now we're there again... the num_even, num_odd are the classes I call to make the numbers differ depending on if it's odd or even post.
that was the "namebox" and "numbers" the bottom part I don't go change since it's within the comment_div and change with that (border_odd, border_even).
Now we need to do some styling... And in this example I'll just copy Mika's basic CSS style for this:
.comment_div {background: #f8f8fa; color: #808080; padding: 0; margin: 0; border-top: 1px solid #ccc; font-size: 90%;}
.comment_div p {margin: 0 .5em; padding: 0;}
p.top, p.bottom q {font-style: italic;}
p.top {text-align: right;}
p.bottom q {margin: 1em; padding: .3em; background: #fff; border-left: 3px solid #e0e0e0; display: block;}
p.bottom {margin-top: .5em; color: #000;}
p.bottom:first-letter {margin-left: .5em; text-transform: uppercase;}
p.bottom:first-letter, .number a {font-weight: 900;}
.number a {float: left; margin-top: .2em; padding: .3em 0; font-size: 250%; color: #e0e0e0; border: 1px solid #fff;}
And add the added div's styling, first the top, and the classes that style it depending on odd or even:
.top{position:relative;float:left;margin:-2em 0 0em -1em;padding:0.5em 1em 0.5em 1em;border:1px solid #ddd;}
.top_odd{background:#EDECDA}
.top_even{background:#E6E6B3}
Second: the bottom, we need to place the bottom div somewhere don't we:
.bottom{clear:both;float:left;margin:0em 1em 1em 1em;width:90%;}
third, the number (here you need to remove Mika's whole
.number a line and swap it for this):
.number {clear:both;float:right; margin: 0em 0.8em 0 0; padding: .3em 0;width:20px; }
.num_even {font-size: 200%;color:#E6E6B3;}
.num_odd {font-size:200%;color:#EDECDA;}
.num_even:hover, .num_odd:hover {color:#ddd;}
Now, we're done... One thing though... hehe... this might look like crap as this is the basic tutorial CSS styling with added div's and classes from me, so you might wanna go over the style once more to add your personal touch to it...
So, well...Ok... Cheerio, Ms Sophie
