Jump to Present Button Revamp from an | libVencore | Page 1

rugged salmon Sep 20, 2023, 1:54 PM

#

For me it's in the center, rather than on the bottom right.

Screen_Shot_2023-09-20_at_6.53.37_AM.png

#

Is this intensional?

spring hedge Sep 20, 2023, 1:57 PM

#

rugged salmon For me it's in the center, rather than on the bottom right.

hm no

#

i'll fix that later

rugged salmon Sep 20, 2023, 1:57 PM

#

Okay

spring hedge Sep 20, 2023, 2:16 PM

#

@rugged salmon could you tell me how to recreate the bug?

rugged salmon Sep 20, 2023, 2:33 PM

#

What do you mean by that?

spring hedge Sep 20, 2023, 3:28 PM

#

rugged salmon What do you mean by that?

like maybe give some info on how i can have that bug so i could fix it
cause it isnt really happening to me

neat anvil Sep 20, 2023, 3:33 PM

#

i think it might have something to do with the message button grid

spring hedge Sep 20, 2023, 3:37 PM

#

yeah

#

maybe

rugged salmon Sep 20, 2023, 6:27 PM

#

spring hedge like maybe give some info on how i can have that bug so i could fix it cause it ...

i have an import that causes my buttons to all be on the right and more space when typing. This is the import for it:
@import url(https://raw.githubusercontent.com/SEELE1306/SEELE1306.github.io/main/Snippets/MessageSection/import.css);

spring hedge Sep 20, 2023, 6:57 PM

#

rugged salmon i have an import that causes my buttons to all be on the right and more space wh...

eh
if you want i will try to give you a fix later on
but its because of another snippet so not really my fault

rugged salmon Sep 20, 2023, 7:21 PM

#

spring hedge eh if you want i will try to give you a fix later on but its because of another ...

Okay

rugged salmon Oct 28, 2023, 2:31 AM

#

Hey @spring hedge this plugin seems to have broke after the disord update, do you plan to fix it

spring hedge Oct 28, 2023, 3:46 AM

#

rugged salmon Hey <@586962558435590154> this plugin seems to have broke after the disord updat...

I've tested it just now
seems to be working fine

Discord hasn't changed the classes of the jumpToPresentBar at all, maybe you could see if there are any conflicting css/plugins again?

rugged salmon Oct 28, 2023, 4:35 AM

#

yes it also works for me now, thanks!

rose cypress Nov 3, 2023, 5:50 PM

#

hey

#

the loading thing on the button goes to the middle left of the screen after pressing it

mortal tusk Jul 2, 2024, 6:49 AM

#

is it possble to change when it appears, like condition or smtn?

meager sphinx Apr 24, 2025, 6:05 AM

#

So the icon disappeared on me with the new updates. How can I fix it?

spring hedge Apr 24, 2025, 6:51 PM

#

meager sphinx So the icon disappeared on me with the new updates. How can I fix it?

this is really old, discord completely changed how the bar looks, so this wont work at all

meager sphinx Apr 25, 2025, 4:07 AM

#

spring hedge this is really old, discord completely changed how the bar looks, so this wont w...

I know it is. It surprisingly still works and I still prefer it over vanilla and other solutions. Any plans to update?

spring hedge Apr 25, 2025, 5:29 AM

#

meager sphinx I know it is. It surprisingly still works and I still prefer it over vanilla and...

I will look into it when I'm free, i'll let you know if I do fix it

meager sphinx Apr 25, 2025, 6:26 AM

#

spring hedge I will look into it when I'm free, i'll let you know if I do fix it

Not a problem. I do appreciate it. Here is my current version. I was able to get the icon I wanted working, but I know it is not right, white, & doesn't disappear when hovered over. I may or may not leave the icon on my Github as it's temporary.

/* Better Jump To Present Button */
[class*="jumpToPresentBar"] {
  display: contents;
}
[class*="jumpToPresentBar"] > button:first-child {
  display: none;
}
[class*="jumpToPresentBar"] > button:last-child {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  right: 8px;
  padding: 16px !important;
  height: 16px;
  background: url("https://raw.githubusercontent.com/BigFlubba/discord-crap/refs/heads/main/150-Interactive%20Normal-32px.png");
  background-color: #5865F2;
  box-shadow: var(--elevation-high);
  border-radius: 100px;
  display: flex;
  font-size: 0px;
  color: transparent;
  transition: font-size .2s .1s, color .2s, padding .4s .1s;
}
[class*="jumpToPresentBar"] > button svg {
  order: -1;
  margin: 0px;
  height: 24px;
  width: 24px;
  top: 0;
  margin-right: 0px;
  margin-left: 0px;
  color: #FFFFFF;
  transition: margin .6s;
}
[class*="jumpToPresentBar"]:hover > button {
  padding: 18px 18px !important;
  font-size: 16px;
  color: #FFFFFF;
  transition: font-size .2s, color .2s .1s, padding .4s;
}
[class*="jumpToPresentBar"]:hover > button svg {
  margin-right: 2px;
  margin-left: -6px;
}

#

Icon 150

e=>{var t,n,{size:s="md",width:c,height:f,color:_=i.Z.colors.INTERACTIVE_NORMAL,colorClass:p=""}=e,h=d(e,["size","width","height","color","colorClass"]);let m=(0,o.m)(s),g=null!=(t=null==m?void 0:m.width)?t:c,E=null!=(n=null==m?void 0:m.height)?n:f;return(0,r.jsx)("svg",u(l({},(0,a.Z)(h)),{xmlns:"http://www.w3.org/2000/svg",width:g,height:E,fill:"none",viewBox:"0 0 24 24",children:(0,r.jsx)("path",{fill:"string"==typeof _?_:_.css,d:"M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z",className:p})}))}

spring hedge Apr 25, 2025, 1:31 PM

#

meager sphinx Icon 150 ```js e=>{var t,n,{size:s="md",width:c,height:f,color:_=i.Z.colors.INTE...

thanks for the icon

meager sphinx Apr 25, 2025, 1:32 PM

#

spring hedge thanks for the icon

Np.

spring hedge Apr 25, 2025, 1:38 PM

#

meager sphinx Np.

fixed it

#

here you go

#

/* Jump To Present Bar Revamp */
[class*="jumpToPresentBar"] {
    display: contents;
}
[class*="jumpToPresentBar"] > div {
    display: none;
}
[class*="jumpToPresentBar"] > button {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    right: 22px;
    padding: 8px !important;
    padding-left: 32px !important;
    height: auto;
    background-color: #2e353b20;
    box-shadow: var(--elevation-high);
    border-radius: 100px;
    display: flex;
    font-size: 0px;
    color: transparent;
    transition: font-size .2s .1s, color .2s, padding .4s .1s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 8px center;
}
[class*="jumpToPresentBar"]:hover > button {
    padding: 8px 18px 8px 32px !important;
    font-size: 14px;
    color: #FFFFFF;
    transition: font-size .2s, color .2s .1s, padding .4s;
}

meager sphinx Apr 25, 2025, 2:04 PM

#

Awesome! it works! Thanks! The alignment when open was a little off (for me at least) so I tried to do the best I could. I also swapped out you're class*= to the more performant class^=.

/* Jump To Present Bar Revamp */
[class^="jumpToPresentBar"] {
    display: contents;
}
[class^="jumpToPresentBar"] > div {
    display: none;
}
[class^="jumpToPresentBar"] > button {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    right: 22px;
    padding: 8px !important;
    padding-left: 32px !important;
    height: auto;
    background-color: #2e353b20;
    box-shadow: var(--elevation-high);
    border-radius: 100px;
    display: flex;
    font-size: 0px;
    color: transparent;
    transition: font-size .2s .1s, color .2s, padding .4s .1s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 8px center;
}
[class^="jumpToPresentBar"]:hover > button {
    padding: 10px 12px 6px 32px !important;
    font-size: 14px;
    color: #FFFFFF;
    transition: font-size .2s, color .2s .1s, padding .4s;
}

#

Then the one adjusted to my liking (if anyone else wants it).

/*Jump To Present Bar Revamp*/
[class^="jumpToPresentBar"] {
  display: contents;
}
[class^="jumpToPresentBar"] > div {
  display: none;
}
[class^="jumpToPresentBar"] > button {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  right: 8px;
  padding: 8px !important;
  padding-left: 32px !important;
  height: 42px;
  background-color: #2e353b20;
  box-shadow: var(--elevation-high);
  border-radius: 100px;
  display: flex;
  font-size: 0px;
  color: transparent;
  transition: font-size .2s .1s, color .2s, padding .4s .1s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 8px center;
}
[class^="jumpToPresentBar"]:hover > button {
  padding: 10px 12px 6px 32px !important;
  font-size: 14px;
  color: #FFFFFF;
  transition: font-size .2s, color .2s .1s, padding .4s;
}

#

It's weird because I am not seeing as much alignment issues on Vesktop as I am on Desktop. cat_shrug

Vesktop:

[class^="jumpToPresentBar"]:hover > button {
  padding: 8px 12px 8px 32px !important;
  font-size: 14px;
  color: #FFFFFF;
  transition: font-size .2s, color .2s .1s, padding .4s;
}

#

Oh well

spring hedge Apr 25, 2025, 3:48 PM

#

meager sphinx It's weird because I am not seeing as much alignment issues on Vesktop as I am o...

thats weird

#

but anyway, thanks for those too

meager sphinx Apr 25, 2025, 3:54 PM

#

spring hedge thats weird

Yah, I don't know what is happening. You're welcome!

buoyant gazelle Sep 12, 2025, 3:49 PM

#

}
/* Jump To Present Bar Revamp */
[class^="jumpToPresentBar"] {
    display: contents;
}
[class^="jumpToPresentBar"] > div {
    display: none;
}
[class^="jumpToPresentBar"] > button {
    position: absolute;
    z-index: 1;
    bottom: 8px;
    right: 8px;
    padding: 8px !important;
    padding-left: 32px !important;
    height: 42px;
    background-color: #5865F2;
    box-shadow: var(--elevation-high);
    border-radius: 100px;
    display: flex;
    font-size: 0px;
    color: transparent;
    transition: font-size .2s .1s, color .2s, padding .4s .1s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 8px center;
}
[class^="jumpToPresentBar"]:hover > button {
    padding: 10px 12px 6px 32px !important;
    font-size: 14px;
    color: #FFFFFF;
    transition: font-size .2s, color .2s .1s, padding .4s;
}```

Im using this and mine still looking weird :
Can u help me plz

buoyant gazelle Sep 16, 2025, 1:35 PM

#

Anyone can helps me ?

buoyant gazelle Sep 26, 2025, 2:30 PM

#

@meager sphinx sry for ping can u help me to fix my display bug plz ?

buoyant gazelle Oct 9, 2025, 10:24 AM

#

Anyone ?

neat anvil Oct 9, 2025, 7:24 PM

#

it hasnt even been a month yet lol, give it some time

lyric gorge Dec 13, 2025, 9:29 AM

#

[class^="jumpToPresentBar_"]{
    margin: 0 10px 15px auto;
    background: transparent;
    box-shadow: none;
    border: 0;
    min-width: 0px;
}

[class^="jumpToPresentBar_"] > div[class^="barButtonMain_"],
[class^="jumpToPresentBar_"] > button[class^="button_"] span{
    display:none;
}

[class^="jumpToPresentBar_"] > button[class^="button_"]{
    min-width: 0px;
    padding:0 3px;
    box-shadow: none;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
    background-color: gray;
    transition: background-color 0.5s, padding 0.5s;
}

[class^="jumpToPresentBar_"] > button[class^="button_"]:hover{
    background-color: royalblue;
    padding:2px 5px;
}

#Jump to Present Button Revamp from an