Lyfesaver 64 Posted November 30, 2018 Share Posted November 30, 2018 My goal is pretty basic "Add text after the logo", but I am not finding the best flow to get it to work. Changing HTML is not really an option due to the way the web app is driven and due to any HTML changes that I could get away with would be overwritten (and rightly so) to ensure everything works properly. So, CSS to the rescue. Specifically the ::before and ::after content pseudo elements. Playing around with various CSS methods inside pageTitle, pageTitleWithLogo or pageTitleWithDefaultLogo does not seem to have any effect. Any help with this would be great Thanks so much!! Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted November 30, 2018 Share Posted November 30, 2018 Can provide a specific example? 1 Link to comment Share on other sites More sharing options...
Lyfesaver 64 Posted November 30, 2018 Author Share Posted November 30, 2018 Can provide a specific example? Absolutely. The following example should place the text after the Emby logo for it to show LOGO Web App (with Web App in green color) pageTitleWithLogo::after { conent: ' Web App'; color: green; } it's "after" so it tshould place that text after whatever content is in pageTitleWithLogo which in this case would be the logo. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted November 30, 2018 Share Posted November 30, 2018 Absolutely. The following example should place the text after the Emby logo for it to show LOGO Web App (with Web App in green color) pageTitleWithLogo::after { conent: ' Web App'; color: green; } it's "after" so it tshould place that text after whatever content is in pageTitleWithLogo which in this case would be the logo. Something like this. .pageTitleWithLogo:after { content: ' Web App'; position: absolute; color: green; left: 10%; } 1 Link to comment Share on other sites More sharing options...
Lyfesaver 64 Posted November 30, 2018 Author Share Posted November 30, 2018 That did it, thanks. I don't know whyit was not working for me. The only one of the options you ued that I did not was left: 10%; But hey, I am just glad it works. Thanks so much!!!!!! As always, you rock! Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted November 30, 2018 Share Posted November 30, 2018 I believe it is do it being a image placeholder it doesn't know a position to apply the content so both image and content were overlapping. 1 Link to comment Share on other sites More sharing options...
Lyfesaver 64 Posted December 1, 2018 Author Share Posted December 1, 2018 (edited) Follow up - kinda off topic question for you @@Happy2Play Is there a simple text file I can edit that holds the custom CSS? I am doing a lot of work on CSS and a good amount of trial and error. The user experience in my three browsers of editing that CSS text box is horrific. Jumping to the top and such. Edited December 1, 2018 by Lyfesaver Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted December 1, 2018 Share Posted December 1, 2018 Follow up - kinda off topic question for you @@Happy2Play Is there a simple text file I can edit that holds the custom CSS? I am doing a lot of work on CSS and a good amount of trial and error. The user experience in my three browsers of editing that CSS text box is horrific. Jumping to the top and such. Well the custom css box saves everything to the branding.xml (\Emby-Server\programdata\config). But editing it directly won't load the changes. Link to comment Share on other sites More sharing options...
Lyfesaver 64 Posted December 1, 2018 Author Share Posted December 1, 2018 Well the custom css box saves everything to the branding.xml (\Emby-Server\programdata\config). But editing it directly won't load the changes. Crud Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted December 1, 2018 Share Posted December 1, 2018 @@Lyfesaver try this at the top of your css box - should make it behave better /* CSS Box */ #txtCustomCss {height: 300px !important; overflow-y: scroll !important; } 2 Link to comment Share on other sites More sharing options...
Lyfesaver 64 Posted December 1, 2018 Author Share Posted December 1, 2018 @@Lyfesaver try this at the top of your css box - should make it behave better /* CSS Box */ #txtCustomCss {height: 300px !important; overflow-y: scroll !important; } OMG THAT IS SO MUCH BETTER!!!!!!!!!!!!!!!!!!!!!!!!!! Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted December 2, 2018 Share Posted December 2, 2018 I forgot about that change. Buried in Emby Dark Themes in different accent colors custom css. 1 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