Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Hide sidebar from Thread view. [IF]
Topic Started: Jun 19 2013, 01:42 PM (1,120 Views)
purplemix
Member
 *  
Hello!

Usually i've been able to find solutions about various coding problems by myself before, but this time I'm complete stuck with my issue:
The forum looks completey fine in the width with the sidebars aside, but when i enter to view a thread it screws up and get wider. Since I couldn't find out how to make the threads smaller without messing with the rest of the forum, my idea was to remove/hide the siderbars only when you view a thread.

Link to website: http://z13.invisionfree.com/Reunion_eu/index.php?
Link to view test thread: http://z13.invisionfree.com/Reunion_eu/index.php?showtopic=1&st=0&#last

I did find some javascript codes from peoples who had a similiar problem, but there isn't any "sidebar" codes in my css :S
Anyhow, i hope someone understood what I just wrote, and could give me a quick answer!

css:
Code:
 
html { overflow-x: auto; }

form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { position: absolute; font-family: Verdana; font-size: 10px; letter-spacing: 0.5px; color: #333333; margin:2.5% 2.5% 2.5% 31%; background-color:#FFffff; background-image: url(http://i858.photobucket.com/albums/ab144/purplemix/111_zpsa8e242aa.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: absolute; background-size: 62%; }
TABLE, TR, TD { font-family: Verdana; letter-spacing: 0.5px; font-size: 10px; color: #333333; }
a:link, a:visited, a:active { font-family: Verdana; font-size: 10px; text-transform: normal; text-decoration: none; color: #333333; }
a:hover { font-family: Verdana; font-size: 10px; text-transform: normal; text-decoration: none; color: #9d3329; transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-timing-function: ease; }

fieldset.search { background-color: #efefef; border: 2px solid #F7D4BE }
label { cursor:pointer; }

img.attach { border:2px outset #EEF2F7;padding:2px }

.googleroot { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#333333}

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#555 }
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#FFFFFF;background-color:#B3D1B2;padding:4px;margin:0px }

.warngood { color:green }
.warnbad { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { text-align: center; background-color: #B3D1B2; border-bottom: 5px solid #dadada ; color:#333333; font-weight:none;font-family:Times New Roman, Times, serif; font-size: 15px; text-transform: uppercase; padding: 0px 0px 0px 3px;margin-top:1px }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg { text-align:center; margin-top:15px }

#ucpmenu { width: 200px; background-color: #efefef}
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #efefef; border:0px;line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { background-color: #efefef; border-bottom: 2px solid #F7D4BE; padding:0px;margin:0px; }
#submenu { display:none; }
#submenu a:link, #submenu a:visited, #submenu a:active { display:none; }
#userlinks { opacity: 0.95; position:fixed; top: 0px; right: 0; width: auto; border-radius: 0px 0px 0px 15px; background-color: #efefef; border-bottom: 2px solid #dadada; padding-left:10px; }
#sub_dos { text-align: center; background-color: #7e7e7e; border-bottom: 5px solid #9d3329; color:#fff; font-weight:none;font-family:Century gothic; font-size: 15px; text-transform: uppercase; padding: 3px 3px 3px 3px;margin-top:1px; }
#sub_dos a:link, #submenu a:visited, #submenu a:active { text-align: center; background-color: #transparent; color:#fff; font-weight:none;font-family:Century gothic; font-size: 15px; text-transform: uppercase; padding: 0px 15px 0px 0px;margin-top:1px; }
#sub_dos a:visited { color:#fff;}
#sub_dos a:hover { text-align: center; background-color: #7e7e7e; border-bottom: 0px solid #009aa8; color:#9d3329; font-weight:none;font-family:Century gothic; font-size: 15px; text-transform: uppercase; padding: 0px 15px 0px 0px; margin-top:1px; transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-timing-function: ease; }

#navstrip { font-family: Verdana; font-size: 10px; text-transform: normal; text-decoration: none; color: #9d3329; transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-timing-function: ease; }

.activeuserstrip { background-color:#FFF2D1; padding:6px; }

.pformstrip { font-family: Verdana; font-size: 10px; text-transform: normal; font-weight:normal; text-decoration: none; color: #7e7e7e; padding: 3px; line-height: 100%; background-color: #dadada }
.pformleft { background-color: #efefef; padding:6px; margin-top:1px;width:25%; }
.pformleftw { background-color: #efefef; padding:6px; margin-top:1px;width:40%; }
.pformright { background-color: #efefef; padding:6px; margin-top:1px; }

.post1 { background-color: #efefef}
.post2 { background-color: #efefef}
.postlinksbar { text-align: right; background-color: #dadada ; color:#402410; font-weight:none;font-family:Times New Roman, Times, serif; font-size: 10px; text-transform: uppercase; padding: 0px 3px 0px 0px;margin-top:1px }

.row1 { background-color: #efefef; border: 2px solid #dadada }
.row2 { background-color: #efefef}
.row3 { background-color: #efefef}
.row4 { background-color: #efefef}

.darkrow1 { background-color: #e1e1e1; color:#333333; }
.darkrow2 { background-color: #dadada ; color:#333333; }
.darkrow3 { background-color: #dadada ; color:#333333; }

.hlight { background-color: #DFE6EF }
.dlight { background-color: #EEF2F7 }

.titlemedium { font-weight:normal; font-family: Verdana; font-size: 10px; text-transform: normal; text-decoration: none; color: #7e7e7e; padding: 3px; line-height: 100%; background-color: #dadada }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: none; color: #FFFFFF }

.maintitle { text-align: center; background-color: #7e7e7e; border-bottom: 5px solid #9d3329; color:#fff; font-weight:none;font-family:Century gothic; font-size: 15px; text-transform: uppercase; padding: 3px 3px 3px 3px;margin-top:1px }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { color:#fff; font-weight:none;font-family:Century gothic; font-size:15px; text-transform: uppercase; padding:0px;margin-top:1px }
.maintitle a:hover { color:#fff; font-weight:none;font-family:Century gothic; font-size: 15px; text-transform: uppercase; padding:0px;margin-top:1px }

.maintitle img { display:none; }

.plainborder { border:1px solid #efefef;background-color:#efefef}
.tableborder { border:0px solid #000; margin:0px; width:100%; }
.tablefill { border:1px solid #efefef;background-color:#FFFCF2;padding:6px; }
.tablepad { background-color:#efefef;padding:6px; text-align: justify; }
.tablebasic { padding:0px 0px 0px 0px; margin:0px; border:0px }

.wrapmini { display:none; }
.pagelinks { float:left;line-height:1.2em;width:35% }

.desc { font-family:Verdana; font-size:10px; color:#402410; letter-spacing: 0.5px; text-decoration: none; text-transform: none; }
.edit { font-size: 10px }

.signature { font-family:Verdana; font-size:10px; color:#402410; letter-spacing: 0.5px; text-decoration: none; text-transform: none; }
.postdetails { font-size: 10px }
.postcolor { font-size: 10px; line-height: 160% }

.normalname { font-family: Times New Roman, Times, serif; font-size: 10px; text-transform: uppercase; text-decoration: none; color: #402410 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-family: Times New Roman, Times, serif; font-size: 10px; text-transform: uppercase; text-decoration: none; color: #402410 }
.unreg { font-family: Times New Roman, Times, serif; font-size: 10px; text-transform: uppercase; text-decoration: none; color: #402410 }

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana; font-size: 10px; letter-spacing: 0.5px; color: #333333; border: 1px solid #333; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; background-color: #dadada; }
#CODE { font-family: Verdana; font-size: 10px; letter-spacing: 0.5px; color: #333333; border: 1px solid #333; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; background-color: #dadada; }

.copyright { font-family:Times New Roman, Times, serif; font-size: 10px; color:#FFFFFF;}

.codebuttons { font-family: Verdana; font-size: 10px; letter-spacing: 0.5px; color: #333333; border: 1px solid #333; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; background-color: #efefef; }
.forminput, .textinput, .radiobutton, .checkbox { font-family: Verdana; font-size: 10px; letter-spacing: 0.5px; color: #333333; border: 1px solid #333; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; background-color: #efefef; }

.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px; }

.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }

#ipbwrapper { margin-left:auto; margin-right:auto; width: 900px; background-color: #c7c7c7; padding: 10px; border: 8px solid #7e7e7e; }
#maintable {width: 900px; background-color: #ffffff; padding:5px; border: 8px solid #444; opacity: 0.95; }


Header & body:
Code:
 
<center><table>
<div align="center">
<tr><td id="maintable">
<table class="tableborder">
<tr>
<div id="sub_dos"><a href="http://z13.invisionfree.com/Reunion_eu/index.php?">Home</a>
<a href="http://z13.invisionfree.com/Reunion_eu/index.php?c=739912">Forums</a>
<a href="http://z3.invisionfree.com/Reunion_eu/index.php?act=Members">Members</a>
<a href="http://z13.invisionfree.com/Reunion_eu/index.php?showforum=8">Apply to Reunion</a>
</div>
</td></tr>
<tr>
<td class="tablepad" width="60%" valign="top">
<center>
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5"><img src="http://i41.tinypic.com/slqut0.png" border="0" alt="Image and video hosting by TinyPic"> <img src="http://i41.tinypic.com/15zquzd.png" border="0" alt="Image and video hosting by TinyPic"> <img src="http://i44.tinypic.com/2r2w1za.png" border="0" alt="Image and video hosting by TinyPic"> <img src="http://i43.tinypic.com/nx3wqh.png" border="0" alt="Image and video hosting by TinyPic"> <img src="http://i44.tinypic.com/2v0evpu.png" border="0" alt="Image and video hosting by TinyPic"></marquee>
</center></td>
<td class="tablepad" width="40%" valign="top">
<center><img src="http://i39.tinypic.com/hs2ujk.png" border="0" alt="Image and video hosting by TinyPic"></center>
<br>Aliquam est diam, viverra in sollicitudin sit amet, dignissim ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam risus, porttitor eu commodo id, euismod id purus. Aliquam est diam, viverra in sollicitudin sit amet, dignissim ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br>
Aliquam est diam, viverra in sollicitudin sit amet, dignissim ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam risus, porttitor eu commodo id, euismod id purus. Aliquam est diam, viverra in sollicitudin sit amet, dignissim ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td></tr></table></div>
<br>
<div class="tableborder">


<% BOARD HEADER %>
<% NAVIGATION %>
<table width="100%" class='0' cellspacing="5" cellpadding="1">
<tr>
<td width="100%" class='0' valign="top">
<% BOARD %>
<!--SPACER-->
<td width="5" class='0'> </td>
<td width="260" class='0' valign="top">


<center>
<div class='maintitle'>
GUILD STATUS
</div>
<DIV class="tablepad"><span class='desc'>
<center><img src="http://i42.tinypic.com/f9qr1z.png" border="0" alt="Image and video hosting by TinyPic"></center>
</span></div>
</div>
<br /></center>


<center>
<div class='maintitle'>
PROGRESSION
</div>
<div class="tablepad"><span class='desc'>
<center><img src="http://i43.tinypic.com/nbohv5.png" border="0" alt="Image and video hosting by TinyPic">
<p><img src="http://i40.tinypic.com/2r5agdg.png" border="0" alt="Image and video hosting by TinyPic">
<p><img src="http://i44.tinypic.com/2lscil4.png" border="0" alt="Image and video hosting by TinyPic">
<p><img src="http://i44.tinypic.com/2po1fyp.png" border="0" alt="Image and video hosting by TinyPic"></center>
</span></div>
</div>
<br /></center>


<center>
<div class='maintitle'>
THE CREW
</div>
<div class="tablepad"><span class='desc'>
<center>GUILDMASTER
<br>PIC
<p>
CAPTAIN
<br>PIC>
OFFICERS
<br>PIC>
</center>
</span></div>
</div>
<br /></center>


<center>
<div class='maintitle'>
Credits
</div>
<div class='tablepad'><span class='desc'>
Sidebar: Dana @ <a href="http://s8.invisionfree.com/redcarpetrebellion" target="new">RCR</a> <br>
Header: Mimmy @ <a href="http://s8.invisionfree.com/redcarpetrebellion" target="new">RCR</a> <br>
Coding Help: <a href="http://s8.invisionfree.com/redcarpetrebellion" target="new">RCR</a> <br>
Skin: Vagrant @ <a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND" target="new">Caution! 2.0</a>
</span></div>
</div>
<br /></center>


<img src='http://i1.ifrm.com/style_images/1/spacer.gif' alt='' width='190' height='1' />
</td>
</tr>
</table>
<% STATS %>


// purplemix
Edited by purplemix, Jun 19 2013, 01:45 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
 *   *   *   *   *   *   *   *   *  
Code: HTML
 
<td width="260" class='0' valign="top">
Change that to this:
Code: HTML
 
<td id="sidebar" width="260" class='0' valign="top">
Admin CP Posted Image Skinning & Styles Posted Image Board Wrappers Posted Image Footer
Code:
 
<script type="text/javascript">
//<![CDATA[
if (location.href.indexOf('showtopic=') !== -1) {
document.getElementById('sidebar').style.display = 'none';
}
//]]>
</script>
Offline Profile Quote Post Goto Top
 
purplemix
Member
 *  
You're a genious Cory! Thank you so much for coming to my rescue, hehe! ;)

Another question though - would it also be possible to hide the sidebar in active topics?
Link: http://z13.invisionfree.com/Reunion_eu/index.php?showforum=7

// purplemix
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
 *   *   *   *   *   *   *   *   *  
Code:
 
if (location.href.indexOf('showtopic=') !== -1) {
Change that to this:
Code:
 
if (location.href.indexOf('showtopic=') !== -1 || location.href.indexOf('showforum=') !== -1) {
Offline Profile Quote Post Goto Top
 
purplemix
Member
 *  
Thanks alot! Problems solved :D
Offline Profile Quote Post Goto Top
 
purplemix
Member
 *  
Found one more thing though - I would also like to remove/hide the sidebar when you edit a post aswell, if that's possible? :)
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
 *   *   *   *   *   *   *   *   *  
Code:
 
if (location.href.indexOf('showtopic=') !== -1 || location.href.indexOf('showforum=') !== -1) {
Change that to this:
Code:
 
if (location.href.indexOf('showtopic=') !== -1 || location.href.indexOf('showforum=') !== -1 || location.href.indexOf('?act=Post&CODE=08') !== -1) {
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · zIFBoards - Skinning & Code Support · Next Topic »
Add Reply