Amarok/Archives/CSSStyles

Want to make the Amarok context menu look sexy? Well, using the new CSS styles, you're now able to do that!

Setting your CSS style in Amarok

Open "Configure Amarok":

Settings->Configure Amarok... in the menu bar, or

Menu->Configure Amarok...

Select "Appearance" on the left hand side, then, under "Context Browser Style", you can choose an existing style or install a new one.

Dissecting the Style Sheet

Styles to Note

body {} : Context Side Bar Background (Appears in Music, Lyrics, and Artist Tabs)
a {}: Generic Links
.button : Button for the lyrics box, and probably various others. For example, for a song without lyrics, it gives you "add lyrics".

Context Specific Styles

Here, you'll find styles that deal with a particular item within the Context Side Bar.

Generic Styles

Box Styles
.box {}
.box:hover {}
.box-body {}
.box-header {}

MUSIC Context Tab

These CSS Identifiers apply to the objects within the Music Context Bar."

Current Information

This is the top box that appears when music is playing.
It will show information about the currently playing song.

Top Box
 #current_box {}
 #current_box-body { }
 #current_box-header { }
 #current_box-header-album { }
 #current_box-header-artist { }
 #current_box-header-nav { }
 #current_box-header-prettytitle { }
 #current_box-header-separator { }
 #current_box-header-songname { }
 #current_box-header-stream { }
 #current_box-information-td { }
 #current_box-largecover-a { }
 #current_box-largecover-image { }
 #current_box-largecover-td { }
 #current_box-table { }
Music Brainz
 #musicbrainz-a { }
 #musicbrainz-div { }
 #musicbrainz-image { }

Favorites Box

This is the middle box that appears when music is playing.
It typically heads with "Favorite Tracks by..."

Middle Box
 #favorites_box-body { }
 #favoritesby-header { }
 #favoritesby_box {}
 #favoritesby_box-header-title { }
Song Links
 .song a { }
 .song a:hover { }
Stats Box
 .statsBox { }
 .sbtext { }
 .sbouter { }
 .sbinner { }

Albums Box

These styles apply to the boxes heading "Albums by...", "Your Newest Albums" and "Favorite Albums"

Bottom Box
 #albums_box {}
 #albums_box-body { } same as .album-body
 #albums_box-header { } same as .album-header
 #albums_box-header-title { }
 .album-body {} album song list container
 .album-header {} collapsible album bar container
Collapsible Album bar
 .album-image {} Album PICTURE
 .album-info {} Number of TRACKS in Album
 .album-title { } Album TITLE
 .album-length {} Album PLAY TIME
 .album-year { } Album YEAR
Album Songs
 .album-song {} Song ROW
 .album-song-trackno { } Song TRACK NUMBER
 .album-song-title { } Song TITLE
 .album-song-time { } Song TIME

LYRICS Context Tab

Lyrics Box
 #lyrics_box {}
 #lyrics_box-body { }
 #lyrics_box-header { }
 #lyrics_box-header-title { }
 .button {}

ARTIST Context Tab

Wiki Box
 #wiki_box { }
 #wiki_box-body { }
 #wiki_box-header { }
 #wiki_box-header-title { }

Known CSS identifiers in Amarok (status: 1.4)

Classes used:

 .album-body { }
 .album-header { }
 .album-image { }
 .album-info { }
 .album-length { }
 .album-song { }
 .album-song-time { }
 .album-song-title { }
 .album-song-trackno { }
 .album-title { }
 .album-year { }
 .box { }
 .box-body { }
 .box-header { }
 .box-header-nav { }
 .box-header-prettytitle { }
 .box-header-title { }
 .box-row { }
 .button { }
 .disc-separator { }
 .info { }
 .ratingBox { }
 .ratingStar { }
 .sbinner { }
 .sbouter { }
 .sbtext { }
 .scoreBox { }
 .song { }
 .song-separator { }
 .statsBox { }

Amarok SVN/Amarok 1.4.5 The following classes are used in the tag editor

 .label { }
 .size1 { }
 .size2 { }
 .size3 { }
 .size4 { }
 .size5 { }
 .size6 { }
 .size7 { }
 .size8 { }
 .size9 { }
 .size10 { }

ID's Used:

 #albums_box { }
 #albums_box-body { }
 #albums_box-header { }
 #albums_box-header-title { }
 #artist-back-a { }
 #artist-google { }
 #artist-wikipedia { }
 #building_box { }
 #building_box-body { }
 #building_box-header { }
 #building_box-header-title { }
 #context { }
 #cue_box { }
 #cue_box-body { }
 #cue_box-header { }
 #cue_box-header-title { }
 #current_box { }
 #current_box-body { }
 #current_box-header { }
 #current_box-header-album { }
 #current_box-header-artist { }
 #current_box-header-nav { }
 #current_box-header-prettytitle { }
 #current_box-header-separator { }
 #current_box-header-songname { }
 #current_box-header-stream { }
 #current_box-information-td { }
 #current_box-largecover-a { }
 #current_box-largecover-image { }
 #current_box-largecover-td { }
 #current_box-table { }
 #favorites_box-body { }
 #favoritesby-header { }
 #favoritesby_box { }
 #favoritesby_box-header-title { }
 #introduction_box { }
 #introduction_box-body { }
 #introduction_box-header { }
 #introduction_box-header-title { }
 #least_box { }
 #least_box-body { }
 #least_box-header { }
 #least_box-header-title { }
 #lyrics_box { }
 #lyrics_box-body { }
 #lyrics_box-header { }
 #lyrics_box-header-title { }
 #musicbrainz-a { }
 #musicbrainz-div { }
 #musicbrainz-image { }
 #notindb_box { }
 #notindb_box-body { }
 #notindb_box-header { }
 #notindb_box-header-title { }
 #related_box { }
 #related_box-header { }
 #related_box-header-title { }
 #stream-history_box { }
 #stream-history_box-body { }
 #stream-history_box-header { }
 #suggested_box { }
 #suggested_box-header { }
 #suggested_box-header-title { }
 #wiki_box { }
 #wiki_box-body { }
 #wiki_box-header { }
 #wiki_box-header-title { }