levander 96 Posted October 12, 2019 Share Posted October 12, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted October 12, 2019 Share Posted October 12, 2019 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? Link to comment Share on other sites More sharing options...
levander 96 Posted October 13, 2019 Author Share Posted October 13, 2019 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 Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted October 13, 2019 Share Posted October 13, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted October 13, 2019 Share Posted October 13, 2019 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;} Link to comment Share on other sites More sharing options...
levander 96 Posted October 13, 2019 Author Share Posted October 13, 2019 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? Link to comment Share on other sites More sharing options...
levander 96 Posted October 13, 2019 Author Share Posted October 13, 2019 (edited) ...{font-size: 1vmax;} What does this mean? Are there values I can change to decrease font size? Nevermind Edited October 13, 2019 by levander Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted October 13, 2019 Share Posted October 13, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
levander 96 Posted October 13, 2019 Author Share Posted October 13, 2019 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. Link to comment Share on other sites More sharing options...
Happy2Play 8279 Posted October 13, 2019 Share Posted October 13, 2019 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; } Link to comment Share on other sites More sharing options...
levander 96 Posted October 14, 2019 Author Share Posted October 14, 2019 Thank you very much! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now