Last.fm dark theme

  • 0
  • 20
  • Article
  • Updated 3 years ago
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes

Posted 4 years ago

  • 0
  • 20
Photo of James Joul

James Joul

  • 983 Posts
  • 2018 Reply Likes
Neat 

Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Check also this script: https://userstyles.org/styles/118637/last-fm-cover-photo

You can choose your own cover photo.
Photo of SillyMusicLover

SillyMusicLover

  • 167 Posts
  • 500 Reply Likes
Pretty nice. Unfortunately, library still looks like sh*t. It's not your fault, of course. I guess nothing can help it.

PS Can you make something with "Remove" button at shoutbox? These design wizards made it the same size and font as message itself, so it looks like a part of a message. Maybe it is possible to move it to the right and/or make it smaller and/or change color. I don't know, anything to look different.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
1. "I guess nothing can help it". Maybe some Javascript code could improve it.

2. I changed the color of the Remove button.

3. You can customise that style even more if you know a bit of CSS.
(Edited)
Photo of SillyMusicLover

SillyMusicLover

  • 167 Posts
  • 500 Reply Likes
Unfortunately I don't. The last time I have customized a CSS was 12 years ago and it was trial and errors method.
Thank you for updating. I like it.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Making a custom style for a site is kind of the same (trial and errors method). It's all based on Inspect Element option from browsers. We don't have access to any documentation about the site itself.
Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
Awesome! I like your dark theme.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
I refined this style even more.
Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
I'm currently trying to modify SVG <rect class=" highcharts-background" fill="#FFFFFF" strokeWidth="0" height="400" width="872" y="0" x="0"></rect> but nothing, dunno how to properly change it in Stylish.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Do you want to modify a SVG? Why? What exactly do you want to achieve?
Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
i'm trying to change white background and grey bars

Photo of Christian Snow

Christian Snow

  • 14 Posts
  • 20 Reply Likes
You're awesome. Thanks! Please keep on making more improvements :)
Photo of Jorge Luque (guitarjorge24)

Jorge Luque (guitarjorge24)

  • 24 Posts
  • 14 Reply Likes
Beautiful! Hope you keep working on this!
The only problem I've found is that the background color for the settings (gear symbol) in the profile page is still white so the white/light grey font is impossible/hard to read. Here's a pic:
(Edited)
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
OK, I'll check that.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Fixed. (Plus many other small improvements.) Reinstall the script.
(Edited)
Photo of Alberto Balsalm

Alberto Balsalm

  • 18 Posts
  • 7 Reply Likes
Thank you! I really appreciate this. I much prefer the dark background.
Photo of Sam

Sam

  • 13 Posts
  • 41 Reply Likes
Thank you. No more bleeding eyes for meee.
Photo of Rolo Rojo

Rolo Rojo

  • 33 Posts
  • 28 Reply Likes
wow, thanks!
Photo of Cornel Diaconu

Cornel Diaconu

  • 831 Posts
  • 358 Reply Likes
Well... maybe my Firefox (40.0) from my Linux doesn't cope well with the style itself, or with the stylish plugin ?
Or maybe the style has some bugs ? :-)

OK, let me show you my screen with a certain song:
- the usual firefox window I keep most of the time (it is at 1084x764 pixels):


- and the same page when maximizing the window:



Well ... as you can see, if I don't keep the browser's window maximized on the screen, it even doesn't display the line with song's title !
And the band's name overlaps the picture.

The same happens in the homepage, with my user name !

Hmm.... any idea ?
Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
Known issue, here workaround fix: hold ctrl key on keyboard and scroll wheel down on mouse.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Unfortunately their new design works better only with bigger resolutions (because they made every element big). Anyway if you want only the dark theme without modifying the header (except square thumbnails), copy paste this code on your style file (go to Add-ons -> User Styles -> Last.fm dark theme -> Edit button).

http://pastebin.com/F9SQnhk5
(Edited)
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
I added the option to select Shrink Header off or on. No need for that trick anymore.
Photo of Bound2Fate

Bound2Fate

  • 103 Posts
  • 158 Reply Likes
Is there a way to keep the header? I like this script, but I would rather have the regular header instead of this gray box.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Yes. Just select Smaller from that dropdown menu at Header.

Anyway, you can add your own cover photo instead the gray box with this script: https://userstyles.org/styles/118637/last-fm-cover-photo
(Edited)
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Everyone that installed this script: re-install it. There are many improvements since the last update.
Photo of HammerTroll

HammerTroll

  • 12 Posts
  • 59 Reply Likes
On the front page it looks great. But when you enter your artist library, little album covers are gone. I wish they are here.
Photo of Jorge Luque (guitarjorge24)

Jorge Luque (guitarjorge24)

  • 24 Posts
  • 14 Reply Likes
I noticed this too. The artist images in the library are showing while still compacting the list. Maybe you could do the same for the album covers?
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
The problem is that many design elements on their site are interlinked. If I modify something it may look good on a particular page, but terrible on a different page. Because they used the same classes/ids on almost every page.

I edited the style locally so I can have album covers, but the lists aren't that compact anymore. I think I will add 2 options: compact lists without thumbnails or larger lists with thumbnails.
Photo of Jorge Luque (guitarjorge24)

Jorge Luque (guitarjorge24)

  • 24 Posts
  • 14 Reply Likes
To avoid affecting other pages maybe you could make changes that apply only to the contents of http://www.last.fm/user/guitarjorge24/library/albums ? Or is that what you meant by editing the style locally?
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
By editing the style locally I meant editing/testing the style in my browser.

Anyway, there are 2 main options:
1. a style script that works on all site's pages;
2. separate style scripts for special pages (e.g. Albums page from Library).

I'm trying to make one style that works on every page.
Photo of Jorge Luque (guitarjorge24)

Jorge Luque (guitarjorge24)

  • 24 Posts
  • 14 Reply Likes
I see, I would appreciate the option show thumbnails or not :)
Photo of Jorge Luque (guitarjorge24)

Jorge Luque (guitarjorge24)

  • 24 Posts
  • 14 Reply Likes
Thanks for the update! I found a similar issue on the home page. The strip of text under the artist/album/track has white background so the its hard to read the light grey font. Here's a pic:
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Fixed. Those white areas weren't modified yet.

Report any issue. This style is still work in progress.
(Edited)
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
I updated the script. I removed the thumbnails on the overall top artists from library (they were too small anyway). The list is much more compact: http://i.imgbox.com/XhYMvmAe.png

Previously the thumbnails from the top albums from library weren't displayed, but now they're back.

The downside is that the row elements with artist - title are larger than before (they're almost the same as they are originally on Last.fm).
Photo of garynotrashcoug

garynotrashcoug

  • 747 Posts
  • 745 Reply Likes
I like this a lot! Still doesn't work with older versions of Firefox though (breaks name, scrobbling since, etc.....). One of these days I'll upgrade.



I look forward to trying the Last.fm cover photo style! Just have to find the right pic now.
Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
Upgrading to new version of browser doesn't help you, I use newest Firefox 42 x64 alpha, and have same issue. So you must leave header: normal in theme options.
Photo of garynotrashcoug

garynotrashcoug

  • 747 Posts
  • 745 Reply Likes
Thanks for the tip Alex! Works great now, but I still get the same issue with Last.fm improved. Maybe the darker theme is supposed to replace it entirely? Anyway, looks great with a dark cover photo.

Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
Currently for Last.FM Improved, workaround fix: hold ctrl key on keyboard and scroll wheel down on mouse. Maybe Alin will make similar header option for improved version.
(Edited)
Photo of garynotrashcoug

garynotrashcoug

  • 747 Posts
  • 745 Reply Likes
Ah, much better. Thank you!
Photo of krisAxe

krisAxe

  • 32 Posts
  • 95 Reply Likes
Thank you for your amazing work Alin, i'm starting to slowly like my page again, please keep it up! Following this very closely
Photo of Dani H

Dani H

  • 15 Posts
  • 33 Reply Likes
Alin, thank you so much for creating this! It looks great, I actually like looking at my profile again!
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
@garynotrashcoug: "Still doesn't work with older versions of Firefox though (breaks name, scrobbling since, etc.....)."

The problem is that the header needs a lot of horizontal space. Maximize the browser.

@Alex_: "Maybe Alin will make similar header option for improved version". Yes.
Photo of holland25

holland25

  • 340 Posts
  • 427 Reply Likes
Looks awesome, but I'd rather remove the album pics from the tracks section (they are almost always wrong anyway) than the artist pics. Just a suggestion.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
The problem is that the tracks and the artists are displayed one under another, so they take the same vertical space with or without those album pics. By removing those album pics you gain just a bit of horizontal space.

http://i.imgur.com/QVtm65I.png
Photo of Jorge Luque (guitarjorge24)

Jorge Luque (guitarjorge24)

  • 24 Posts
  • 14 Reply Likes
In that case, could you make an option for showing the library track section with the artist next to (and not under) the track title and without thumbnails? like in "Last.fm improved"
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
I updated also the Last.fm improved style (now renamed to Last.fm light theme). You also have the option to keep the original header or to switch to a smaller header.

There are 3 styles now:
Light theme: https://userstyles.org/styles/114442/last-fm-light-theme
Dark theme: https://userstyles.org/styles/118652/last-fm-dark-theme
Cover photo: https://userstyles.org/styles/118637/last-fm-cover-photo

If you install the Dark theme don't forget to disable the Light theme and viceversa (of course if you have both installed). The Cover photo style works with both themes.
(Edited)
Photo of garynotrashcoug

garynotrashcoug

  • 747 Posts
  • 745 Reply Likes
Wow Alin, this is great! Thank you so much for your diligent work with userstyles. The improved light theme is great, too. I know some people prefer to zoom out 75%, but I like the way the page is and prefer not to. I have all your styles installed and just punch up one or the other, depending on my mood or whimsy. Now I just need to make a cover photo I like which doesn't class with the header text. Thank you for improving out Last.fm experience!
Photo of Bound2Fate

Bound2Fate

  • 103 Posts
  • 158 Reply Likes
Has the player bar at the top been removed from the smaller header? It was there yesterday, but it's gone now after I updated the script this morning.
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Yes, I removed it. It's a waste of space. If you want it back, select Normal header instead.
(Edited)
Photo of soupface

soupface

  • 34 Posts
  • 52 Reply Likes
Thank you so much! I no longer have to deal with an assault on my eyeballs switching from the Spotify window to the bright white of Last.fm. Thanks for your hard work!
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
Thanks, I appreciate it.
Photo of Maciek

Maciek

  • 8 Posts
  • 4 Reply Likes
This is cool man, keep it up.
Photo of Jorge Luque (guitarjorge24)

Jorge Luque (guitarjorge24)

  • 24 Posts
  • 14 Reply Likes
Here's some code I made for the new taste-o-meter (which you can see in other users' profile when you are logged in).  For some reason the code to change the fill color of the meter is not working on Stylish, but it works when I edit it directly on Firefox's Web Inspector

/*Followers Page*/

/*Taste-o-meter avatar (makes it round)*/
.tasteometer-avatar {
    top: 5px;
    left: 5px;
    width: 46px;
    height: 46px;
    border-radius: 50%!important;
  border: 1px solid #FF0000;
}

/*Base meter color*/
.tasteometer-donut-base {
    fill: #EBEBEB!important;
}
 
/*Low compatibility color*/
.tasteometer-compat-very_low .tasteometer-compat-colour {
    color: #666;
    fill: #666!important;
    font-weight: bold;
}
 
/* Super compatibility color*/ 
.tasteometer-compat-super .tasteometer-compat-colour {
    color: #B90000;
    fill: #B90000;
    font-weight: bold;
}
(Edited)
Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
Alin, Recent website update makes a little mess in header. I really like your dark theme. And if you don't mind... fix please. :)
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
I fixed it but without the smaller header part. Making the header smaller is too messy: now it looks quite good on the profile pages but terrible on library pages.
Photo of NurseSeppuku

NurseSeppuku

  • 13 Posts
  • 9 Reply Likes
Merci Alin. I was wearying of the snow blindness. Any thought to changing the text color a bit? I use the search box often and it would be helpful to confirm what is typed or pasted. Perhaps a darkish yellow? Anyway, thanks again! I understand it is a work in progress. Please keep it going!
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
"Any thought to changing the text color a bit?"

But you can change it on the script's Userstyles page.

"I use the search box often and it would be helpful to confirm what is typed or pasted. Perhaps a darkish yellow?"

Do you want to change the text color of the search field? Look on the script's code for .search-field and add this line inside the { }

color:#dddd00 !important;

Instead #dddd00 put whatever color you want.
Photo of Alex _

Alex _

  • 75 Posts
  • 46 Reply Likes
Thank you. ^_^
Photo of Alin

Alin

  • 165 Posts
  • 477 Reply Likes
I updated the theme so now it's working properly (I hope) again.