Show/hide content on index page

[Steve]

Idea taken from a spoiler html code!

prosilver
open styles/prosilver/template/index_body.html
[spoiler]Find:

Code: Select all

			{S_LOGIN_REDIRECT}
		</fieldset>
	</form>
<!-- ENDIF -->

Add after:

Code: Select all

<br />
<div class="panel bg3">
	<div class="inner"><span class="corners-top"><span></span></span>
		<input class="button2" type="submit" value="Show {L_WHO_IS_ONLINE}" style="margin: 5px;"  onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide {L_WHO_IS_ONLINE}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show {L_WHO_IS_ONLINE}'; }" /></div><div class="quotecontent"><div style="display: none;">	

Find:

Code: Select all

	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->

Add after:

Code: Select all

</div></div>
<span class="corners-bottom"><span></span></span></div>

Find:

Code: Select all

<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
	<h3>{L_BIRTHDAYS}</h3>

Add before:

Code: Select all

<div class="panel bg1">
	<div class="inner"><span class="corners-top"><span></span></span>
		<input class="button2" type="submit" value="Show {L_FORUM} {L_STATISTICS}" style="margin: 5px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide {L_FORUM} {L_STATISTICS}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show {L_FORUM} {L_STATISTICS}'; }" /></div><div class="quotecontent"><div style="display: none;">	

Find:

Code: Select all

	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->

Add after:

Code: Select all

</div></div>
<span class="corners-bottom"><span></span></span></div>

[/spoiler]
[hsimg]http://www.djsimg.com/images/58973968_0 ... _index.png[/hsimg][hsimg]http://www.djsimg.com/images/25323583_0 ... panded.png[/hsimg]
subsilver2
open styles/subsilver2/template/index_body.html
[spoiler]Find:

Code: Select all

<!-- IF S_DISPLAY_ONLINE_LIST -->
	<br clear="all" />

Add after:

Code: Select all

<div><div class="content">
<input class="btnlite" type="button" value="Show {L_WHO_IS_ONLINE}" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide {L_WHO_IS_ONLINE}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show {L_WHO_IS_ONLINE}'; }" />
</div><div class="quotecontent"><div style="display: none;">	
	

Find:

Code: Select all

			<td class="row1"><b class="gensmall">{L_LEGEND} :: {LEGEND}</b></td>
		</tr>
	<!-- ENDIF -->
	</table>

Add after:

Code: Select all

	</div></div></div>

Find:

Code: Select all

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
	<br clear="all" />

Add after:

Code: Select all

<div><div class="content">
<input class="btnlite" type="button" value="Show {L_FORUM} {L_STATISTICS}" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide {L_FORUM} {L_STATISTICS}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show {L_FORUM} {L_STATISTICS}'; }" />
</div><div class="quotecontent"><div style="display: none;">	
	

Find:

Code: Select all

	<td class="row1" width="100%" valign="middle"><p class="genmed">{TOTAL_POSTS} | {TOTAL_TOPICS} | {TOTAL_USERS} | {NEWEST_USER}</p></td>
</tr>
</table>

Add after:

Code: Select all

</div></div></div>

[/spoiler]
[hsimg]http://www.djsimg.com/images/92306507_0 ... footer.png[/hsimg]
[hsimg]http://www.djsimg.com/images/53579649_0 ... footer.png[/hsimg]

[Steve]

lets add some nice images for prosilver only!

open prosilver/template/index_body.html
replacement edits for the edits in 1st post,

[spoiler]Find:

Code: Select all

<div class="panel bg3">

Replace with:

Code: Select all

    <div class="panel bg3" style="background-image:url({T_THEME_PATH}/images/whois.png); background-repeat:no-repeat;background-position: top center">

Find:

Code: Select all

<div class="panel bg1">

Replace with:

Code: Select all

   <div class="panel bg1" style="background-image:url({T_THEME_PATH}/images/stats.png); background-repeat:no-repeat;background-position:top center">

[/spoiler]

images_sw.zip

Now upload these two images to prosilver/theme/images* ,refresh template
looks nice:

pro_+.PNG

[Daniel]

Very nice, Is it possable to set it as a cookie so that what the user chose will remain that way?

[kevinviet]

Hi Steve

I don't want to hide all the info but just want to add these images who is here and statistic just like this board, how do I add it ?

Thanks

[Inner Circle]

look two posts above and click on the "show" button

[kevinviet]

I try to added image code above but the picture come out not in right place so I give up
Anyway, thanks Inner Circle

[Steve]

got a link coz it works fine

[apnaitaly]

hey Steve first of all very nice Snippet , Thanks

i have add this Snippet on my forum but i am getting some problem

1.. its not showing me Rounded Corner
2,,,its showing me all usersname in Big Font ,,

here is my forum please take a look Thanks

[Steve]

Is your style prosilver or subsilver2 based?

[apnaitaly]

Is your style prosilver or subsilver2 based?

My style is prosilver Base

THanks