PhpBB3 BBCodes

Database and Demo for phpBB3 BBCodes, Mods and Smilies
https://phpbb3bbcodes.com/

Show/hide content on index page

https://phpbb3bbcodes.com/viewtopic.php?t=467

Page 1 of 2

Show/hide content on index page

Posted: 25 Mar 2010, 14:28
by 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]

Re: Show/hide content on index page

Posted: 25 Mar 2010, 14:30
by 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

Re: Show/hide content on index page

Posted: 25 Jul 2010, 07:00
by Daniel
Very nice, Is it possable to set it as a cookie so that what the user chose will remain that way?

Re: Show/hide content on index page

Posted: 29 Jul 2010, 23:52
by 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

Re: Show/hide content on index page

Posted: 29 Jul 2010, 23:53
by Inner Circle
look two posts above and click on the "show" button

Re: Show/hide content on index page

Posted: 01 Aug 2010, 05:38
by kevinviet
I try to added image code above but the picture come out not in right place so I give up :D
Anyway, thanks Inner Circle

Re: Show/hide content on index page

Posted: 01 Aug 2010, 10:53
by Steve
got a link coz it works fine ;)

Re: Show/hide content on index page

Posted: 12 Aug 2010, 01:00
by 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

Re: Show/hide content on index page

Posted: 12 Aug 2010, 12:06
by Steve
Is your style prosilver or subsilver2 based?

Re: Show/hide content on index page

Posted: 12 Aug 2010, 12:57
by apnaitaly
Steve© » 12 Aug 2010, 12:06 wrote:Is your style prosilver or subsilver2 based?

My style is prosilver Base

THanks
All times are UTC+02:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited