arrbee99 1559 Posted October 29, 2020 Share Posted October 29, 2020 Am just wondering, this changes the basic colour scheme I use to blue - html:root { --theme-primary-color: #5d7e9b; --theme-accent-text-color: #5d7e9b; --theme-primary-color-lightened: #5d7e9b; --theme-icon-focus-background: rgba(120, 120, 120, 0.2); } but there's a few bits that get left as the old colour. So, is there any easy (repeat easy) way in css to set some kind of colour variable for these extra bits to point too so these extras don't have to be changed individually ? Merci. Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted October 29, 2020 Share Posted October 29, 2020 (edited) @arrbee99 Do you have specific examples? But it really depends on if the original code points to theme or not. Edited October 29, 2020 by Happy2Play Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted October 29, 2020 Author Share Posted October 29, 2020 Seems to be these - /* Playing Now Queue - Second Line of Album and Song Name to Blue */ h3.videoOsdTitle { color: #5d7e9b !important;} /*Change card progress indicator color*/ progress.playbackProgress::-webkit-progress-value, progress.playbackProgress::-moz-progress-bar {background-color:#5d7e9b;} /*Adjust Colour and Width of Current Time Indicator*/ div.guide-currentTimeIndicatorDot {width: 3px;} div.guide-currentTimeIndicatorDot {background: #5d7e9b;} /*Make Premiere New etc Blue*/ div.mediaInfoProgramAttribute.mediaInfoItem {background-color: #5d7e9b;} span.premiereTvProgram.guideProgramIndicator {background-color: #5d7e9b;} /*Make Scheduled Tasks Progress Bar Blue*/ div.taskProgressInner {background-color: #5d7e9b;} /*Running Task Percentage Colour*/ #divRunningTasks.paperList p span {color: #5d7e9b !important;} /*Up to Date Checkbox to Blue*/ #pUpToDate i {background-color: #5d7e9b !important;} /*Activity and Alerts to Blue*/ div.listItemImageContainer-round.defaultCardBackground {background-color: #5d7e9b !important;} /*Make Scheduled Tasks percentage Colour Blue*/ div.scheduledTaskPaperIconItem[data-status="Running"] span {color: #5d7e9b;} Might be possible that some where added before the stuff given in the first post and are redundant... Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted October 29, 2020 Share Posted October 29, 2020 (edited) Quick look most are controlled outside of Theme. 53 minutes ago, arrbee99 said: /* Playing Now Queue - Second Line of Album and Song Name to Blue */ h3.videoOsdTitle { color: #5d7e9b !important;} Depends if you want every secondary lines this color, add. --theme-body-secondary-text-color: #5d7e9b; You might want to look at all of the root values and pick and choose. But if you only want a specific element you will have to target. Edited October 29, 2020 by Happy2Play Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted October 29, 2020 Author Share Posted October 29, 2020 I will check that out, thanks, looks interesting. Also, so far, this seems to work - html:root { --myblue: #ff0000; } html:root { --theme-primary-color: var(--myblue); --theme-accent-text-color: var(--myblue); --theme-primary-color-lightened: var(--myblue); --theme-icon-focus-background: rgba(120, 120, 120, 0.2); } so can hopefully just change that one value on line 2 and it propagates. Still have to have that stuff in Post #3, far as I can see, so am having a go at changing #5d7e9b; to var(--myblue); wherever it occurs. Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted October 29, 2020 Share Posted October 29, 2020 2 minutes ago, arrbee99 said: Still have to have that stuff in Post #3, far as I can see, so am having a go at changing #5d7e9b; to var(--myblue); wherever it occurs. Yes as they have there own css or html styling, so all elements that are not using var(--theme-primary-color) will need changed as it is not targeted by root values. 1 Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted October 29, 2020 Author Share Posted October 29, 2020 Oh well. Such is life. Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted October 29, 2020 Author Share Posted October 29, 2020 Erm. Not really related, but this - changes the colour of the controls on the video player - div.videoOsdBottom-buttons.flex.align-items-center.flex-direction-row.focuscontainer-x.videoOsd-customFont {color: #A30000;} but I actually want to try drop shadows on those controls and this - div.videoOsdBottom-buttons.flex.align-items-center.flex-direction-row.focuscontainer-x.videoOsd-customFont {text-shadow: 2px 2px #000000;} doesn't work. Any thoughts please ? Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 29, 2020 Share Posted October 29, 2020 4 hours ago, arrbee99 said: Am just wondering, this changes the basic colour scheme I use to blue - html:root { --theme-primary-color: #5d7e9b; --theme-accent-text-color: #5d7e9b; --theme-primary-color-lightened: #5d7e9b; --theme-icon-focus-background: rgba(120, 120, 120, 0.2); } but there's a few bits that get left as the old colour. So, is there any easy (repeat easy) way in css to set some kind of colour variable for these extra bits to point too so these extras don't have to be changed individually ? Merci. curious is the root stuff just something you added to your custom css - did you copy it from somewhere or from a theme.css file? reason i ask is that there are a lot more --xxxx options in a theme.css which might get you closer to having only a few things to change and get all items picked up etc Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted October 29, 2020 Author Share Posted October 29, 2020 Happy2play is probably the person to ask, as he (or she ?) provided it in the first place. I put it in the custom css, though don't know where Happy got it from. Making the colour a variable makes life a bit easier. Sorry. As you know, my css 'skills' are largely confined to the cut and paste variety. Could have a look in the themes, not that I'd know what to look for. Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 29, 2020 Share Posted October 29, 2020 this is the current list from the top of the theme.css file you can see the path at the top embycore is just my root for a test install but system onwards is the same as your install some of the above colours i have changed for the dark theme from Lukes default i have as yet not experimented with changing all of them to see what happens but would be easy to do - just not had the time recently to play Note: i opened this in Visual Studio Code and get it to modify the file from one line to a more readable format Link to comment Share on other sites More sharing options...
arrbee99 1559 Posted October 29, 2020 Author Share Posted October 29, 2020 It is a bit easier on the eye like that. I've looked at that before, just can't remember what for. Anyway, if I look in say the dark-red theme, assuming there isn't more than one red used, it only gets mentioned 3 times, and those are the three mentioned in the css given above. 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