Jump to content


Photo

Custom CSS with Emby Web App


  • Please log in to reply
338 replies to this topic

#1 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 139859 posts
  • Local time: 10:48 PM

Posted 09 February 2015 - 09:09 PM

Hope you're enjoying it :) If you come up with something, why not post it here for us all to check out? Screenshots are welcome.


  • Abobader and Beardyname like this

#2 chef OFFLINE  

chef

    Advanced Member

  • Developers
  • 3994 posts
  • Local time: 10:48 PM
  • LocationPeterborough, Canada

Posted 09 February 2015 - 09:39 PM

Welldone luke the new server looks great!

Edited by chef, 09 February 2015 - 09:39 PM.

  • Luke likes this

#3 pritch33 OFFLINE  

pritch33

    Advanced Member

  • Members
  • 67 posts
  • Local time: 02:48 PM

Posted 09 February 2015 - 10:19 PM

+1 on it looks good. 



#4 jamvids OFFLINE  

jamvids

    Advanced Member

  • Alpha Testers
  • 276 posts
  • Local time: 04:48 AM
  • LocationLeeds, UK

Posted 11 February 2015 - 06:39 PM

Is there any help on this, I can follow css a little bit from some training years ago, just don't know what element does what i.e. h1 etc. I would like to learn a bit of code, this is a harmless way of getting the brain going. And who knows the artistic abomination I could come up with.



#5 Xzener OFFLINE  

Xzener

    Advanced Member

  • Super Testers
  • 3112 posts
  • Local time: 08:48 PM
  • LocationLemoore, CA

Posted 13 February 2015 - 02:54 AM

Was hoping to to a cool thread with everyone's new design pics... Guess its too difficult for the average user.
  • CashMoney likes this

#6 CashMoney OFFLINE  

CashMoney

    Advanced Member

  • Members
  • 251 posts
  • Local time: 03:48 AM
  • LocationEngland, UK

Posted 13 February 2015 - 12:48 PM

Anyone wanting to play around with CSS on the fly, you can try firebug for firefox and chrome -

 

Chrome

http://getfirebug.co...es/lite/chrome/

 

Firefox

http://getfirebug.com/whatisfirebug



#7 CashMoney OFFLINE  

CashMoney

    Advanced Member

  • Members
  • 251 posts
  • Local time: 03:48 AM
  • LocationEngland, UK

Posted 13 February 2015 - 01:12 PM

Changing Fonts

 

A simple one to get some folks started. You can adjust the fonts the WebUI uses. Currently by default this is -

body {
    font-family: Roboto,Arial,Helvetica,sans-serif;
} 

You could delete the "Roboto" and change your font to Arial, or change it for any other font you have available. You could even import fonts available on the web.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
}

Here I've imported the Open Sans font from google fonts.


  • MrWebsmith likes this

#8 strager OFFLINE  

strager

    Advanced Member

  • Members
  • 123 posts
  • Local time: 03:48 AM

Posted 17 February 2015 - 01:45 AM

This one is still a bit buggy (especially on the login screen) - it replaces "Mediabrowser" with your own custom site name next to the Hamburger in the upper left. It also shifts the search over slightly to allow for slightly longer names.

 

.logoLibraryMenuButtonText {
  position: absolute;
  visibility: hidden;
}


.logoLibraryMenuButtonText:before {
  font-family: "Times New Roman", Times, serif;
  content: "SiteName";
  visibility: visible;
}




.headerSearchInput {


 position:relative;
 right:-80px;
}


.searchInputIcon {
 position:absolute;
 left:85px;
}

  • mediacowboy, Hille and Florux like this

#9 bigjohn OFFLINE  

bigjohn

    Edge Case

  • Administrators
  • 972 posts
  • Local time: 09:48 PM
  • LocationArkansas, USA

Posted 17 February 2015 - 02:45 PM

Some changes I have implemented on my server, just tweaks to the existing interface. Haven't tested on multiple browsers or screen sizes, just made it work for me.

/*Lighten backdrop 'cover' so image can be seen */
.backdropPage.ui-page-theme-b:not(.lightBackdropPage) {
  background-color: rgba(20,20,20,.88) !important;
}

/*Change 'Played' icon background to red for better visual separation */
.ui-icon-check.ui-btn-icon-notext {
  display: block;
  position: absolute;
  top: -1px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  height: 20px;
  padding-top: 3px;
  border-radius: 50%;
  color: #fff;
  background: rgb(153,0,0);
}

/*Remove 'Missing Trailer' icon in metadata editor, I don't use trailers*/
img[src='css/images/editor/missingtrailer.png'] {
  display:none;
}

/*Enable vertical scrolling on the custom css text box*/
#txtCustomCss{
  overflow-y:scroll;
}

  • Latchmor, adamb and Baenwort like this

#10 Latchmor OFFLINE  

Latchmor

    Advanced Member

  • Moderators
  • 1600 posts
  • Local time: 03:48 AM
  • LocationScotland

Posted 17 February 2015 - 03:00 PM

/*Enable vertical scrolling on the custom css text box*/
#txtCustomCss{
  overflow-y:scroll;
}

 

Custom CSS for the Custom CSS box, love it.  ;)


Edited by Latchmor, 17 February 2015 - 03:03 PM.

  • snazy2000, bigjohn and drashna like this

#11 Koleckai Silvestri OFFLINE  

Koleckai Silvestri

    Advanced Member

  • Alpha Testers
  • 3735 posts
  • Local time: 08:48 PM

Posted 17 February 2015 - 03:49 PM

Nothing fancy but may help people explore.

 

Remove Blue Edit buttons:

.accentButton {display: none;}

 

Larger thumbnails:

@Media (min-width: 1400px){.backdropCard {width: 25%;} !important}

 

Remove margins around cards/thumbnails:

.cardBox {
margin: 0px;
}

  • bigjohn likes this

#12 bigjohn OFFLINE  

bigjohn

    Edge Case

  • Administrators
  • 972 posts
  • Local time: 09:48 PM
  • LocationArkansas, USA

Posted 17 February 2015 - 04:26 PM

I used some of shaefurr's Disparity images for my user view and collection folder primary images, but they needed some separation from the background:

 

54e3a3309811b_normal.jpg

 

 

So I added this snippet to the custom css, matching the blue to some of the blue in the Disparity collection:

/*Blue border and glow for userview cards */
div[data-itemtype="CollectionFolder"] .cardContent,
div[data-itemtype="UserView"] .cardContent,
div[data-itemtype="PlaylistsFolder"] .cardContent{
  border: 1px solid rgba(0,94,243,.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
}

Which results in this:

 

54e3a3c2d77f0_blueglow.jpg


  • swhitmore, Abobader, crashkelly and 4 others like this

#13 ebr OFFLINE  

ebr

    Chief Bottle Washer

  • Administrators
  • 47472 posts
  • Local time: 10:48 PM

Posted 17 February 2015 - 05:18 PM

Nice, John.  That really helps.



#14 mediacowboy OFFLINE  

mediacowboy

    Advanced Member

  • Alpha Testers
  • 1825 posts
  • Local time: 10:48 PM
  • LocationTexas, United States

Posted 18 February 2015 - 09:45 AM

@bigjohn, Thank you for the blue glow. I add it and some tweaking to the "My Views (buttons)" and came up with this.

 

54e49718d4d84_Capture.png

 

Follows is the CSS: 

 

.myLibraryPosterItem .posterItemImage{
background-color: #111;
border: 1px solid rgba(0,94,243,.5);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
}

Edited by mediacowboy, 18 February 2015 - 09:46 AM.

  • bigjohn and mybackup681 like this

#15 GugZi OFFLINE  

GugZi

    Newbie

  • Members
  • 9 posts
  • Local time: 03:48 AM

Posted 18 February 2015 - 02:58 PM

http://codepen.io/Gr.../details/Axylr/

 

a idea for hover thumbs. i can't code css, so ur guys mabye can.



#16 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 139859 posts
  • Local time: 10:48 PM

Posted 21 February 2015 - 08:09 PM

by the way in case you guys don't realize, this feature even works when your users connect to your server via the hosted web client. it pulls down the css and loads it dynamically.


  • Florux likes this

#17 jwill OFFLINE  

jwill

    Advanced Member

  • Members
  • 192 posts
  • Local time: 08:48 PM

Posted 24 February 2015 - 02:07 PM

Can the custom CSS feature be used to darken all the Dashboard backgrounds?

I like the dark backgrounds of the metadata manager and the web client, but the white background of the Dashboard is way too bright. I don't know much about CSS, so if it is possible, an example or two would be nice.

I'm looking for something like this (except I would also like the top bar darkened). This is how the Dashboard looks in Chrome with the "Hacker Vision" extension enabled.

Qw1glys.png
  • GugZi likes this

#18 techywarrior OFFLINE  

techywarrior

    Advanced Member

  • Members
  • 2408 posts
  • Local time: 07:48 PM

Posted 24 February 2015 - 02:55 PM

Depending on exactly what you want (it's hard to tell from a screenshot that has other changes to it) it would be something like this:

.ui-page-theme-a .content-secondary {
background: #000;
}
.ui-page-theme-a .selectedSidebarLink {
    background: #666 !important;
}
#dashboardPage .ui-content {
background: #333;
}
.ui-page-theme-a .selectedSidebarLink .sidebarLink,
#dashboardPage .pageTitle,
#dashboardPage .ui-overlay-a, 
#dashboardPage .ui-page-theme-a, 
#dashboardPage  .ui-page-theme-a .ui-panel-wrapper {
color: #fff;
}

That's just a start I did quick without actually testing but see how that works for you.



#19 jwill OFFLINE  

jwill

    Advanced Member

  • Members
  • 192 posts
  • Local time: 08:48 PM

Posted 24 February 2015 - 03:42 PM

That darkened the sidebar (and left the top bar dark), but most of the main frames are still white or very light. For example:

RzUf1Pd.png

#20 techywarrior OFFLINE  

techywarrior

    Advanced Member

  • Members
  • 2408 posts
  • Local time: 07:48 PM

Posted 24 February 2015 - 04:00 PM

Do you want EVERYTHING dark? There is going to be little contrast in those interior boxes. I wonder why it didn't take the text color and the background color I set there. I guess I'll actually need to apply it and see what is going on.

 

Here, I used the ID of a specific dashboard page instead of the general one.

.ui-page-theme-a .content-secondary {
background: #000;
}
.ui-page-theme-a .selectedSidebarLink {
    background: #666 !important;
}
.dashboardDocument .ui-content {
background: #333;
}
.dashboardDocument .sidebarLink,
.dashboardDocument .pageTitle,
.dashboardDocument .ui-overlay-a, 
.dashboardDocument .ui-page-theme-a, 
.dashboardDocument  .ui-page-theme-a .ui-panel-wrapper {
color: #fff;
}
.dashboardDocument .sidebarLink:hover span.sidebarLinkText {
color: #333;
}

Edited by techywarrior, 24 February 2015 - 04:07 PM.

  • Baenwort likes this




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users