Quick Scrolling Plug-In-Request For Code To Place It Higher

[Violette]

I recently installed the Quick Scrolling plug-in on my forum and the members love it. I do too, except that I have a picture of a dalmatian in that right hand corner, and the quick scrolling code placement there makes it look "cluttered."

Just wondering if someone could come up with a code that would allow the placement to be a little higher up?

Thank you for any help on this,

Violette

[Retread]

Hi Violette

If you put this in your Global Footer, it will affect the placement of the Quick Scrolling buttons on all themes:

<style>
   /* Reposition (vertical) Quick Scrolling Buttons */
   .quickscrollbox {
       bottom:120px!important;
   }
</style>

I think 120px should allow enough space so it's not crowding Puppy Love, but you can adjust that to your liking.

[Violette]

Hi Retread

Your code worked perfectly!  Thank you so much for coming up with that code.  I fixed it at 320px. Looks nice on the forum, too!

Big hug,

Violette

[Nscalerr]

Great bit of code Retread, using it for my forum as well.

[Retread]

Apr 25, 2020 15:29:26 GMT -8 Violette said:

Big hug,

I'll take a social-distance raincheck on those and save them for later. But kind words from you, warm my heart and put a smile on my face. ❤️

---

Nscalerr , the author didn't make the plugin editor which is always disappointing. They did list the classes used, though.

Upon further review, I think I'd add an opacity property to the outer container to ghost the buttons unless hovered.

<style>
   /* Reposition (vertical) Quick Scrolling Buttons and ghost until hover */
   .quickscrollbox {
       bottom:120px!important;
       opacity:10%;
   }
   .quickscrollbox:hover {
       opacity:100%;
   }
</style>

[Nscalerr]

Apr 27, 2020 3:52:27 GMT -8 Retread said:

Nscalerr , the author didn't make the plugin editor which is always disappointing. They did list the classes used, though.

Upon further review, I think I'd add an opacity property to the outer container to ghost the buttons unless hovered.

<style>
   /* Reposition (vertical) Quick Scrolling Buttons and ghost until hover */
   .quickscrollbox {
       bottom:120px!important;
       opacity:10%;
   }
   .quickscrollbox:hover {
       opacity:100%;
   }
</style>

I did roughly the same thing, but using rgba instead.


<style>
   /* Reposition (vertical) Quick Scrolling Buttons */
   .quickscrollbox {
       bottom: 120px !important;
       background: rgba(150, 150, 150, 0.5) !important;
   }
   .quickscrollupbutton:hover {
       background: rgba(0, 0, 0, 0.2) !important;
   }
   .quickscrolldownbutton:hover {
       background: rgba(0, 0, 0, 0.2) !important;
   }
</style>

[Nscalerr]

Did a slight variation on what I had before, based on your post Retread

/* Reposition (vertical) Quick Scrolling Buttons */
.quickscrollbox {
   bottom: 120px !important;
   background: rgba(150, 150, 150, 0.5) !important;
   color: rgba(50, 50, 50, 0.5) !important;
}
.quickscrollbox:hover {
   background: rgba(0, 0, 0, 0) !important;
}
.quickscrollupbutton:hover {
   background: rgba(150, 150, 150, 0.2) !important;
   color: rgba(250, 250, 250, 0.5) !important;
}
.quickscrolldownbutton:hover {
   background: rgba(150, 150, 150, 0.2) !important;
   color: rgba(250, 250, 250, 0.5) !important;
}

[Shaliza]

Hello Nscalerr and Retread, 

I was wondering how I can change the coding so that the up/down arrows look like on this site?

friday-night-lights2.proboards.com

I would like to add the double border to the arrows and also make them a little bigger if possible?

Thanks so much for the help.  

[Beckea]

Apr 29, 2020 15:55:40 GMT -8 Shaliza said:

Hello Nscalerr and Retread ,

I was wondering how I can change the coding so that the up/down arrows look like on this site?

friday-night-lights2.proboards.com

I would like to add the double border to the arrows and also make them a little bigger if possible?

Thanks so much for the help.

Shaliza I did that for Dazzal. I could do it for you if you like. Just give me the choice you want to have for it?

[Shaliza]

Aww... thank you, Beckea.

Everything can remain black... for the arrows and double borders. And the white background can remain.

Thanks again... *hugs*

[Beckea]

I posted a pm to you on your forum, but I will do that and post another for the code.

[Shaliza]

Thanks again, Beckea. I'm absolutely rubbish at coding so I really appreciate all the help.

[Nscalerr]

My final version of the code. This creates a ghost version with a highlight of the arrows when you hover.

<style>
   /* Reposition (vertical) Quick Scrolling Buttons */
   .quickscrollbox {
       border: 1px solid rgba(250, 250, 250, 0.8);
       bottom: 120px !important;
       background: rgba(0, 0, 0, 0) !important;
       color: rgba(250, 250, 250, 0.5) !important;
       border-radius: 50px !important;
       -moz-border-radius: 50px !important;
       -webkit-border-radius: 50px !important;
   }
   .quickscrollbox:hover {
       background: rgba(0, 0, 0, 0) !important;
   }
   .quickscrollupbutton:hover {
       background: rgba(250, 250, 250, 0.5) !important;
       color: rgba(0, 0, 255, 0.8) !important;
       border-radius: 50px 50px 0px 0px;
       -moz-border-radius: 50px 50px 0px 0px;
       -webkit-border-radius: 50px 50px 0px 0px;
   }
   .quickscrolldownbutton:hover {
       background: rgba(250, 250, 250, 0.5) !important;
       color: rgba(0, 0, 255, 0.8) !important;
       border-radius: 50px 50px 0px 0px;
       -moz-border-radius: 50px 50px 0px 0px;
       -webkit-border-radius: 50px 50px 0px 0px;
   }
</style>

[Violette]

Apr 29, 2020 22:24:29 GMT -8 Nscalerr said:

My final version of the code. This creates a ghost version with a highlight of the arrows when you hover.

<style>
   /* Reposition (vertical) Quick Scrolling Buttons */
   .quickscrollbox {
       border: 1px solid rgba(250, 250, 250, 0.8);
       bottom: 120px !important;
       background: rgba(0, 0, 0, 0) !important;
       color: rgba(250, 250, 250, 0.5) !important;
       border-radius: 50px !important;
       -moz-border-radius: 50px !important;
       -webkit-border-radius: 50px !important;
   }
   .quickscrollbox:hover {
       background: rgba(0, 0, 0, 0) !important;
   }
   .quickscrollupbutton:hover {
       background: rgba(250, 250, 250, 0.5) !important;
       color: rgba(0, 0, 255, 0.8) !important;
       border-radius: 50px 50px 0px 0px;
       -moz-border-radius: 50px 50px 0px 0px;
       -webkit-border-radius: 50px 50px 0px 0px;
   }
   .quickscrolldownbutton:hover {
       background: rgba(250, 250, 250, 0.5) !important;
       color: rgba(0, 0, 255, 0.8) !important;
       border-radius: 50px 50px 0px 0px;
       -moz-border-radius: 50px 50px 0px 0px;
       -webkit-border-radius: 50px 50px 0px 0px;
   }
</style>

Hi, Nscalerr

I tried this code ^ on The Beach Cottage and nothing showed up.  What did I forget to do or ?

[Retread]

Violette , the alpha value for color on everything except one bottom-border is set to 0.

You should only see a horizontal line, except when hovering, using Nscalerr 's most recent styling. (image below)