Jump to content


Photo

Changing the default color (green)

css dashboard web client dashboard-ui check mark

  • Please log in to reply
9 replies to this topic

#1 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 189 posts
  • Local time: 09:44 AM
  • LocationCanada

Posted 14 December 2015 - 01:42 AM

Hi,

 

I am really new to CSS but I managed to get something I like (see dark & red theme attached image).

 

Can you actually change the green default color I see everywhere like those circles or check marks (see green circles attached image)? I don't know how to do it... I would like to get it in red. I checked the dashboard-ui folder but it seems that my solution isn't there.

 

Any help please?

Attached Files


Edited by benjidave, 14 December 2015 - 01:44 AM.


#2 primecut OFFLINE  

primecut

    Advanced Member

  • Members
  • 59 posts
  • Local time: 04:44 PM

Posted 14 December 2015 - 01:47 PM

I don't know of any central option to change the main color, so you probably have to change the color of everything manually via css:
 
/* Latest News Icon Color */
.blue.x-scope.paper-fab-0 {
background-color: #E81123 !important;
}


/* Playbutton Color */
.btnPlay.detailFloatingButton {
background-color: #E81123 !important;
}


/* Played Indicator Color */
.playedIndicator {
background-color: #E81123;
}

  • Ben Z likes this

#3 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 189 posts
  • Local time: 09:44 AM
  • LocationCanada

Posted 14 December 2015 - 02:40 PM

Wow, thanks alot! It' a good start. :)

 

I still have to change the circles from the recent activity section though.

 

I also tried to use the theme from this post : http://emby.media/co...ersion-3057815/

 

It doesn't seem to change the green from these rectangles (image 2). Do you know how?

 

Thanks again, really appreciated and great community.

Attached Files



#4 primecut OFFLINE  

primecut

    Advanced Member

  • Members
  • 59 posts
  • Local time: 04:44 PM

Posted 14 December 2015 - 03:11 PM

Last part now includes News & Activities Button

/* Emby Premiere Promo */
.block.x-scope.paper-button-0 {
background-color: #E81123 !important; 
}


/* Help Button */
.secondary.mini.x-scope.paper-button-0 {
background-color: #E81123 !important; 
}


/* Latest News & Activities Button */
.x-scope.paper-fab-0 {
background-color: #E81123 !important; 
}


#5 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 189 posts
  • Local time: 09:44 AM
  • LocationCanada

Posted 14 December 2015 - 04:07 PM

You're awesome, thank you.

 

This one doesn't work since it's still green.

/* Emby Premiere Promo */
.block.x-scope.paper-button-0 {
background-color: #E81123 !important; 
}

Any typo somewhere?

 

EDIT: It actually works... It changes a lot of blocks but not the one with Emby Premiere.


Edited by benjidave, 14 December 2015 - 04:20 PM.


#6 primecut OFFLINE  

primecut

    Advanced Member

  • Members
  • 59 posts
  • Local time: 04:44 PM

Posted 14 December 2015 - 04:56 PM

strange, definitely working for me. maybe someone with more knowledge in css can chime in, I'm just using what I could learn from other themes here.

 

Maybe this works?:

 

/* Emby Premiere Promo */
.block {
background-color: #E81123 !important; 
}


#7 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 189 posts
  • Local time: 09:44 AM
  • LocationCanada

Posted 14 December 2015 - 05:02 PM

Nop

 

But that's not a big deal i guess.



#8 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 189 posts
  • Local time: 09:44 AM
  • LocationCanada

Posted 14 December 2015 - 05:49 PM

Do you know by any chance if you can change the blue glow light (the panel where you log out) like the red one to the left side of the picture?

Attached Files



#9 primecut OFFLINE  

primecut

    Advanced Member

  • Members
  • 59 posts
  • Local time: 04:44 PM

Posted 14 December 2015 - 06:27 PM

I would assume it is possible but I have no clue how. Someone else will probably be able to help here



#10 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 189 posts
  • Local time: 09:44 AM
  • LocationCanada

Posted 15 December 2015 - 01:39 AM

I just found out a really useful trick. It sounds so basic but I'm noob at this and I don't hide it lol.

 

Just right click any element on the website and click inspect. You'll get everything needed.

 

Changing the Emby Premiere color did the trick with the following for me

a.btn.btnActionAccent {
background-color: #E81123;
}

Edited by benjidave, 15 December 2015 - 01:40 AM.

  • swhitmore likes this





Also tagged with one or more of these keywords: css, dashboard, web client, dashboard-ui, check mark

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users