SSI Recent Topic Line BG Highlight

codnerd · November 29, 2012, 12:14:13 AM

I am wondering if I could add alternating highlight bg's behind the text, and still have it transparent.

How it is now, stock:

Example picture: (photoshopped, not perfect)

Code that I think needs to be edited:

Code Select

	echo '
		<table border="0" class="ssi_table">';
	foreach ($posts as $post)
		echo '
			<tr>
              
				<td valign="top">
					<a href="', $post['href'], '">', $post['subject'], '</a>
					', $txt['by'], ' ', $post['poster']['link'], '
					', !$post['is_new'] ? '' : '<a href="' . $scripturl . '?topic=' . $post['topic'] . '.msg' . $post['new_from'] . ';topicseen#new" rel="nofollow"><img src="' . $settings['lang_images_url'] . '/new.gif" alt="' . $txt['new'] . '" /></a>', '
				</td>

			</tr>';
	echo '
		</table>';

*Also, if you have any cool ideas to make it look better/stand out more, tell please.

MrPhil · November 29, 2012, 12:59:26 PM

1. Look at one of the SMF routines for listing posts. You can either keep count of the number of rows, and use modulo 2 arithmetic to select the class (probably for a full-width <div>) for odd and even rows, or just set a flag that you're on an even or odd row (initial odd, flip at the end of each row's output).

2. Normally this would be done with two classes with two different background colors, but if you want some transparency you'd have to set a background image with some translucency (.png would be best), for the two different classes for odd and even rows. The image can be as little as 1x1 px, so long as it's tiled (repeated in both x and y).

IchBin™ · November 29, 2012, 02:35:48 PM

Another option is to add some javascript to do this type of thing too. Jquery has this stuff built in if you'd like to look at it.

http://api.jquery.com/odd-selector/

codnerd · November 29, 2012, 07:40:24 PM

Would you be able to show me in code?
If not, it is ok.

Colin · November 29, 2012, 08:27:30 PM

JQuery is probably the easiest way to do it.

The link Ichbin sent you has a simple example.

Code Select


<!DOCTYPE html>
<html>
<head>
  <style>

  table {
    background:#f3f7f5;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>

    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>$("tr:odd").css("background-color", "#bbbbff");</script>

</body>
</html>

codnerd · November 29, 2012, 09:04:37 PM

How would I put/integrate that with the SSI?

IchBin™ · November 30, 2012, 10:34:19 AM

Right where the code echo's out the table in SSI.php you just add the code you need to add the javascript.

codnerd · November 30, 2012, 09:35:54 PM

Tried, but it did not integrate even close to right.

Normal Code:

Code Select


	echo '
		<table border="0" class="ssi_table">
    ';
	foreach ($posts as $post)
		echo '
			<tr>
              
				<td valign="top">
					<a href="', $post['href'], '">', $post['subject'], '</a>
					', $txt['by'], ' ', $post['poster']['link'], '
					', !$post['is_new'] ? '' : '<a href="' . $scripturl . '?topic=' . $post['topic'] . '.msg' . $post['new_from'] . ';topicseen#new" rel="nofollow"><img src="' . $settings['lang_images_url'] . '/new.gif" alt="' . $txt['new'] . '" /></a>', '
				</td>

			</tr>';
	echo '
		</table>';

Failed integrated code:

Code Select


	echo '
		<table border="0" class="ssi_table">
     <style>

  table {
    background:#f3f7f5;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>

    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>$("tr:odd").css("background-color", "#bbbbff");</script>';
	foreach ($posts as $post)
		echo '
			<tr>
              
				<td valign="top">
					<a href="', $post['href'], '">', $post['subject'], '</a>
					', $txt['by'], ' ', $post['poster']['link'], '
					', !$post['is_new'] ? '' : '<a href="' . $scripturl . '?topic=' . $post['topic'] . '.msg' . $post['new_from'] . ';topicseen#new" rel="nofollow"><img src="' . $settings['lang_images_url'] . '/new.gif" alt="' . $txt['new'] . '" /></a>', '
				</td>

			</tr>';

Joker™ · December 01, 2012, 03:30:04 PM

SSI.php (Make backup of file before editing)

Code (Find:) Select

echo '
		<table border="0" class="ssi_table">';
	foreach ($posts as $post)
		echo '
			<tr>
				<td align="right" valign="top" nowrap="nowrap">
					[', $post['board']['link'], ']
				</td>
				<td valign="top">
					<a href="', $post['href'], '">', $post['subject'], '</a>
					', $txt['by'], ' ', $post['poster']['link'], '
					', !$post['is_new'] ? '' : '<a href="' . $scripturl . '?topic=' . $post['topic'] . '.msg' . $post['new_from'] . ';topicseen#new" rel="nofollow"><img src="' . $settings['lang_images_url'] . '/new.gif" alt="' . $txt['new'] . '" /></a>', '
				</td>
				<td align="right" nowrap="nowrap">
					', $post['time'], '
				</td>
			</tr>';
	echo '
		</table>';

Code (add after:) Select

echo '<script>$("table.ssi_table tr:odd").css("background-color", "#bbbbff");</script>';

Moreover have you included jQuery? As you required to load it to make usage of its functions.

If you haven't loaded jQuery then you can load it in index.template.php of the theme you are using

Code (Find:) Select

// Here comes the JavaScript bits!

Code (Add before) Select

	echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
		if (typeof jQuery == \'undefined\') {
		document.write("<script type=\"text/javascript\" src=\"', $settings['default_theme_url'], '/scripts/jquery-1.8.3.min.js\"><\/script>");
	}';

- Download the jquery file form here
- Place it in themes/default/scripts

codnerd · December 01, 2012, 09:46:26 PM

Added it all in exactly as you showed, and hoped it would work.
Did not make a difference, and was not able to see a difference in the page source.

I don't think the line "<script>$("table.ssi_table tr:odd").css("background-color..." was called in the previous code so it did not take effect.
Please help.

Joker™ · December 01, 2012, 11:35:18 PM

Can you guide us with a link where recent posts from SSI.php has been shown.

codnerd · December 02, 2012, 12:44:56 AM

PM Sent.

Joker™ · December 04, 2012, 03:00:01 AM

It seems jQuery hasn't been loaded on the pages where you are trying to use it.

P.S - If you can, place your links in this topic as it might get you more help.

codnerd · December 09, 2012, 07:32:17 PM

It is still not working, but I now understand the code you had me put in to get it to work.
Any idea why the jquery is not being called?

Code added in SSI.php under recentTopics SSI:

Code Select

	echo '
		<table border="0" class="ssi_table">';
	foreach ($posts as $post)
		echo '
			<tr>
              
				<td valign="top">
					<a href="', $post['href'], '">', $post['subject'], '</a>
					', $txt['by'], ' ', $post['poster']['link'], '
					', !$post['is_new'] ? '' : '<a href="' . $scripturl . '?topic=' . $post['topic'] . '.msg' . $post['new_from'] . ';topicseen#new" rel="nofollow"><img src="' . $settings['lang_images_url'] . '/new.gif" alt="' . $txt['new'] . '" /></a>', '
				</td>

			</tr>';
	echo '
		</table>';
    
      echo '<script>$("table.ssi_table tr:odd").css("background-color", "#ffffff");</script>';
}

Code added in index.template.php in my custom theme:

Code Select

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
		if (typeof jQuery == \'undefined\') {
		document.write("<script type=\"text/javascript\" src=\"', $settings['default_theme_url'], 'scripts/jquery-1.8.3.min.js\"><\/script>

codnerd · December 09, 2012, 07:54:31 PM

Also, just to test I tried adding the following code in the w3 editor and it did not work.

Code Select

<!DOCTYPE html>
<html>
<body>

<table border="0" class="ssi_table">
<tr>
    <td>
        test
    </td>
</tr>
<tr>
    <td>
        test
    </td>
</tr>
<tr>
    <td>
        test
    </td>
</tr>
</table>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
		if (typeof jQuery == \'undefined\') {
		document.write("<script type=\"text/javascript\" src=\"', $settings['default_theme_url'], 'scripts/jquery-1.8.3.min.js\"><\/script>
<script>$("table.ssi_table tr:odd").css("background-color", "#000000");</script>

</body>
</html>

Joker™ · December 10, 2012, 03:44:48 AM

Code Select

<!DOCTYPE html>
<html>
<body>

<table border="0" class="ssi_table">
<tr>
    <td>
        test
    </td>
</tr>
<tr>
    <td>
        test
    </td>
</tr>
<tr>
    <td>
        test
    </td>
</tr>
</table>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
		if (typeof jQuery == 'undefined') {
		document.write('<script type=\"text/javascript\" src=\"', $settings['default_theme_url'], 'scripts/jquery-1.8.3.min.js\"><\/script>')
        }
    </script>
<script>$("table.ssi_table tr:odd").css("background-color", "#000000");</script>

</body>
</html>

Place this code in an html file and upload the file somewhere (test or live site), and see how this works.

codnerd · December 10, 2012, 09:02:42 PM

Thanks, worked great. Had this displayed on my portal, but was putting the java code in my SMF install.
Marking solved.

News:

SSI Recent Topic Line BG Highlight

MrPhil