Advertisement:

Author Topic: Alternating rows background  (Read 34703 times)

Offline Radianation

  • Sophist Member
  • *****
  • Posts: 1,269
  • Gender: Male
  • Why not believe in me?
Alternating rows background
« on: August 28, 2004, 03:23:22 AM »
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?).

Code: [Select]
/* 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!
« Last Edit: October 30, 2004, 02:43:24 PM by A.M.A »

Offline andrea

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,324
  • Gender: Female
  • I'm a smiley.
    • Smiley Sets
Re: Alternate rows question / split from Style.CSS
« Reply #1 on: August 28, 2004, 03:52:18 AM »
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



Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Alternate rows question / split from Style.CSS
« Reply #2 on: August 28, 2004, 04:17:51 AM »
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]

Offline Radianation

  • Sophist Member
  • *****
  • Posts: 1,269
  • Gender: Male
  • Why not believe in me?
Re: Alternate rows question / split from Style.CSS
« Reply #3 on: August 28, 2004, 05:01:11 AM »
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
« Last Edit: August 28, 2004, 05:12:13 AM by Radianation »

Offline andrea

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,324
  • Gender: Female
  • I'm a smiley.
    • Smiley Sets
Re: Alternate rows question / split from Style.CSS
« Reply #4 on: August 28, 2004, 05:13:10 AM »
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



Offline Radianation

  • Sophist Member
  • *****
  • Posts: 1,269
  • Gender: Male
  • Why not believe in me?
Re: Alternate rows question / split from Style.CSS
« Reply #5 on: August 28, 2004, 06:04:52 AM »
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?

Code: [Select]
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

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,102
  • Gender: Male
Re: Alternate rows question / split from Style.CSS
« Reply #6 on: August 28, 2004, 06:37:20 AM »
Sorry, I said Display, didn't I?  I meant MessageIndex.

Find:
Code: [Select]
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:
Code: [Select]
$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]

Offline Radianation

  • Sophist Member
  • *****
  • Posts: 1,269
  • Gender: Male
  • Why not believe in me?
Re: Alternate rows question / split from Style.CSS
« Reply #7 on: August 28, 2004, 10:55:10 PM »
That did it. Thanks.  :)

Offline mystik

  • Semi-Newbie
  • *
  • Posts: 59
Re: Alternating rows background
« Reply #8 on: February 22, 2005, 09:45:06 PM »
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)

Offline Radianation

  • Sophist Member
  • *****
  • Posts: 1,269
  • Gender: Male
  • Why not believe in me?
Re: Alternating rows background
« Reply #9 on: February 22, 2005, 11:50:40 PM »
Huh? I've not noticed this problem. Are you sure you did it right? What exactly do you mean by last post icon?

Offline wildcard

  • Semi-Newbie
  • *
  • Posts: 61
Re: Alternating rows background
« Reply #10 on: July 02, 2005, 11:39:14 PM »
What would need to be changed to accomplish this with the board index as well?  Thanks.

Offline parcley

  • Newbie
  • *
  • Posts: 7
Re: Alternating rows background
« Reply #11 on: April 11, 2006, 06:34:28 PM »
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)
« Last Edit: April 12, 2006, 03:14:17 AM by parcley »

Offline parcley

  • Newbie
  • *
  • Posts: 7
Re: Alternating rows background
« Reply #12 on: April 13, 2006, 10:38:00 AM »
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...

Offline geezmo

  • Full Member
  • ***
  • Posts: 439
Re: Alternating rows background
« Reply #13 on: April 16, 2006, 03:08:35 AM »
Does this work with 1.1RC2?

And are there any sample forums using this?

Thanks.

Offline parcley

  • Newbie
  • *
  • Posts: 7
Re: Alternating rows background
« Reply #14 on: April 24, 2006, 11:55:59 PM »
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
« Last Edit: April 25, 2006, 12:08:40 AM by parcley »

Offline geezmo

  • Full Member
  • ***
  • Posts: 439
Re: Alternating rows background
« Reply #15 on: April 25, 2006, 03:21:05 AM »
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! :)

Offline geezmo

  • Full Member
  • ***
  • Posts: 439
Re: Alternating rows background
« Reply #16 on: April 25, 2006, 08:38:04 AM »
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?

Offline parcley

  • Newbie
  • *
  • Posts: 7
Re: Alternating rows background
« Reply #17 on: April 25, 2006, 10:47:06 AM »
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.

Offline geezmo

  • Full Member
  • ***
  • Posts: 439
Re: Alternating rows background
« Reply #18 on: April 25, 2006, 11:23:19 AM »
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.

Offline parcley

  • Newbie
  • *
  • Posts: 7
Re: Alternating rows background
« Reply #19 on: April 25, 2006, 11:32:46 AM »
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    

Quote
foreach ($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


   
Quote
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>
               <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
« Last Edit: April 25, 2006, 11:54:14 AM by parcley »