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:
Locked Topic
[Solved] IF Coding Help Needed - Sidebar & Skin Issues
Topic Started: Jun 16 2013, 09:53 PM (1,323 Views)
darklore
Member Avatar
Instant Geek. Just Add Sweet Tea.
 *  
I have never used sidebars before and this is my first time installing one. The website skin comes from one source, the sidebar code from another source, and the content layout of the sidebar from yet a third source. So far I have managed to make them work together well. However, once a user signs out, the sidebar and all it's links are still visible. It isn't supposed to be and I don't know how to fix it, though I've tried. When logged in, the sidebar is supposed to scroll separately on its own, and the header, navigation, and board are all supposed to scroll as one. I was also hoping to do this without the use of actual scroll bars showing on the page but if it cannot be done without them then that is fine so long as they can be edited (color, style, ect) as easily as the skin.

The only major issue (aside from those above) is that this is an RPG forum where the skin, banners, header, forum markers, buttons, etc. all are customized and recustomized frequently - changing on a frequent basis depending on what is happening in the RPGs, depending on what holiday it is, or just changes depending on the root admin's request. Any code that is added to the codes I am posting below must be able to be edited so the style can be changed to fit any changes on the site. I would prefer straight CSS over javascript because it makes customizing easier.

Normally I would hack away at the code and eventually figure it out and fix it, but after spending a week to just finding a good sidebar code and 4 days editing the whole thing so that it matches and works with the skin to this point ..... well I figured it was time for my brain to stop clenching in agony and ask for help. :)

I will post all my codes so that it may help further as well as a mockup of what the website looks like. At this point any help is welcome at all.

-darklore-

Website
http://z13.invisionfree.com/DARK_TESTER01/index.php?act=idx

What I Want It To Do
http://jsfiddle.net/NGLN/qndjW/11/#

Images - Header Code
Spoiler: click to toggle


Board Wrappers - Javascript
Spoiler: click to toggle


Board Wrappers - Header
Spoiler: click to toggle


Board Wrappers - Footer
Spoiler: click to toggle


Style Sheet - CSS Skin Code
Spoiler: click to toggle
Edited by darklore, Jun 17 2013, 07:59 PM.
Offline Profile Goto Top
 
scope
Inner Mongolian
 *  
Wow that forum looks good !

*Sorry probably not supposed to reply here.
Edited by scope, Jun 17 2013, 05:13 AM.
Offline Profile Goto Top
 
darklore
Member Avatar
Instant Geek. Just Add Sweet Tea.
 *  
The original layout style for the sidebar content came from here:
http://www.gtaforums.com/index.php

The original layout style for the sidebar itself came from here:
http://rpg-directory.com/threads/in-paradisium.33467/

The original skin code came from here:
http://rpg-directory.com/threads/troubled-city.22499/
and from here:
http://z7.invisionfree.com/Dark_Dawn/index.php?

The original buttons came from Helena's set. Thanks for telling me what the font was. :) Helped with the missing buttons I had to create for the IF layout.
http://if.invisionfree.com/topic/5168558/2/

All that I've basically used can be found here.
http://s183.photobucket.com/user/shalamar_drake/library/Icon%20Set%20-%20Apogee?sort=9&page=1

Hopefully this will help matters further since there have been 50+ views and no solution yet.
Edited by darklore, Jun 17 2013, 07:41 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
 *   *   *   *   *   *   *   *   *  
Code: HTML
 
<td width="150" class='0' valign="top">
Change that to this:
Code: HTML
 
<td id="sidebar" class='0' valign="top">
<div style="overflow: hidden; width: 150px; height: 500px">
<div style="overflow: scroll; width: 167px; height: 517px">
Code: HTML
 
<td width="5" class='0'> ></td>
Change that to this:
Code: HTML
 
</div>
</div>
<td width="5" class='0'> ></td>
Admin CP Posted Image Skinning & Styles Posted Image Board Wrappers Posted Image Footer
Code:
 
<script type="text/javascript">
//<![CDATA[
if (document.getElementById('userlinks').innerHTML.match('Welcome Guest').length) {
document.getElementById('sidebar').style.display = 'none';
document.getElementById('content').parentNode.setAttribute('width', '100%');
}
//]]>
</script>
Offline Profile Goto Top
 
darklore
Member Avatar
Instant Geek. Just Add Sweet Tea.
 *  
okay that removed it from the login page....

Once you log-in and go to the forum, part of it shows. But the forum links aren't there anymore. I didn't add or delete anything but what you said to so in my HEADER code the sidebar forum links are still there, they just aren't showing.

Also it is still not up beside the login bar and the header. I need the sidebar to scroll separately so it is easier and faster to use when people are navigating the forum. The forum that the finished code will go in is HUGE and their one main concern is scrolling up and down through the main forum to find the one forum area they need.


Posted Image Posted Image
Edited by darklore, Jun 27 2013, 06:17 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
 *   *   *   *   *   *   *   *   *  
What the overflow does is hides part of the sidebar and it is scrollable either with your mouse wheel or by clicking into the sidebar area and using your arrow keys.

You can move the <% BOARD HEADER %> and <% NAVIGATION %> tags to this DIV:
Code: HTML
 
<div id='pageContent'>
<% BOARD %>
</div>
Code: HTML
 
<div style="overflow: hidden; width: 150px; height: 500px">
Change that to this:
Code: HTML
 
<div style="overflow: hidden; width: 150px; height: 500px; position: fixed">
Code: HTML
 
<td width="90%" class='0' valign="top">
Change that to this:
Code: HTML
 
<td width="88%" class='0' valign="top">
Offline Profile Goto Top
 
darklore
Member Avatar
Instant Geek. Just Add Sweet Tea.
 *  
Okay first off... OMG THANKS FOR THE CODES!!!! With a little tweaking on the PX and some rearranging of image codes it works perfectly the way I want. I took your code and adjusted it thusly for a much larger forum.... Please note this code works on regular monitor sizes, but I am using a 17 inch monitor so I am not sure what the adjustments will look like on an older model monitor (one that looks like a TV). There were NO adjustments made beyond this point to the Javascript and Footer.

PREVIEW


______________________________________________________________________________

CSS CODE - Because the original three images in the header area got smushed I had to adjust the size on the logostrip to make them fit. The size was changed from 100px to 10px. ACP> SKINNING AND STYLES> MANAGE STYLE SHEETS is where it goes.

Spoiler: click to toggle


______________________________________________________________________________

LOGO AREA - I took the three images at the top of the site in the original code (on the RPG site there are links to other RPG sites between the Celtic knots) and moved them into the logo area. This kept them in line with everything else and moved the sidebar up to the very top of the screen where I needed it. If you want those links above everything and not in the logo area then just see the original post for where the codes go. ACP> SKINNING AND STYLES> IMAGES> LOGO is where this newly edited version goes.

Spoiler: click to toggle


______________________________________________________________________________

HEADER & BODY - The code given in the previous post worked like a charm. However there was only a small amount of the forum links showing in the sidebar and I had to adjust the PX to get them all to show. I found that increasing the PX (in red) made less links show. I had to fiddle with it before I found one that worked. ACP> SKINNING AND STYLES> BOARD WRAPPERS> HEADER & BODY is where the final edited code goes.

Spoiler: click to toggle


was changed to

Code:
 
<div style="overflow: hidden; width: 150px; [b][color=red]height: 2000px[/color][/b]; position: fixed">
<div style="overflow: scroll; width: 167px; [b][color]height: 700px[/b][/color]">


and in this area.....

Spoiler: click to toggle


I removed the images and moved them to the LOGO area. Thus the code was simplified to this:

Code:
 
<br><br>
<div align="center">
<div class="forumbg">
</div>
<table width="100%" class='0' cellspacing="5" cellpadding="-1">


The <% Board Header> and <% Navigation> were moved below the sidebar content.

Spoiler: click to toggle


was changed to

Spoiler: click to toggle




The finished Header and Body code looks like this

Spoiler: click to toggle





Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · zIFBoards - Skinning & Code Support · Next Topic »
Locked Topic