Thursday, February 16, 2012

None more black...

For those people who think that MySpace is still not gloomy enough...

I received a request from a friend (Hello Kitty!) asking if it would be possible to do an ALL BLACK version of the MySpace homepage.

Short answer: Yes, it would.
Longer answer: Please read on!

My starting point, naturally, was my "MBM 3.0" Stylish script, as I knew from previous experience that that one would adapt to several different versions of the MySpace homepage. At first it was just a matter of changing the colours. My own homepage currently sports a bright and sunny "Little Fluffy Clouds" theme, while the published versions of Minty Blue Minimalism look like the bottom of a swimming pool!

My friend wanted something a little more sombre.

Here's what the "work in progress" looked like a couple of days ago. This early version has a relatively plain "leather" textured tile as its background. Problem areas: there were one or two bits of text that stubbornly refused to change colour so that they would show up against the darker background. Particularly troublesome was the colour of the text in the Status Update entry box. Grey on Grey? That's like something that MySpace themselves would choose!


But a bit of surreptitious Cascading around in the Stylesheets allowed the fixes for these problems to reveal themselves unto me. Hooray for Firefox's new "DEVELOPER TOOLS"! I ended up with something that seemed to work 'across the board' on my own "UK ARTISTS" version of the homepage. As far as I can tell, I haven't caused anything to accidentally disappear this time. I hope I've learned my lesson!

The "goth" background wallpaper I chose came from this website - www.gothicwallpapers.net. As you can see, they have a lot to choose from, including some rather good HR GIGER themes that I know will appeal to some. But you are, of course, free to use whatever background picture or texture you find suitable.

Before I felt confident enough with my work to GO PUBLIC, I had to test it on other versions of the homepage, particularly the US 'civilian' one. Kitty was kind enough to let me log into her site so that I could test it 'OVER THERE'. Naturally, one or two MORE anomalies presented themselves. Some of the code that I'd written for the UK version didn't apply to the US page (and, subsequently, vice versa).

Here's the American homepage after it's had the DARK & GOTHIC treatment. It's nearly but not quite the same. I've shed that third column full of other people's music that's only there to appeal to the newbies (Over here in UK ArtistLand, we have a superfluous copy of the profile comments board instead).

Again, PLEASE PLEASE PLEASE tell me if this script makes things vanish elsewhere. I've been careful not to alter the "general" part of the script this time around, but I won't be running this script on my own site, so I rely on your feedback to tell me if I've made a huge tit of myself and messed things up royally (how's that for self-confidence?)

As before, copy and paste this lot into the "WRITE NEW STYLE" window of your Firefox's ADD-ONS MANAGER > USER STYLES interface and then save it under a suitable name. Fellow Tapheads will recognise the reference when I tell you that I called mine "NONE MORE BLACK". As usual, don't forget those last close-brackets! Have fun with it! Thanks and smooches to Mlle Kitty for the inspiration and the opportunity.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(www.myspace.com)
{
/* #####GENERAL: APPLIES TO ALL MYSPACE##### */
ul.streamViews,
ul.footertools {
display: none !important;
}
.section,
article.media,
#aside,
.commentContainer {
font-family:Arial!important;
font-size:12px!important;
color:#ffffff!important;
}
article.RecommendationsModule,
article.bestOfTheFixModule,
article.bulletinsModule,
article.manageMyStuffModule,
article.myVisitorsModule,
article.bandArtistDashboardModule,
article.upcomingShowsModule,
article.friendSpaceModule {
display: none !important;
}
/* #####ADDITIONAL AD REMOVAL##### */
div.labeled_ad,
ad_container.medrec2,
ad_container.adspecial1,
div#tkn_leaderboard,
article.googleAdSenseModule,
div.module.module3.columnModule1.even.RecommendationsModule.draggable,
div.marketing {
display: none !important;
}
/* #####LOGIN PAGE CLEANUP##### */
div.linksColumn,
article#module-2.module.module2.columnModule0.odd.InfoGraphicModule,
div.infographic,
div.splashMedia,
div.footershim,
div.musicColumn,
div.splashSignUp,
article#module-3.module.module3.columnModule0.odd.SignUpV2Module.draggable,
div.curatorsColumn,
div.topicsColumn {
display: none !important;
}
div.layout.group {
background: transparent!important;
}
/* #####UGLY BLACK FOOTER##### */
div.alertsRequests,
#pageFooter,
div.moduleFooter,
div.gracefulinjection,
div.shareButtonControl {
display: none !important;
}
nav.gearLinks {
float:left!important;
}
/* #####RECOMMENDATIONS ON ALL OTHER MYSPACE PAGES##### */
div.module.module4.columnModule1.even.RecommendationsModule.draggable {
display: none !important;
}
div.userActions {
float:right!important;
}
.msProfileTextLink {
font-weight:bold!important;
}
}

@-moz-document url-prefix('http://www.myspace.com/home')
{
/* #####ONLY APPLIES TO USER HOMEPAGE##### */
.userHome {
background: url("http://images2.alphacoders.com/172/172424.jpg")fixed top center !important;
}
.streamTabs,
div.sysMessage,
div.thread,
h3.moduleHead {
display:none!important;
}
section#col1_0,
section#col1_1 {
background:transparent!important;
}
section#col1_2 {
display:none!important;
}
.beam-home#row1.column0,
.beam-home#row1.column1 {
padding:0px!important;
}
form.group.attaching.attachstatus {
background:#888888!important;
padding:6px!important;
}
div.streamPlaceHolder,
div.streamPlaceHolder.forRightRail,
div.playitem,
div.todohead,
ul.todolist,
#promoView,
.musicStreamContainer {
display:none!important;
}
/* #####APPLIES TO UK ARTISTS HOMEPAGE##### */
div.ms-accordion-container,
div.accordion-title,
h3,
li.noactivity {
background-color:#888888!important;
border:0px!important;
opacity:.80!important;
}
span.msProfileLink {
background:transparent!important;
border-radius:0px!important;
padding-top:20px!important;
padding-bottom:10px!important;
box-shadow:none!important;
}
img.profileimagelink {
width:140px!important;
box-shadow:6px 6px 12px rgba(0,0,0,0.4)!important;
}
div.minimized,
textarea.status,
div.inputs {
background-color:#555555!important;
border-radius:0px!important;
}
textarea#spStatus.status,
.superShareContainer.attaching.status {
background-color:#222222!important;
color:#ffffff!important;
}
/* #####ALL(?) VERSIONS OF HOMEPAGE##### */
div.activityStreamModule {
width:700px!important;
background:#303030!important;
padding:20px!important;
border-radius:0px!important;
opacity:.90!important;
font-family:Arial!important;
font-size:12px!important;
color:#ffffff!important;
box-shadow:0 0 6px rgba(0,0,34,0.5)!important;
}
.msProfileLink.miniProfile {
padding-right:2px!important;
padding-left:2px!important;
background:transparent!important;
}
.commentContainer {
width:680px!important;
padding:10px!important;
background-color:#202020!important;
font-family:Arial!important;
font-size:12px!important;
color:#ffffff!important;
border-radius:0px!important;
box-shadow:0 0 12px rgba(0,0,34,1)!important;
}
div.peopleStrip.likeStripContainer.twocol,
div.group {
background:#444444!important;
border-radius:0px!important;
}
div.comment.expanded,
div.smartEdit {
background-color:#555555!important;
}
textarea#spStatus.status {
background:#555555!important;
font-color:#ffffff!important;
}
/* #####IMPORTANT!!! THIS SECTION DISABLED FOR US HOMEPAGE##### */
___div.streamCategories {
font-size:10px!important;
color:#ffffff!important;
background-color:#666666!important;
border-radius:0px!important;
position:relative!important;
left:610px!important;
}
/* #####FACEBOOK ADS & POPUPS##### */
div.glue-dialog.FBMP.large,
div.glue-overlay,
article.module.module6.columnModule2.odd.AdContainerModule.draggable,
article#module-6.module.module1.columnModule0.odd.adFbPromoModule.draggable,
li.recent,
.homeFooterModule {
display: none !important;
}
/* #####COLORIZE HYPERLINKS##### */
a,
a:link,
a:visited {
text-decoration:none!important;
color:#00bbee!important;
}
a:hover,
a:active {
color:#00ffff!important;
outline:0!important;
text-decoration:underline!important;
}
span.separator {
color:#00bbee!important;
font-size:20px!important;
}
/* #####FONT FIXES (THIS IS MAINLY FOR US VERSION)##### */
h4 {
display:none!important;
}
iframe,p,table,tr,th,td,li,ul,span,strong,
article,aside,footer,header,section {
font-family:Arial!important;
font-size:11px!important;
color:#ffffff!important;
}
}



1 comment:

  1. EXCELLENT WORK!
    NONE MORE BLACK AND THE HTML ANARCHISTS THANK YOU, PEDANTIC PEDESTRIAN, SAVIOUR OF THE MYSPACE-TOSSED-TO-HELL DESPERADOES.
    XXXOOOO

    ReplyDelete