Jump to content

Make watched indicator more square


Go to solution Solved by Happy2Play,

Recommended Posts

cochize1

So, I have changed count indicator to more square with this code

div.countIndicator, div.playedIndicator {
    transform: square;
    border-radius: 20%;
	background-color: #52B54B;
	border-style: double;
	border-color: #52B54B;
    border-width: 1px;
	height: 18px;
    width: 23px;
	}

How can I do the same with watched indicator with that tick because it stays round as default?

Link to post
Share on other sites
  • Solution
Happy2Play
16 minutes ago, cochize1 said:

How can I do the same with watched indicator with that tick because it stays round as default?

i.cardPlayedIndicator

actually just change div.playedIndicator to i.playedIndicator

Edited by Happy2Play
  • Like 1
Link to post
Share on other sites
cochize1

If I may ask, can you please teach me on how to target the exact piece of code, I mean, I kinda know how to inspect the code and 'copy' the selector but it just directs the exact path, i.e:

I have changed the Play button color and trailers color with this:

body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnResume.detailButton.detailButton-hidemobile.emby-button > div > i
{color: #52b54b!important;}
body > div.mainAnimatedPages.skinBody > div.itemView.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnPlayTrailer.detailButton.emby-button > div > i{color: #3396FF!important;}
{color: #3396FF !important;}

But how do you trim it just to get the right part so that it works?

Link to post
Share on other sites
PenkethBoy

the better way is to look at what H2P has posted then go back to the code and see where he has targeted and then experiment with small changes and see what happens - most of the time if you get it wrong the browser ignores it.

i dont copy the selector as you get what you have above - but follow the div trail down to the item i want to change then target it with the lowest level class name i can find

.classname .element {} etc or .classname, .classname etc etc 

Also some of what you are doing already exists in several css thread so you can search for it and modify it if not to your liking

It would be nice to have one thread just listing css tweaks - but it would have to be closely maintained as Luke cant keep things the same and keeps changing stuff just to make our life difficult for no real benefit.

css can be finiky to get right - i dont do it enough so have a hunt and peck approach that gets me there in the end

i think you need to get santa to give you a css book for xmas :)

  • Like 1
Link to post
Share on other sites
cochize1
2 minutes ago, PenkethBoy said:

i think you need to get santa to give you a css book for xmas 

I am afraid it's gonna be another pair of socks as every year, 

Thanks for the tips.

Link to post
Share on other sites
Happy2Play
3 minutes ago, cochize1 said:

If I may ask, can you please teach me on how to target the exact piece of code, I mean, I kinda know how to inspect the code and 'copy' the selector but it just directs the exact path, i.e:

I have changed the Play button color and trailers color with this:


body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnResume.detailButton.detailButton-hidemobile.emby-button > div > i
{color: #52b54b!important;}
body > div.mainAnimatedPages.skinBody > div.itemView.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnPlayTrailer.detailButton.emby-button > div > i{color: #3396FF!important;}
{color: #3396FF !important;}

But how do you trim it just to get the right part so that it works?

It really depends on how much targeting is needed if you only want that specific location or everywhere that element appears.

See some options to get same results

div.detailMainContainer div.mainDetailButtons button.btnResume i {color: #52b54b;}
div.detailMainContainer button.btnResume i {color: #52b54b;}
div.mainDetailButtons button.btnResume i {color: #52b54b;}
button.btnResume i {color: #52b54b;}

div.detailMainContainer div.mainDetailButtons button.btnPlayTrailer i {color: #3396FF;}
div.detailMainContainer button.btnPlayTrailer i {color: #3396FF;}
div.mainDetailButtons button.btnPlayTrailer i {color: #3396FF;}
button.btnPlayTrailer i {color: #3396FF;}

Or all the buttons in that location instead of targeted ones

div.mainDetailButtons button i

 

  • Like 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...