News:

Wondering if this will always be free?  See why free is better.

Main Menu

Alternating rows background

Started by NoRad, August 28, 2004, 03:23:22 AM

Previous topic - Next topic

NoRad

When inside of a specific category the alternating background colors are in the <TD> tags. I want to make this alternating rows instead (inside the <TR> tags?).


/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
color: #000000;
background-color: #E1E1E1;
}
.windowbg2
{
color: #000000;
background-color: #F0F0F0;
}


Specifically that section.

What file(s) do I need to edit? Thanks!

andrea

I splitted this question into an own new topic. Please always start new topics for new questions (only post in other topics if they deal with precisely the same issue).

Andrea Hubacher
Ex Lead Support Specialist
www.simplemachines.org

Personal Signature:
Most recent work:
10 Aqua Themes for SMF



[Unknown]

You mean, the listing of topics in a board are listed one way, and you want them to be shown row by row as one color?

This you will have to do in the Display template, not in the css.

-[Unknown]

NoRad

#3
Right now the colors alternate on the columns and I want them to alternate on the rows. It's easier to read that way (imo).

I've tried modifying display template and switching the class from <td> to the <tr> but I get no noticeable difference on my forum, even after a refresh. Hmm

andrea

Have a look into the file "Display.template.php" how the colors are altered for the post display. The color alternates there each post btw. windowbg and windowbg2.

Then apply the same method to the file "MessageIndex.template.php" to the display of the message overview.

Andrea Hubacher
Ex Lead Support Specialist
www.simplemachines.org

Personal Signature:
Most recent work:
10 Aqua Themes for SMF



NoRad

Hmmm. I tried to modify several things without luck. All it's doing now is changing the entire area to dark grey. I think I might have some variables wrong in the command?


class="', $message['alternate'] == 0 ? 'windowbg' : 'windowbg2', '"


I tried replaceing td class="windowbg" with that, and also tried applying things to the <tr> before that, but no luck. Hmm

[Unknown]

Sorry, I said Display, didn't I?  I meant MessageIndex.

Find:
foreach ($context['topics'] as $topic)
{
echo '
<tr>
<td class="windowbg2" valign="middle" align="center" width="5%">
<img src="', $settings['images_url'], '/topic/', $topic['class'], '.gif" alt="" />
</td>
<td class="windowbg2" valign="middle" align="center" width="4%">
<img src="', $settings['images_url'], '/post/', $topic['first_post']['icon'], '.gif" alt="" />
</td>
<td class="windowbg" valign="middle">
', $topic['first_post']['link'];

// Is this topic new? (assuming they are logged in!)
if ($topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['id'], '.from', $topic['newtime'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';

echo '
<span class="smalltext">', $topic['pages'], '</span>
</td>
<td class="windowbg2" valign="middle" width="14%">
', $topic['first_post']['member']['link'], '
</td>
<td class="windowbg" valign="middle" width="4%" align="center">
', $topic['replies'], '
</td>
<td class="windowbg" valign="middle" width="4%" align="center">
', $topic['views'], '
</td>
<td class="windowbg2" valign="middle" width="22%"><span class="smalltext">
', $topic['last_post']['time'], '<br />
', $txt[525], ' ', $topic['last_post']['member']['link'], '
</span></td>';


Replace:
$alternate = true;
foreach ($context['topics'] as $topic)
{
echo '
<tr class="', $alternate ? 'windowbg' : 'windowbg2', '">
<td valign="middle" align="center" width="5%">
<img src="', $settings['images_url'], '/topic/', $topic['class'], '.gif" alt="" />
</td>
<td valign="middle" align="center" width="4%">
<img src="', $settings['images_url'], '/post/', $topic['first_post']['icon'], '.gif" alt="" />
</td>
<td valign="middle">
', $topic['first_post']['link'];

// Is this topic new? (assuming they are logged in!)
if ($topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['id'], '.from', $topic['newtime'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';

echo '
<span class="smalltext">', $topic['pages'], '</span>
</td>
<td valign="middle" width="14%">
', $topic['first_post']['member']['link'], '
</td>
<td valign="middle" width="4%" align="center">
', $topic['replies'], '
</td>
<td valign="middle" width="4%" align="center">
', $topic['views'], '
</td>
<td valign="middle" width="22%"><span class="smalltext">
', $topic['last_post']['time'], '<br />
', $txt[525], ' ', $topic['last_post']['member']['link'], '
</span></td>';

$alternate = !$alternate;


-[Unknown]

NoRad


mystik

users of this tip careful....i just did this and it chopped the LAST POST ICON code....i guess its in the new version of SMF...


u will have to put it back manually 8)

NoRad

Huh? I've not noticed this problem. Are you sure you did it right? What exactly do you mean by last post icon?

wildcard

What would need to be changed to accomplish this with the board index as well?  Thanks.

parcley

#11
could some one please tell me how to do this with 1.1 RC2?

there is a bunch of lines about sticky posts that aren't addressed by this solution?

thanks (in advance)

parcley

bueller...?


I don't want to be annoying, but after a very short time of using smf- i've decided that it's the best forum software out there.

I'm dying to use it on my site, however, the alternating colors are very important to me, and I would say almost essential; simply to make the post page less "busy".

The frustrating part for me is that i know that this can't be that difficult and i could do this if I had a basic knowledge of php- which i do not have. 


Again, thanks for taking the time to read this post.

Thanks for whatever help you can offer.

developers- thanks for an amazing product...

geezmo

Does this work with 1.1RC2?

And are there any sample forums using this?

Thanks.

parcley

#14
i actually got it to work with trail and error (i know nothing of php) using the old mod listed above.

hxxp:www.evernorth.net [nonactive]

i only modded message index and board index of the default theme

Message Index Template
Quote
      $alternate = false;
      foreach ($context['boards'] as $board)
      {
         echo '
         <tr class="', $alternate ? 'windowbg' : 'windowbg2', '">
            <td width="6%" align="center" valign="top"><a href="', $scripturl, '?action=unread;board=', $board['id'], '.0">';
      $alternate = !$alternate;

Board Index Template
Quote
              $alternate = false;
         foreach ($category['boards'] as $board)
         {
         $alternate = !$alternate;            
            echo '
         <tr class="windowbg', $alternate ? '2' : '', '">
            <td ' , !empty($board['children']) ? 'rowspan="2"' : '' , ' width="6%" align="center" valign="top"><a href="', $scripturl, '?action=unread;board=', $board['id'], '.0">';

            // If the board is new, show a strong indicator.
            if ($board['new'])
               echo '<img src="', $settings['images_url'], '/on.gif" alt="', $txt[333], '" title="', $txt[333], '" />';
            // This board doesn't have new posts, but its children do.
            elseif ($board['children_new'])
               echo '<img src="', $settings['images_url'], '/on2.gif" alt="', $txt[333], '" title="', $txt[333], '" />';
            // No new posts at all! The agony!!
            else
               echo '<img src="', $settings['images_url'], '/off.gif" alt="', $txt[334], '" title="', $txt[334], '" />';

            echo '</a>
            </td>
            <td class="2">
               <b><a href="', $board['href'], '" name="b', $board['id'], '">', $board['name'], '</a></b><br />
                  ', $board['description'];

it might be sloppy but it worked


on an unrelated note...the software is the best i have seen and used...the options and ease of use put it in a class by itself- far removed from its so called peers...i'm blown away.

thanks for the outstanding work

geezmo

cool! i'll wait for some more comments about this code, then i'll implement it in my forum. thanks and congrats on the good work, parcley! :)

geezmo

Hi parcley, your code worked for me. Thanks! But I wonder if this can be tweaked a little so the category index/category thread list and list of unread posts can have alternating backgrounds as well?

parcley

here you go- there's two different spots on this file that need to be modded so i'm going to put both pieces

Recent Template

Quote$alternate = false;
   foreach ($context['topics'] as $topic)
   {
      // Do we want to seperate the sticky and lock status out?
      if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'sticky') !== false)
         $topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_sticky'));
      if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'locked') !== false)
         $topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_locked'));

      echo '
            <tr class="', $alternate ? 'windowbg' : 'windowbg2', '">
               <td valign="middle" align="center" width="6%">
                  <img src="' . $settings['images_url'] . '/topic/' . $topic['class'] . '.gif" alt="" />
               </td><td valign="middle" align="center" width="4%">
                  <img src="' . $topic['first_post']['icon_url'] . '" alt="" align="middle" />
               </td><td ' , $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '3' : '' , '" width="48%" valign="middle">' , $topic['is_locked'] && !empty($settings['seperate_sticky_lock']) ? '
                  <img src="' . $settings['images_url'] . '/icons/quick_lock.gif" align="right" alt="" style="margin: 0;" />' : '' , $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '
                  <img src="' . $settings['images_url'] . '/icons/show_sticky.gif" align="right" alt="" style="margin: 0;" />' : '', $topic['first_post']['link'], ' <a href="', $topic['new_href'], '"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" /></a> <span class="smalltext">', $topic['pages'], ' ', $txt['smf88'], ' ', $topic['board']['link'], '</span></td>
               <td valign="middle" width="14%">
                  ', $topic['first_post']['member']['link'], '</td>
               <td valign="middle" width="4%" align="center">
                  ', $topic['replies'], '</td>
               <td valign="middle" width="4%" align="center">
                  ', $topic['views'], '</td>
               <td valign="middle" width="22%">
                  <a href="', $topic['last_post']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" style="float: right;" /></a>
                  <span class="smalltext">
                     ', $topic['last_post']['time'], '<br />
                     ', $txt[525], ' ', $topic['last_post']['member']['link'], '
                  </span>
               </td>
            </tr>';
                  $alternate = !$alternate;
   }






further down the same file
Quote$alternate = false;
   foreach ($context['topics'] as $topic)
   {
      // Seperate lock and sticky again?
      if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'sticky') !== false)
         $topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_sticky'));
      if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'locked') !== false)
         $topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_locked'));

      echo '
            <tr class="', $alternate ? 'windowbg' : 'windowbg2', '">
               <td valign="middle" align="center" width="6%">
                  <img src="', $settings['images_url'], '/topic/', $topic['class'], '.gif" alt="" /></td>
               <td valign="middle" align="center" width="4%">
                  <img src="', $topic['first_post']['icon_url'], '" alt="" align="middle" /></td>
               <td ', $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '3' : '' , '" width="48%" valign="middle">
                  ' , $topic['is_locked'] && !empty($settings['seperate_sticky_lock']) ? '<img src="' . $settings['images_url'] . '/icons/quick_lock.gif" align="right" alt="" style="margin: 0;" />' : '' , '
                  ' , $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '<img src="' . $settings['images_url'] . '/icons/show_sticky.gif" align="right" alt="" style="margin: 0;" />' : '', ' ', $topic['first_post']['link'], ' <a href="', $topic['new_href'], '"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" /></a> <span class="smalltext">', $topic['pages'], '
                  ', $txt['smf88'], ' ', $topic['board']['link'], '</span></td>
               <td valign="middle" width="14%">
                  ', $topic['first_post']['member']['link'], '</td>
               <td valign="middle" width="4%" align="center">
                  ', $topic['replies'], '</td>
               <td valign="middle" width="4%" align="center">
                  ', $topic['views'], '</td>
               <td valign="middle" width="22%">
                  <a href="', $topic['last_post']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" style="float: right;" /></a>
                  <span class="smalltext">
                        ', $topic['last_post']['time'], '<br />
                        ', $txt[525], ' ', $topic['last_post']['member']['link'], '
                  </span>
               </td>
            </tr>';
                  $alternate = !$alternate;
   }



basically the mod is easy to do... just add the alternate=false (or true depending on what color you want to be the first color) before the "foreach" (i'd call these things what they are but i have no idea- i only know what they do)

then replace the <tr> with <tr class="', $alternate ? 'windowbg' : 'windowbg2', '"> this is just to tell it what two styles to alternate between (i suppose you don't need windowbg and windowbg2- you could tell it what ever style you wanted)

then delete the references to styles within the block of code that you want alternating all the <td class="windowbg"- however make sure that you don't delete the single quotation mark
Quote<td class="windowbg' , $topic['is_sticky'] becomes <td ', $topic['is_sticky']
[/i]

then tell it to alternate with $alternate = !$alternate;


if this is super confusing...i apologize- as i said before- i know nothing of php.

geezmo

recent template would be which file? index.template.php? messageindex.tenmplate.php? etc?

also, please tell me the code in the original file that will be replaced. above, you just mentioned the replacement code but i don't know which codes the former will replace.

parcley

#19
recent.template.php

the only line you replace is the <tr> with the

Quote<tr class="', $alternate ? 'windowbg' : 'windowbg2', '">

everything else is just added. the original mod had you replacing blocks of code but since RC2 is different you can't just replace code. instead, you have to add the lines:

Quote$alternate = true;

and the

Quote$alternate = !$alternate;

between these two lines is where you delete the class="blah" references.


This is the first block of code to change    

Quoteforeach ($context['posts'] as $post)
   {
      // This is far from ideal, but oh well - create buttons for the post.
      $button_set = array();

      if ($post['can_delete'])
         $button_set['delete'] = array('text' => 31, 'image' => 'delete.gif', 'lang' => true, 'custom' => 'onclick="return confirm(\'' . $txt[154] . '?\');"', 'url' => $scripturl . '?action=recent;delete=' . $post['id'] . ';sesc=' . $context['session_id']);
      if ($post['can_reply'])
      {
         $button_set['reply'] = array('text' => 146, 'image' => 'reply_sm.gif', 'lang' => true, 'url' => $scripturl . '?action=post;topic=' . $post['topic'] . '.' . $post['start']);
         $button_set['quote'] = array('text' => 145, 'image' => 'quote.gif', 'lang' => true, 'url' => $scripturl . '?action=post;topic=' . $post['topic'] . '.' . $post['start'] . ';quote=' . $post['id'] . ';sesc=' . $context['session_id']);
      }
      if ($post['can_mark_notify'])
         $button_set['notify'] = array('text' => 131, 'image' => 'notify_sm.gif', 'lang' => true, 'url' => $scripturl . '?action=notify;topic=' . $post['topic'] . '.' . $post['start']);

      echo '
      <table width="100%" cellpadding="4" cellspacing="1" border="0" class="bordercolor">
            <tr class="titlebg2">
                  <td class="middletext">
                        <div style="float: left; width: 3ex;">&nbsp;', $post['counter'], '&nbsp;</div>
                        <div style="float: left;">&nbsp;', $post['category']['link'], ' / ', $post['board']['link'], ' / <b>', $post['link'], '</b></div>
                        <div align="right">&nbsp;', $txt[30], ': ', $post['time'], '&nbsp;</div>
                  </td>
            </tr>
            <tr>
                  <td class="catbg" colspan="3">
                     <span class="middletext"> ', $txt[109], ' ' . $post['first_poster']['link'] . ' - ' . $txt[22] . ' ' . $txt[525] . ' ' . $post['poster']['link'] . ' </span>
                  </td>
            </tr>
            <tr>
                  <td class="windowbg2" colspan="3" valign="top" height="80">
                        <div class="post">' . $post['message'] . '</div>
                  </td>
            </tr>';


this is the second block of code to change


   
Quoteforeach ($context['topics'] as $topic)
   {
      // Seperate lock and sticky again?
      if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'sticky') !== false)
         $topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_sticky'));
      if (!empty($settings['seperate_sticky_lock']) && strpos($topic['class'], 'locked') !== false)
         $topic['class'] = substr($topic['class'], 0, strrpos($topic['class'], '_locked'));

      echo '
            <tr>
               <td class="windowbg2" valign="middle" align="center" width="6%">
                  <img src="', $settings['images_url'], '/topic/', $topic['class'], '.gif" alt="" /></td>
               <td class="windowbg2" valign="middle" align="center" width="4%">
                  <img src="', $topic['first_post']['icon_url'], '" alt="" align="middle" /></td>
               <td class="windowbg', $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '3' : '' , '" width="48%" valign="middle">
                  ' , $topic['is_locked'] && !empty($settings['seperate_sticky_lock']) ? '<img src="' . $settings['images_url'] . '/icons/quick_lock.gif" align="right" alt="" style="margin: 0;" />' : '' , '
                  ' , $topic['is_sticky'] && !empty($settings['seperate_sticky_lock']) ? '<img src="' . $settings['images_url'] . '/icons/show_sticky.gif" align="right" alt="" style="margin: 0;" />' : '', ' ', $topic['first_post']['link'], ' <a href="', $topic['new_href'], '"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" /></a> <span class="smalltext">', $topic['pages'], '
                  ', $txt['smf88'], ' ', $topic['board']['link'], '</span></td>
               <td class="windowbg2" valign="middle" width="14%">
                  ', $topic['first_post']['member']['link'], '</td>
               <td class="windowbg" valign="middle" width="4%" align="center">
                  ', $topic['replies'], '</td>
               <td class="windowbg" valign="middle" width="4%" align="center">
                  ', $topic['views'], '</td>
               <td class="windowbg2" valign="middle" width="22%">
                  <a href="', $topic['last_post']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" style="float: right;" /></a>
                  <span class="smalltext">
                        ', $topic['last_post']['time'], '<br />
                        ', $txt[525], ' ', $topic['last_post']['member']['link'], '
                  </span>
               </td>
            </tr>';
   }

again this is on the default theme- but i'm sure it's not dissimilar to others.

if you're still confused- let me know...i have no problem trying to clarify

Advertisement: