Banner Competition Final

[Deleted]

OK got it. Had a momentary lapse in brain power and thought that it would set it to 70% of the image size rather than 70% of the monitor width. www.youtube.com/watch?v=Z0mIwd1hmKw

[Insane_Zang]

I liked it better with glow =P

[Deleted]

Yes, the new image seems to have a lower quality as well, I think I may switch back.

[Deleted]

Jun 16, 2010 14:45:19 GMT -5 newschooled said:

Blurry banner is blurry. Methinks the width is set to 70% instead of it's actual proper width in pixels of 1000px. (...Or atleast that's what firebug told me.)

Static images shouldn't be scaled by percent on a site. Makes 'em look like SHIRT.

I confirm the issue, I've tried removing the width property in firebug, and I don't see any problem with it. Actually, I think it looks better, as the letters line up with the limits of the content quite well.

I also think we shouldn't rely on 3rd party hosts for the images. Imageshack is problematic when too many people access the image in a relative short period of time. I'd suggest the image is hosted in proboards or where the stylesheets are hosted or in the original SPoTM domain (where the archives, wiki and chat are).

[Deleted]

I have noticed the image being slow to display properly occasionally. This might not be the final version of the banner so I will sort that out when we're definitely on the final version.

[Deleted]

Ok... userstyle/userscript layout time again!

Here is a userstyle that brings the wiki, chat and the archives in connection with the current skin in here! I'm not posting screenshots as they are unnecessary. You will need Stylish and Greasemonkey to install the CSS and JavaScript respectively. You can choose to install either the CSS, JavaScript or both and the styles/script will continue to function on their own.

So, here is the new CSS and JavaScript code. If you installed the previous userstyle/userscript remember to remove the old CSS/JavaScript before installing this one.

@namespace url(http://www.w3.org/1999/xhtml);

/* ### FORUM ### */
@-moz-document domain("pogotribe.proboards.com"),
url(http://southpoleofthemoon.com/chat.php) {

body > br, body > table:first-of-type { display: none; }
div[style="margin-top: -45px;"] img { width: auto !important; }
center div[style]:first-child { margin-top: 0 !important; }

.quote { font-family: Verdana,Arial, sans-serif !important; font-size: 13px !important; }
.quote > tbody > tr > td { padding: 1em !important; }
.code { font-family: "Andale Mono", "Lucida Console", "Courier New", monospace !important;
font-size: 12px !important; }

img { vertical-align: middle; }

}




/* ### CHAT ### */
@-moz-document url("http://southpoleofthemoon.com/chat.php"),
url("http://www.southpoleofthemoon.com/chat.php") {

.middle:first-child + .corners { margin-top: 200px !important; }
.logo {
background: url("http://img8.imageshack.us/img8/5540/dbubanner2.png") no-repeat center top !important;
margin: 0 0 0 -25px !important; padding: 0 !important; height: 200px !important; width: 1000px !important;
position: absolute; top: 0px !important;
}
img[src="http://karsonenns.com/southpole/arrow-down.gif"] { margin-left: .4em; }
div[style="padding: 5px;"] { padding: 5px 12px !important; }
.corners:last-child { margin-bottom: 1em !important; }

body:not(.mediawiki) #navigation li a { color: #000 !important; }
body:not(.mediawiki) #navigation li a:hover { color: #fff !important; }

}




/* ### WIKI ### */
@-moz-document url-prefix("http://southpoleofthemoon.com/wiki/"),
url-prefix("http://www.southpoleofthemoon.com/wiki/") {

body.mediawiki {
background: #000000 url("http://karsonenns.com/southpole/twitter-themoon.png") no-repeat !important;
font-family:Verdana, Geneva, sans-serif !important;
margin: 0px !important;
}

body.mediawiki > #globalWrapper {
background: #F2F2F2 !important; color: #3F3F3F !important; -moz-border-radius: 5px;
font: 12px Verdana,Geneva,sans-serif !important;
margin: 200px auto 0 !important; padding: 0 !important; width: 950px !important;
}

body.mediawiki #p-logo { position: absolute; margin: -200px 0 0 !important;
height: 200px !important; width: 950px !important; }

body.mediawiki #p-logo a {
background: url("http://img8.imageshack.us/img8/5540/dbubanner2.png") no-repeat center top !important;
display: block !important; margin: 0 0 0 -25px; height: 200px !important; width: 1000px !important;
}

body.mediawiki #content { margin-top: 2.7em !important; }

body.mediawiki #column-one, #column-content { position: relative !important; }
body.mediawiki #column-one { padding-top: 1.5em !important; }

body.mediawiki #footer { margin-bottom: 0 !important; }

}




/* ### ARCHIVE ### */
@-moz-document domain("southpoleofthemoon.com") {

/* Element Styling */
body:not(.mediawiki) {
background: #000000 url("http://karsonenns.com/southpole/twitter-themoon.png") no-repeat !important; color: #fff !important;
font-family:Verdana, Geneva, sans-serif !important; font-size: 12px !important;
}

body:not(.mediawiki) p { font-size: 1em !important; }
body:not(.mediawiki) a:link:not([style]), body:not(.mediawiki) a:visited:not([style]) { color: #4386CB !important; }

/* Titles */
h1, h2, h3, h4, h5, h6,
h1 a:not([style]), h2 a:not([style]), h3 a:not([style]), h4 a:not([style]), h5 a:not([style]), h6 a:not([style]) {
color: #2D2D2D !important;
}
body:not(.mediawiki) a.titles:not([style]) { color: #2D2D2D !important; font-size: inherit !important; }

/* Tables */
body:not(.mediawiki) .tbl-h-l, body:not(.mediawiki) .tbl-h-r, body:not(.mediawiki) .tbl-h-c {
background: #3F3F3F !important; color: #F1F1F1 !important; padding: 0 !important; }
body:not(.mediawiki) .tbl-h-l h4 { color: #F1F1F1 !important; padding-top: 0 !important; }
body:not(.mediawiki) .tbl-h-l a:link, body:not(.mediawiki) .tbl-h-l a:visited {
color: #F1F1F1 !important; }
body:not(.mediawiki) .tbl-f-l, body:not(.mediawiki) .tbl-f-r, body:not(.mediawiki) .tbl-f-c {
background: none !important; padding: 0 !important; }

body:not(.mediawiki) .cat { border: none !important; height: auto !important; }
body:not(.mediawiki) .cat-bottom { background: none !important; height: auto !important; display: none !important; }

body:not(.mediawiki) table { border: none !important; }
body:not(.mediawiki) table th, body:not(.mediawiki) table .nav {
background: #C9C9C9 !important; color: #2D2D2D !important; border: none !important; }
body:not(.mediawiki) table .row1, body:not(.mediawiki) table .row2,
body:not(.mediawiki) table .row3, body:not(.mediawiki) table .row4 {
background: #fff url("http://karsonenns.com/southpole/grey-up.png") repeat-x center bottom !important; color: #3F3F3F !important;
border: none !important;
}

/* Layout */
body:not(.mediawiki) > div:first-of-type[style] {
background-color: #F2F2F2 !important; color: #3F3F3F !important; -moz-border-radius: 5px;
margin: 200px auto 0 !important; padding: 0 !important; width: 950px !important;
}
body:not(.mediawiki) .leftshadow, body:not(.mediawiki) .rightshadow { display: none !important; }
body:not(.mediawiki) > div:first-of-type > table, .np-body { background: none !important; }
#wrapcentre { margin: 11px 11px 0 !important; position: relative; }

/* Logo */
body:not(.mediawiki) #top_logo { background: none !important; height: auto !important; position: absolute; top: 0; }
body:not(.mediawiki) #top_logo a {
background: url("http://img8.imageshack.us/img8/5540/dbubanner2.png") no-repeat center top !important;
height: 200px !important; width: 1000px !important; position: absolute; top: 0px !important; margin: 0 0 0 -27px !important;
}
#top_logo img { display: none; }

/* Navigation */
body:not(.mediawiki) .forum-buttons {
background: none !important; border: none !important;
font-size: 0 !important;
padding: 0 !important; height: auto !important;
}
body:not(.mediawiki) .forum-buttons > img { display: none; }
body:not(.mediawiki) .np-body .forum-buttons > a {
background: #fff !important; color: #000 !important; border: 1px solid #CACACA !important;
display: inline-block;
font-size: 11px !important; font-weight: bold !important;
margin: 10px 5px 15px 0 !important; padding: 5px 10px !important;
}
body:not(.mediawiki) .np-body .forum-buttons > a:hover { background: #c3c3c3 !important; color: #fff !important; }

/* Archive Notification */
#wrapcentre > .bc-tbl.bc-div:first-child {
background: #3F3F3F url("http://karsonenns.com/southpole/announcement.gif") no-repeat -5.5% 20% !important; color: #fff !important; border: none !important;
margin: 0 0 10px !important; padding: 10px !important;
}
#wrapcentre > .bc-tbl.bc-div:first-child .bc-header, #wrapcentre > .bc-tbl.bc-div:first-child .bc-links {
background: none !important; color: transparent !important; border: none !important; font-size: 0px !important; color:transparent !important; padding: 0 !important; margin: 0 0 0 175px !important;
}
#wrapcentre > .bc-tbl.bc-div:first-child .bc-header a, #wrapcentre > .bc-tbl.bc-div:first-child .bc-links a {
color: transparent !important;
}
#wrapcentre > .bc-tbl.bc-div:first-child .bc-header:after {
content: "Archive"; font-size: 20px !important; color: #4386CB !important;
}
#wrapcentre > .bc-tbl.bc-div:first-child .bc-links {
padding: 5px 0 !important; text-align: left !important;
}
#wrapcentre > .bc-tbl.bc-div:first-child .bc-links:before {
content: "You are not in the current forums anymore. This is an archive of the previous forums before they were moved to where you see them everyday. To go back to the current forums go to pogotribe.proboards.com .";
color: #fff !important; font-size: 12px !important; line-height: 16px !important; display: block !important; padding-bottom: 11px;
}
#wrapcentre > .bc-tbl.bc-div:first-child .bc-links:after {
content: "The archive's login forms are hidden, but if you need to login you can go to southpoleofthemoon.com/ucp.php?mode=login";
color: #fff !important; font-size: 12px !important; line-height: 16px !important; display: block !important;
border-top: 1px solid #808080; padding-top: 11px;
}

/* Footer */
body:not(.mediawiki) #bottom_logo_ext, body:not(.mediawiki) #bottom_logo {
background: none !important; border: none !important; }
body:not(.mediawiki) #bottom_logo br { display: none; }
body:not(.mediawiki) .copyright { font-size: 10px !important; display: block; padding: 10px !important; }
body:not(.mediawiki) > div > .copyright { color: #fff !important; }

/* Content */
.postbody { font-size: inherit !important; max-width: 750px !important; }
.postbody img { max-width: 100% !important; }

/* Front Page Hacks */
/* Remove the Login link and form */
body:not(.mediawiki) a[href^="./ucp.php?mode=login"],
body:not(.mediawiki) #statistics_nh ~ form[action^="./ucp.php?mode=login"] {
display: none !important; }

/* Fix Oversized Image */
body:not(.mediawiki) #f_24 { width: 0; height: 0; overflow: hidden !important; }
body:not(.mediawiki) #f_24 a[href="http://pogotribe.proboards.com"] img { width: 662px !important; }

body:not(.mediawiki) #f_24 a[href="http://pogotribe.proboards.com"] img { display: none; }
body:not(.mediawiki) #f_24 a[href="http://pogotribe.proboards.com"]:after {
content: "pogotribe.proboards.com";
color:white;
font-size: 12px; font-family: Verdana, Arial, sans-erif; text-decoration: underline;
position: absolute !important; top: 57px !important; left: 632px !important;
}

/* Other Hacks */
/* Forum / Thread listing with proper font-size */
.forumlink, .topictitle { font-size: 1em !important; }

}

JavaScript ( remove the [ url ] and [ /url ] tags for the script to work, proboards keeps adding them against my will):
// ==UserScript==
// @name           southpoleofthemoon.com - Replace Titles and Add Favicons
// @namespace      http://radicallyblue.blogspot.com/p/projects.html#script001
// @include        http://southpoleofthemoon.com/*
// @include        http://www.southpoleofthemoon.com/*
// @include        http://pogotribe.proboards.com/*
// @include        http://www.pogotribe.proboards.com/*
// ==/UserScript==

// Modify the title
var archive = new RegExp("(southpoleofthemoon.com/(?!chat\.php|wiki))", "i");
var forum = new RegExp("(pogotribe.proboards.com/)", "i");
var wiki = new RegExp("(southpoleofthemoon.com/wiki/)", "i");
var chat = new RegExp("(southpoleofthemoon.com/chat.php)", "i");

var topdomain = new RegExp( window.location.hostname + '/(|index.cgi|index.php)$', "i");

var title = document.getElementsByTagName("title")[0];
var str = title.text;

if ( forum.test(document.location.toString()) == true && topdomain.test(document.location.toString()) == true ) {
var newtitle = document.createTextNode( 'South Pole of The Moon • Welcome to our universe' );
} else if ( forum.test(document.location.toString()) == true ) {
var newtitle = document.createTextNode( str.split("PogoTribe - ", "2")[1] + ' • South Pole of The Moon' );
} else if ( archive.test(document.location.toString()) == true && topdomain.test(document.location.toString()) == true ) {
var newtitle = document.createTextNode( 'SPoTM Archive • Welcome to our universe' );
} else if ( archive.test(document.location.toString()) == true ) {
var newtitle = document.createTextNode( str.replace(" • ", "") + ' • SPoTM Archive' );
} else if ( wiki.test(document.location.toString()) == true && topdomain.test(document.location.toString()) == true ) {
var newtitle = document.createTextNode( 'SPoTM Wiki • Welcome to our universe' );
} else if ( wiki.test(document.location.toString()) == true ) {
var newtitle = document.createTextNode( str.split(" - ", "2")[0] + ' • SPoTM Wiki' );
} else if ( chat.test(document.location.toString()) == true ) {
var newtitle = document.createTextNode( 'Chat • South Pole of The Moon' );
}

if ( newtitle != undefined ) {
title.removeChild(title.firstChild);
title.appendChild(newtitle);
}

// Add a favicon
if ( archive.test(document.location.toString()) == true || wiki.test(document.location.toString()) == true  || chat.test(document.location.toString()) == true ) {
var head = document.getElementsByTagName('head')[0];

var link = document.createElement('link');

link.setAttribute('type', 'image/png');
link.setAttribute('rel', 'shortcut icon');
//link.setAttribute('href', 'http://img195.imageshack.us/img195/7189/dbufavicon.png');
link.setAttribute('href', 'http://i47.tinypic.com/6ofxpj.png');

head.appendChild(link);
}

If you would like to keep the smaller logo made by philosoraptor and used in my previous userstyles for the wiki, then you need to install this CSS as a separate userstyle too:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://southpoleofthemoon.com/wiki/"),
url-prefix("http://southpoleofthemoon.com/wiki/") {

body.mediawiki > #globalWrapper {
margin: 12px auto 0 !important;
}

body.mediawiki #content { margin-left: 155px !important; }
body.mediawiki #column-one { padding-top: 160px !important; }

body.mediawiki #p-logo { position: static; margin: 0 !important;
height: 155px !important; width: 155px !important; }

body.mediawiki #p-logo a {
background-image: url("http://img402.imageshack.us/img402/1226/spotmwikilogo.png") !important;
}

body.mediawiki #p-logo a {
background: url("http://img402.imageshack.us/img402/1226/spotmwikilogo.png") no-repeat center top !important;
margin: 0 !important; height: 155px !important; width: 155px !important;
}

.portlet:not(#p-personal) { width: 145px !important; }

}

[newschooled]

Wow, overkill much on posting all the code???

Thing is, all you have to do is just set the width from the percentage to the native resolution in the CSS. That's all.

The reason is that 70% on a small monitor will look fine. But not everyone on the internet has small monitor or low resolution settings. Hence, if you're viewing the page on a monitor that displays (for example) 2520px wide, the 1000px wide banner at 70% gets scaled to 700px, then to 1400 px. (Double it's native resolution) The end result: Banner looks like SHIRT.

Just set it in the CSS to display 1000x200 px (...or whatever the ACTUAL size is) and it'll be fine. Trust me.

[Deleted]

Jun 17, 2010 0:42:49 GMT -5 newschooled said:

Wow, overkill much on posting all the code???

Thing is, all you have to do is just set the width from the percentage to the native resolution in the CSS. That's all.

The reason is that 70% on a small monitor will look fine. But not everyone on the internet has small monitor or low resolution settings. Hence, if you're viewing the page on a monitor that displays (for example) 2520px wide, the 1000px wide banner at 70% gets scaled to 700px, then to 1400 px. (Double it's native resolution) The end result: Banner looks like SHIRT.

Just set it in the CSS to display 1000x200 px (...or whatever the ACTUAL size is) and it'll be fine. Trust me.

The code I posted is not only to give the banner a native size. It also tries to integrate the wiki and archives with the current look on the forum and tries to give them a nicer title (the one seen on the tab).

For anyone only trying to change the size of the image with Stylish, you can use this instead:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("pogotribe.proboards.com") {

div[style="margin-top: -45px;"] img {    width: auto !important; }

}

[snow11]

Congrats On the Win.

[NMS-Mix]

All of these are truly creative