inherit
267841
0
Nov 1, 2023 8:07:44 GMT -8
shadow76
38
April 2023
shadow76
|
Post by shadow76 on Aug 1, 2023 5:07:16 GMT -8
Forum URL: forum.theshadowgrove.comDoes anyone know how to make the top part of the forum stay in place so that when you scroll down you always see it?? I tried playing with the forum wrapper but could not figure it out essentially i like to have the nav tree and everything above it not scroll
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,858
December 2005
horace
|
Post by Chris on Aug 2, 2023 17:29:19 GMT -8
You could wrap both elements in a common element and then add a CSS position of sticky to the common element and that should give you the desired behavior If that is acceptable, then - Head over to your theme's forum wrapper template and add the following two lines to create the common <section> element:
- Head over to the advanced CSS style sheet of the theme and add the following code to the bottom of the style sheet
This would have to be done on each theme where you desire this behavior. Styling is a personal thing, so not much was added except a background to get rid of the distracting transparency (distracting to me but probably not to you) |
|
inherit
267841
0
Nov 1, 2023 8:07:44 GMT -8
shadow76
38
April 2023
shadow76
|
Post by shadow76 on Aug 3, 2023 2:28:55 GMT -8
Thank you Bunches!!! I will give this a try after coffee
|
|
inherit
267841
0
Nov 1, 2023 8:07:44 GMT -8
shadow76
38
April 2023
shadow76
|
Post by shadow76 on Aug 3, 2023 9:42:01 GMT -8
Not sure what i did wrong, but followed instruction exactly (maybe) and it doesnt work, this is my forum wrapper
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta charset="UTF-8">
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<section id="sticky wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
{if $[current_user.is_member]}
<a class="navmenuplus" href="http://tsg.theshadowgrove.com:8083/" target="_blank">Tsg Online Library</a>
<a class="navmenuplus" href="http://tsg.theshadowgrove.com:8080/#library_id=Uploads&panel=book_list" target="_blank">Private Storage</a>
</ul>{/if}
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
</header>
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
</section>
$[header]
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
</div>
$[footer]
</div>
</body>
</html>
and i pasted the sticky part to the style sheet i only use the one theme that was default, and another member "tweaked" it
thank you in advance for any help
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,858
December 2005
horace
|
Post by Chris on Aug 3, 2023 21:48:34 GMT -8
Not sure what i did wrong, but followed instruction exactly (maybe) and it doesnt work, this is my forum wrapper <!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta charset="UTF-8">
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<section id="sticky wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
{if $[current_user.is_member]}
<a class="navmenuplus" href="http://tsg.theshadowgrove.com:8083/" target="_blank">Tsg Online Library</a>
<a class="navmenuplus" href="http://tsg.theshadowgrove.com:8080/#library_id=Uploads&panel=book_list" target="_blank">Private Storage</a>
</ul>{/if}
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
</header>
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
</section>
$[header]
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
</div>
$[footer]
</div>
</body>
</html>
and i pasted the sticky part to the style sheet i only use the one theme that was default, and another member "tweaked" it thank you in advance for any help The forum wrapper coding you just posted is not what I am seeing on the forum when I just took a peek. If you are not clicking that Save Changes button, then you need to do so after making those changes. Please re-verify you are not saving to a theme other than the default since I would be unable to see it and unable to help. If you are working with a forum other than the one you posted above then I would need to know that else I would be unable to see it and unable to help.  | The <section id="sticky-wrapper"> is simply not there |
|
|
inherit
267841
0
Nov 1, 2023 8:07:44 GMT -8
shadow76
38
April 2023
shadow76
|
Post by shadow76 on Aug 4, 2023 1:50:24 GMT -8
No it looks different now because i took out the sticky code when it would not work, and yes have only the one default theme, i use chrome for a browser and i had a member who uses firefox check and it didnt work for her either, if you need the style sheet as well let me know, im on est time so i need coffee will check back in a bit
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,858
December 2005
horace
|
Post by Chris on Aug 4, 2023 7:56:48 GMT -8
Unfortunately, I simply cannot help if it is not left in place for me to diagnose why it would not be working.
|
|
inherit
267841
0
Nov 1, 2023 8:07:44 GMT -8
shadow76
38
April 2023
shadow76
|
Post by shadow76 on Aug 4, 2023 8:36:10 GMT -8
If you were using the right click inspect thing on the webpage, it works in that, but not once you add it to the actual forum, i tried it there first and the sticky code worked perfectly, but not on the forum itself.
i even tried using fixed, but it looked a bit wonky and the shoutbox was a mess lol. Thank you for the help and ill keep playing with it and see where i went wrong
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,858
December 2005
horace
|
Post by Chris on Aug 5, 2023 1:17:38 GMT -8
Correct, the solution was created using the browser inspector but was added to a testbed forum for verification before posting the code. The images in my initial reply showing where to place the added lines in the forum wrapper were captured from that testbed forum. That forum also has a shoutbox and shows no issues. However, I noticed that your navigation tree has substantially changed since my initial viewing of the forum (compare the animated gifs in my first post to the image in my last post), so there has been at least one "tweak" since the code was conceived. I reiterate that I cannot offer substantial assistance if the code is not in place so it can be diagnosed. |
|
inherit
267841
0
Nov 1, 2023 8:07:44 GMT -8
shadow76
38
April 2023
shadow76
|
Post by shadow76 on Aug 5, 2023 3:23:36 GMT -8
IT"S WORKING!!!
I added it all back in just now and BOOM, its working!! Thank you so very very much for you help, im so tech stupid it would amaze you, idk what i did wrong the first time around lol
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,858
December 2005
horace
|
Post by Chris on Aug 11, 2023 3:46:15 GMT -8
A Small Observation:--sticky-height: 163px; /* height banner + height menu + height nav tree */
--sticky-height: 173px; /* height banner + height menu + height nav tree */
Add another 10px to the --sticky-height variable to avoid overlapping the control-bar when scrolling. |
|
