How to customise overlay text in thumb view?

[levander 96]

Hi, anyone knows how to customise overlay text in library thumb view? 

 

 

I would like to try to change font, size, location and text background with these options:

 

Edited October 12, 2019 by levander

[Happy2Play 8273]

Hi, anyone knows how to customise overlay text in library thumb view? 

 

Screenshot 2019-10-12 at 10.02.47.png

 

I would like to try to change font, size, location and text background with these options:

 

Screenshot 2019-10-12 at 10.15.45.png

 

Do you have a idea of what you want?

[levander 96]

Do you have a idea of what you want?

 

Yes, I would like to

-remove that dark background layer behind text (what do you call it?)

-increase the size of the font so the title fits the thumb

-move everything on up left of the thumb

-add Director so it look like this:

 

 Love with the Proper Stranger

 Robert Mulligan, 1963

[Happy2Play 8273]

Yes, I would like to

-remove that dark background layer behind text (what do you call it?)

-increase the size of the font so the title fits the thumb

-move everything on up left of the thumb

-add Director so it look like this:

 

 Love with the Proper Stranger

 Robert Mulligan, 1963

Well you can do all but the director with css.

 

So you would like the background to be transparent?

Edited October 13, 2019 by Happy2Play

[Happy2Play 8273]

On issue you can run into is there is a Folder icon in the top left in some views.
 
But something like this.  Font size is a little difficult as the lengths of item names very.
 

div.innerCardFooter {background: transparent; top: inherit;}
div.innerCardFooter div.cardText.cardTextCentered {font-size: 1vmax;}

[levander 96]

Thanks Happy!

 

I am interested in these tweaks:

 

- align year left

- decrease space between title-year

- make title all caps

 

 

PS

Folder Icon is not a problem but that damn boxes for multi-select are annoying. Any way to remove those with css?

[levander 96]

...{font-size: 1vmax;}

 

What does this mean? Are there values I can change to decrease font size?

 

Nevermind

Edited October 13, 2019 by levander

[Happy2Play 8273]

Thanks Happy!

 

I am interested in these tweaks:

 

- align year left

- decrease space between title-year

- make title all caps

 

 

PS

Folder Icon is not a problem but that damn boxes for multi-select are annoying. Any way to remove those with css?

Something like this (update to previous code).  Probably have to tweak font-size to your liking.

div.innerCardFooter {background: transparent; top: inherit;}
div.innerCardFooter div.cardText.cardTextCentered {
    font-size: 100%;
    text-align: left;
    padding: 0 .5em;
    text-transform: uppercase;
}

and if you don't want multiselect then this

/*Remove multi-select checkbox option*/
label[data-action="multiselect"] {display: none;}

Edited October 13, 2019 by Happy2Play

[levander 96]

Thanks again, Happy!

 

I am getting there.. but few more tweaks:

 

1. Is there a way to play with distance of title from the top? The title is on the upper edge of the thumb. I would like to be able to put it little down and left (same distance from left and upper edge)

2. How to make title font bold?

3. Is there a way to tell to longer titles that would go over the thumb edge to continue in second row rather then end with "..."

 

 

P.S.

 

Odd thing that I found out is that year is there shown only in library main page, when filtered (by genre, people...) year is missing.

[Happy2Play 8273]

Thanks again, Happy!

 

I am getting there.. but few more tweaks:

 

1. Is there a way to play with distance of title from the top? The title is on the upper edge of the thumb. I would like to be able to put it little down and left (same distance from left and upper edge)

2. How to make title font bold?

3. Is there a way to tell to longer titles that would go over the thumb edge to continue in second row rather then end with "..."

 

 

P.S.

 

Odd thing that I found out is that year is there shown only in library main page, when filtered (by genre, people...) year is missing.

 

1.  Adjust "top: inherit;" to something like  "top: 5px;"

 

2. Add "font-weight: bold;"

 

3.  Add "white-space: pre-wrap;" for long titles if your font-size is containing the title to one line.

div.innerCardFooter {background: transparent; top: 5px;}
div.innerCardFooter div.cardText.cardTextCentered {
    font-size: 1vmax;
    text-align: left;
    padding: 0 .5em;
    text-transform: uppercase;
    font-weight: bold;
    white-space: pre-wrap;
}

[levander 96]

Thank you very much!