SOLVED: Trickplay Black Bar Issue

[ca2ju]

Jellyfin Version: 10.10.0
Installation Method and Platform: Ubuntu Server


Hi everyone, can someone explain to me how to remove this black bar with the scene number on the trickplay image?  I looked for posts here in the forum about this and didn't find any.

[theguymadmax]

Code:

.chapterThumbText, .chapterThumbName {
    display: none;
}

On the homepage of the web UI, click your user profile in the top right corner, select "Display," and enter that in the Custom CSS code section.

[Efficient_Good_5784]

You can also use this code to make that overlay smaller and give it a design (along with the trickplay container):

Code:

.chapterThumbTextContainer {
    width: fit-content;
    margin: 0 auto 9px 9px;
    position: absolute;
    border-radius: 12px !important;
    padding: 0px 5px 0px 4px;
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,.5);
}
.chapterThumbContainer,
.chapterThumbWrapper,
.sliderBubble {
    border-radius: 12px !important;
}
h2.chapterThumbText {
    font-size: 1.7em;
    font-weight: 450;
    padding: .15em 0;
} 
.chapterThumbText {
    font-size: 1.4em;
    padding: .15em 0;
}
.chapterThumbText-dim {
    opacity: 1;
}

   

[ca2ju]

thank you guys !!!!!!

[Jamestorn]

Thanks for this guys. I only wanted the black bar gone. I still like to have the time stamp and the chapter number is nice too. This is the only line needed to remove the black bar.

.chapterThumbTextContainer {
    background: rgba(0,0,0,0);
}

The last digit sets the transparency. 1 is solid black and 0 is clear.

This is all my customization if you want to declutter a bit more

Code:

/* This removes (in order) tags, video file, audio type, studios and genres from displaying. It also removes the black bar when scrolling*/
.itemTags {
    display: none !important;
}
.selectVideoContainer {
    display: none !important;
}
.selectAudioContainer {
    display: none !important;
}
.studiosGroup {
    display: none !important;
}
.genresGroup {
    display: none !important;
}
.chapterThumbTextContainer {
    background: rgba(0,0,0,0);
}