Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 8, 2017 10:25:22 GMT -8
Hello and good day,
My forum is vapersunited.freeforums.net/
I would like to request a Template that would make the Participated Button more accessible. I have dreamed up two ways to do that.
One option would be to add a Copy of the Participated Button to the Action Bar. A second option would be to allow both the Nav Tree and Menu Bar to be Stickied to the top of the Action Bar as one scrolls down the page. My focus is on the Participated Button.
Note: My Forum's width is set to 100% to allow an easy configuration for the Sticky Menu Bar. If a Template comes from this request that would allow me to set the width back to default, that would be fantastic!
Option 1
The first option should be the simplest of the two (especially aesthetically). While I am not a coder, I believe it would take less effort to place a Copy of the Participated Button itself on the Action Bar, as indicated in the image below..
I would prefer this method if it's possible, but I would like to remove the Sticky Menu Bar code and have the Menu Bar put back in its normal unaltered position. Then have the new code that would be written "grab" the Menu Bar become Sticky in its normal position as it attaches to the top of the Action Bar, if it can be done this way.
And to be clear about the way I would like to have it done, below is a screen shot showing the colors of the Nav Tree and the Participated Button in my theme colors...
Since the Participated Button has a blue background color and white text from my theme configuration, it would be very nice if the copy of the Participated Button that is placed in the Action Bar could be settable in the code to display its unaltered white background color and black text (as shown in the image above this one). This would allow me to make changes to my theme colors as they are altered in the future, and allow anyone else who uses the code to configure it to their theme. We can talk about how this could be done if this option is selected. I have something pretty simple in mind.
Option 2
Keeping in mind that my focus is on the Participated Button, the second option would be to remove the Sticky Menu Bar. Then with new code, position the Menu Bar below the advertisement at the top of any page (if there is one). Then position the Nav Tree below that. Now they will be sitting on top of either the first Board listed on the Home page, or on top of the "Title Bar" at the top of the Thread that is being viewed, being placed and held there by the new code. This would be the way they appear everywhere, the same as unaltered code, but this new code will have them held in position by already having them "grabbed" and ready for the next step, which would be to make them neatly Stickied to the Action Bar as one scrolls down the page.
Doing it this way would make them appear in their natural unaltered positions, but should make it easier to sticky them to the top of Action Bar by way of whatever code is needed from there.
Notes:With regard to Option 1, please be aware that I have the Action Bar set to display the Title Bar or Thread Name, so the Participated Button might best be placed to the far right, before Actions and Search (as indicated above). If this can be done, it might seem strange to have two Participated Buttons, so the one that's in the Nav Tree could be removed, if desired. With regard to Option 2, I installed the Sticky Menu Bar in the first place because I wanted the Notification Bubbles to be easily seen. Because the Sticky Menu Bar works well, I thought, if its code can do what it does, then maybe the Nav Tree could be added below the Menu Bar, with both of them Stickied on top of the Action Bar as one scrolls down the page. The only reason for this (as far as I'm concerned) would be to have easy access to the Participated Button. In the process of thinking about how this could be accomplished, what is now Option 1 came to mind.
I love the Participated Button on the Nav Tree and a lot of my members to too. The popup window that this Participated Button displays is the reason I would like to have easier access to it at all times. While I know that having multiple bars Stickied together may be considered controversial to some, I believe that, if done the way I propose it to be done (should Option 2 be selected), the configuration as described should actually improve the Accessibility Score. I know that I would find it extremely convenient!
As an aside, I wasn't particularly fond of the fact that the Sticky Menu Bar's code moved the Menu Bar from its normal position and placed it at the top. Therefore, the Template mods that I have proposed will address that as well. If it cannot be done because of limitations of any kind, and Option 1 cannot be done, then placing the Nav Tree below the Menu bar, with both of them at the top has to be something brought into consideration.
So there you have it. I am hopeful that someone will be willing to take on this challenging project. These are two ways (well, 2.25 ways ) that I can see to have a readily accessible Participated Button that should increase the Accessibly Score. I am open to suggestions and discussion about other methods/ways that may accomplish the same thing. My goal is focused on the Participated Button. Thanks in advance, Craig
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 11, 2017 7:48:57 GMT -8
This is not a Bump. This is a Notice.
I have done some major work in editing the initial post for organization, presentation, conciseness, grammar and spelling. If you visited this thread before, please have another look. I believe that it is much more concise now.
Thanks
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 20, 2017 7:24:29 GMT -8
Any thoughts, suggestions, or even reasons why this should not be done?
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 21, 2017 9:10:33 GMT -8
Hello Tumbleweed
I hope this won't be considered necroposting, but the thread was never marked Completed. So if I may, please...
I started a thread in Request a Template that I believe your work here would be a perfect solution for. If I understand it correctly, it is actually one of the options I mentioned there, done in what appears to be the way I was hoping for. I would like to use your option where both the Menu Bar and Nav Tree are Stickied to the Action Bar (Pagination). The Test forum and the OP's forum do not use both, so I couldn't actually see it in action, but it sounds like the bees knees.
I have the Sticky Menu Bar installed, so I'm looking for advice on how to proceed. I didn't want to venture off on my own as I am not a coder or programmer.
I'd like to start with two questions, please...
- Should the Sticky Menu Bar be uninstalled first? If so, I would very much appreciate some guidance in doing it right.
- I am using IE11 under Windows 10, but the focus here is on Chrome. Will that make any difference?
Thanks in advance,
Craig
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Aug 21, 2017 20:52:34 GMT -8
Hello Tumbleweed
I hope this won't be considered necroposting, but the thread was never marked Completed. So if I may, please...
I started a thread in Request a Template that I believe your work here would be a perfect solution for. If I understand it correctly, it is actually one of the options I mentioned there, done in what appears to be the way I was hoping for. I would like to use your option where both the Menu Bar and Nav Tree are Stickied to the Action Bar (Pagination). The Test forum and the OP's forum do not use both, so I couldn't actually see it in action, but it sounds like the bees knees.
I have the Sticky Menu Bar installed, so I'm looking for advice on how to proceed. I didn't want to venture off on my own as I am not a coder or programmer.
I'd like to start with two questions, please...
- Should the Sticky Menu Bar be uninstalled first? If so, I would very much appreciate some guidance in doing it right.
- I am using IE11 under Windows 10, but the focus here is on Chrome. Will that make any difference?
Thanks in advance,
Craig
I saw your request in the other thread but it brought back nightmares (of this thread) for me so I was hoping someone else would help you out. But anyway, seems I removed all that coding on the test site (which is why you didn't see it) but I have it on this test site. I never was satisfied how the control bar slide under the nav tree and then pops into the position I set. I think this is sort of like how you wanted option two except in mine they are stacking up as you scroll with the menu bar at the very top of the page. (I need to reread your post more carefully to get what you want.) But let me re-read and think about your preferred option one and I might fiddle with it a bit tonight before I go off line. Oh, and I might move our posts to your original template thread if it looks like I made any progress on this. Edit: O.K. Just was working on getting the participate button in the control bar and when using js to put it there, a funny thing happened. When one scrolls and the control bar gets in a fixed position it redirects the page to the participate page. So I nixed that idea and just put a link to the participate page in the control bar you can see here: abetteramerica.freeforums.net/thread/34/testingBut that doesn't do the pop up and guests can see it but not view the threads. That's as far as I've gotten before having to call it a night.
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 22, 2017 8:41:00 GMT -8
I saw your request in the other thread but it brought back nightmares (of this thread) for me so I was hoping someone else would help you out. But anyway, seems I removed all that coding on the test site (which is why you didn't see it) but I have it on this test site. I never was satisfied how the control bar slide under the nav tree and then pops into the position I set. I think this is sort of like how you wanted option two except in mine they are stacking up as you scroll with the menu bar at the very top of the page. (I need to reread your post more carefully to get what you want.) But let me re-read and think about your preferred option one and I might fiddle with it a bit tonight before I go off line. Oh, and I might move our posts to your original template thread if it looks like I made any progress on this. Edit: O.K. Just was working on getting the participate button in the control bar and when using js to put it there, a funny thing happened. When one scrolls and the control bar gets in a fixed position it redirects the page to the participate page. So I nixed that idea and just put a link to the participate page in the control bar you can see here: abetteramerica.freeforums.net/thread/34/testingBut that doesn't do the pop up and guests can see it but not view the threads. That's as far as I've gotten before having to call it a night. Thank you so much for coming back to this one! And a second thanks for doing it so quickly!!! Sorry about the nightmares. I hope your dreams were pleasant and you slept well.
You said "I never was satisfied how the control bar slide under the nav tree and then pops into the position." The way it works and looks seems pretty darn good to me. It pops into the position just like mine does. I've noticed that too, but it works and that's all I need. The Participated Button itself in the Control Bar (Action Bar as I've called it) looks great as well. Your efforts are appreciated. I would be good with either one, so pick the one that's easiest for you.
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Aug 22, 2017 20:30:32 GMT -8
Vapers United , As you can see I moved our posts in the other members thread to your thread here in template requests. Since your site isn't open to guests, do you have a banner and what size is it? And when you say in Option 1, that you want the menu back in it's unaltered position that would be below the banner. With the participate button on the control bar, the nav tree doesn't need to be stickied. Just the menu bar and then the control bar. Correct? Also do you have ad free because that might be an issue if you have the ads gone for members but showing for guests. Anyway, heading to work on this request.
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 22, 2017 23:13:58 GMT -8
Thanks for moving it here. I opened the forum so you can have a look around. You can see the General Board and Lounging on the Beach within it, and you can see the Sandbox.
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Aug 23, 2017 0:48:38 GMT -8
Thanks for moving it here. I opened the forum so you can have a look around. You can see the General Board and Lounging on the Beach within it, and you can see the Sandbox. I didn't add a banner the same size as yours (height:296) yet but I have things how I think you wanted them. Let me know: Test SiteAlso, what width is your forum going to be? (I don't need to see your site anymore--just needed your banner size, at least for now, so you can set it back)
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 23, 2017 1:49:23 GMT -8
1. That looks great! Does the Participated Button yield a windowed list? I couldn't tell as a Guest.
2. Yes, the banner is 2706 x 269. I did that so it could be centered for any screen resolution, and have Vapers United Forum shown without having the Visual Editor or CSS putting it there, and have it accommodate the Sticky Menu Bar all at the same time. My forum width is set to 100% because of scaling errors with the Sticky Menu Bar. I could leave the 2706 x 269 Banner image or make it something more reasonable. I would like to uninstall the Sticky Menu Bar and set the width back to default (90%, 80%, whatever it was) now.
3. I'll leave the forum open to you until we are finished.
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Aug 23, 2017 10:05:12 GMT -8
1. That looks great! Does the Participated Button yield a windowed list? I couldn't tell as a Guest. 2. Yes, the banner is 2706 x 269. I did that so it could be centered for any screen resolution, and have Vapers United Forum shown without having the Visual Editor or CSS putting it there, and have it accommodate the Sticky Menu Bar all at the same time. My forum width is set to 100% because of scaling errors with the Sticky Menu Bar. I could leave the 2706 x 269 Banner image or make it something more reasonable. I would like to uninstall the Sticky Menu Bar and set the width back to default (90%, 80%, whatever it was) now. 3. I'll leave the forum open to you until we are finished. It wasn't appearing as a pop up like when clicking on the regular participated button but I just now made it a pop up but now I have to figure out how to strip the unneeded stuff to make it look like the regular participate where it is more in a list form, stripped of non-essentials. Now it is just making a tiny window with everything in it, banner and all. I've never messed with pop ups so this is new to me. << Never mind, I was being stupid on how to do this. Made it more complicated then I needed. Duh! So it's working like the regular participated button does. Also, are you wanting that participate on the control bar on threads too? Currently, I just have it when viewing posts. If you made a new banner would it be the same height, you think? I only ask because it is kind of a pain to get it working smoothly and I'm just trying to save you from having to mess with it.
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 23, 2017 12:08:07 GMT -8
1. Thanks!
2. Yes please. Anywhere the Control Bar shows up.
3. I thought it was 270px tall, but it's 269, so I'd just leave it as is and change the total width, if I do that at all. I don't think it's necessary to fool with it. Do you?
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Aug 23, 2017 13:34:29 GMT -8
1. Thanks! 2. Yes please. Anywhere the Control Bar shows up. 3. I thought it was 270px tall, but it's 269, so I'd just leave it as is and change the total width, if I do that at all. I don't think it's necessary to fool with it. Do you? #2. It shows up in pm's too but can't think of anyplace else beside threads and posts. Do you want it in pm's? #3. O.K. I'll just set it up for 270. #4. New question that I thought I asked. I wanted to be clear you want the participate button to take the css styles of the other buttons in the control bar and not any color for the nav tree participate button. Is this correct. #5. Also, do you want the nav tree participate button gone? I should have the coding for you today provided I get answers from the above.
|
|
Vapers United
Junior Member
Taking a sec to thank the staff & member helpers for everything they do for us!
Posts: 300
inherit
220798
0
Jun 19, 2022 19:37:35 GMT -8
Vapers United
Taking a sec to thank the staff & member helpers for everything they do for us!
300
April 2015
vapersunited
|
Post by Vapers United on Aug 23, 2017 13:42:39 GMT -8
2. Not needed in PMs.
3. 270 should be fine.
4. The normal CSS Styles will be perfect. I want it to appear just like yours does. That is, I don't want any colors from the Nav Tree participate button settings.
5. No, thank you. I want that one to appear normally (as it is).
EDIT: I have an appointment is a short while, so I'll be away for a few hours. Looking forward to the new-to-me code and I'll be back later. Thanks again for everything!!!
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Aug 23, 2017 20:18:19 GMT -8
Vapers United , I'm not sure why I said 270 for what I'd set it for as I meant 269 but I'll let you know what you have to change if you ever go smaller/larger. O.K. The first thing I guess you want to do is reverse everything you did with the sticky menu. If you didn't do any template changes in your wrapper template, other than that then you might be best off if you just set it to default or another option is to set up a new theme and do it on that so you don't mess up your default theme. Once you have that done lets do the "Participated" button first so head to your "Board" template and you'll want the "Board" tab. Now go to about line 19 you'll see this.... <div class="controls">Add the blue below to it so it looks like this... <div class="controls"> <a id="part" class="recent-threads-button" href="/threads/participated"><span class="new-icon">new</span> Participated</a>
Save that and the head to your thread template and you want the thread tab. You are looking for the exact same divide as above except it will be on about line 10. Add the same blue link after that line so it looks just like what I posted above. Save it and now to put the divides in for the menu to be stickied. So head to your forum wrapper template and go to about line 23 and you'll see this... <div id="navigation-menu" class="ui-helper-clearfix">
Now add the blue I'm posting below so it looks like this... <div id="navigation-menu" class="ui-helper-clearfix"> <div class="nav1">
Scroll down to around line 50 and close that divide by adding </div> right before you see the closing </header> so it looks like this: </div> </div> </header>Now scroll to the very bottom and add this jquery: <script type="text/javascript"> jQuery("document").ready(function($){ var nav = $('#navigation-menu'); $(window).scroll(function () { if ($(this).scrollTop() > 262) { nav.addClass("f-nav1"); } else { nav.removeClass("f-nav1"); } }); }); </script>
The number in that is what you'll have to change if you go to a shorter or taller height banner. Be sure to save those changes. And that's it for the forum wrapper. Now for the css so head to your style sheet and add this at the very bottom: /*Participate button in control panel*/ #part{display: inline-block;position: relative; float: left;font-size:100%; border-width: 1px; .rounded-corners(3px);padding: 4px 6px 6px 6px; color:#000000; background-color: #ffffff; } /*scroll and the fixed menu bar*/ .f-nav1{ z-index: 9999; position: fixed; top:0px; margin:0 auto; width:70%; } #navigation-menu{padding:0px;} /*adjustst the nav bubbles*/ #navigation-menu div.tip-holder { position: absolute; top: 0px; right: -6px; display: inline-block; } #welcome{margin-top:6px;position:relative;right:16px; } /*restyling the menu*/ .nav1{height:30px!important; padding: 0 4px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); } .nav1 a { position: relative; } .nav1 ul, .nav1 ul li { float: left; } .nav1 ul li a { display: inline-block; padding: .60em .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 24px!important; } .nav1 ul li:hover a { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 24px!important;height:24px; } .nav1 ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 24px !important; }
/*Needs to be about 10px more than your menu height due to the bubble*/ .container>.control-bar { top: 40px !important;width:99.9%;border-right:1px solid black; }
Because we added that div in the wrapper template we had to recreate the menu bar theme css styles but with .nav1 instead of the default id/class. I put comments above some of the things so you know what they are. The notification bubbles had to be re positioned a little and the menu bar extended at the top so the bubbles didn't get cut off. If I hadn't extended the top height then getting the bubbles to show would have also made a very unseemly gap. Hope that makes sense. Hopefully, all will go smooth for you but don't be surprised if something isn't a bit off. Which is why it would probably be a good idea to do this on a new theme or practice theme. Anyway, that should be all you have to do.
|
|