Modified Wapsisquare.com CSS

Moderators: Bookworm, starkruzr, MrFireDragon, PrettyPrincess, Wapsi

Post Reply
User avatar
shadowinthelight
Posts: 2571
Joined: Mon Jul 30, 2012 11:49 pm
Location: Somewhere, TX
Contact:

Modified Wapsisquare.com CSS

Post by shadowinthelight »

While archive binging I was reminded that some of the older strips are actually wider than the page allows and as a result get scaled down to fit. To fix this I installed a Firefox add-on (also available for Chrome I think) called Stylish and spent all night hacking away at the CSS (and jamming out to Deathmøle) which was not easy considering I know nothing about CSS. :P It was pretty funny how it also affected the forums until I figured out the problem. The result was going from this:
Image to this: Image
If anyone wants to use this click on Stylish and select "Write a new style", then select "Blank style...". Paste in the following code and save.

Code: Select all

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

@-moz-document url-prefix("http://wapsisquare.com") {

body {
	background: url( 'http://wapsisquare.com/images/background.jpg' ) repeat;
	color: #333333;
	font-family: 'Arial' ,sans-serif;
}

#page-wide {
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #8E7865 url( 'http://wapsisquare.com/images/content-bg.jpg' ) no-repeat;
	border: 2px solid #000000;
/*	padding: 2px; */
	width: 1520px;
}

#page-wide-wrap {
	width: 1530px;
	padding: 5px;
	background: url( 'http://wapsisquare.com/images/bkg_01-small.png' ) repeat;
	border: solid 2px #000;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 0 auto;
}

.ie #page-wide-wrap {
	background: #8E7865 url( 'http://wapsisquare.com/images/content-bg.jpg' ) no-repeat;
}

.ie #page-wide {
	padding: 0;
	background: transparent;
	border: 0;
}

#header {
	background: transparent url( 'http://wapsisquare.com/images/header.png' ) top center no-repeat;
	width: 980px;
	height: 140px;
}

#monica-sitting {
	height: 122px;
	width: 104px;
	background: url( 'http://wapsisquare.com/images/monica-sitting.png' ) no-repeat;
	float: right;
	margin-right: 400px;
	margin-top: -103px;
}

#header h1, #header .description {
	display: none;
}

#text-4 {
	margin: 2px;
}

#content-wrapper {
	padding-top: 0;
}

#subcontent-wrapper {
	padding: 5px 0;
}

#menubar-wrapper {
	width: 860px;
	margin: 0 auto;
}

#menu, .menu a {
	text-transform: uppercase;
}

#comic-head {
	padding: 0;
}

#comic {
	float: left;
    margin: 0 auto;
    background: #fff;
	border: none;
	padding: 5px
	border: solid 1px #000;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.page .narrowcolumn, .attachment .narrowcolumn {
	width: 1300px;
}

#section-wrap {
	width: 1305px;
}

.page-id-1509 #pagewrap-right {
	width: 1495px;
}

.narrowcolumn {
	width: 980px;
}

.post-page-head {
	padding: 0;
}

.post, .post-comic, .post-page, .comment, #footer, body.attachment .type-attachment {
	background: #fff;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.post-page {
	padding-top: 5px;
}

.comment .comment {
	background: transparent;
}

#footer {
	width: 740px;
	margin: 0 auto;
	border: solid 1px #000;
	margin-bottom: 5px;
}

#sidebar-right {
	width: 310px;
	float: right;
}

#sidebar-right img {
	border: solid 1px #000;
}

#wp-calendar-wrap {
	margin: 0 0 10px 0;
}

#text-11 {
	margin: 3px 5px;
}

#text-15 {
	float: left;
	margin: -270px 0 0 -60px;
	z-index: 10;
}



#text-15 input, #wp-calendar-wrap {
	border: solid 1px #000;
}



.nav {
	display: none;
}



.gallery-image, .gallery-caption p {
	width: auto;
}







/* Pagination */



#wp-paginav {
	background: url( 'http://wapsisquare.com/images/menu.png' );
	text-align: left;
	border: 1px solid #000;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}



#paginav {
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	line-height: 25px;
	font-size: 13px;
	color: #fff;
	border-right: 1px solid #222;
}



#paginav .paginav-pages, #paginav .paginav-extend {
	padding: 0 15px 0 15px;
}



#paginav a {
	padding: 0px 10px 0 10px;
	display: block;
	color: #777;
	text-decoration: none;
}



#paginav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}



#paginav li {
	float: left;
}



#paginav li a {
	border-left: 1px solid #111;
	border-right: 1px solid #444;
	color: #eee;
}



#paginav .paginav-next, #paginav .paginav-previous {
	font-size: 20px;
}



#paginav .paginav-current, #paginav .current {
	padding: 0px 10px 0 10px;
	color: #fff;
	border-left: 1px solid #222;
	background: url( 'http://wapsisquare.com/images/menu.png' ) 0 -150px;
}



#paginav li:hover a {
	border-left: 1px solid #333;
	border-right: 1px solid #555;
	color: #fff;
	background: url( 'http://wapsisquare.com/images/menu.png' ) 0 -75px;
}



li .search-2 {
	margin-left: 10px;
}



h2, h2 a {
	color: #333333;
	font-family: 'trebuchet ms';
	font-size: 24px;
	font-weight: normal;
	letter-spacing: -1px;
	line-height: 24px;
	margin: 0;
	padding-bottom: 2px;
}



.entry {
	font-size: 13px;
	line-height: 1.45em;
}

#menubar-wrapper {
	-moz-border-radius: 10px 10px 10px 10px;
	background: url( "http://wapsisquare.com/images/menu.png" ) repeat scroll 0 0 transparent;
	border: 1px solid #000000;
	margin: 0 auto;
	width: 860px;
}

#menubar-wrapper {
	background: url( "http://wapsisquare.com/images/menu.png" ) repeat scroll 0 0 transparent;
	border-color: #000000;
	border-style: solid;
	border-width: 1px 1px 1px 0;
}

#menubar-wrapper {
	background: none repeat scroll 0 0 #000000;
	list-style: none outside none;
	text-align: left;
}


#menubar-wrapper {
	width: 860px;
}

/* THE MENU */

#menubar-wrapper {
	background: url( 'http://wapsisquare.com/images/menu.png' );
	border-width: 1px 1px 1px 0;
	border-style: solid;
	border-color: #000;
	height: 25px;
}



.menunav-rss {
	width: 25px;
	height: 25px;
	margin-right: 3px;
	padding: 0;
	display: inline-block;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
	background: url( 'http://wapsisquare.com/images/menu-nav.png' ) no-repeat;
}



.menunav-rss:hover {
	background: url( 'http://wapsisquare.com/images/menu-nav.png' ) 0 -25px no-repeat;
}



.menunav a:hover {
	background-color: Transparent;
}



.menunav-prev, .menunav-next {
	display: block;
	float: left;
}



.menunav-prev {
	margin: 0;
}



.menunav-prev a, .menunav-next a {
	width: 25px;
	height: 25px;
	display: inline-block;
	text-indent: -9999px;
	overflow: hidden;
	padding: 0;
}



.menunav-prev a {
	background: transparent url( 'http://wapsisquare.com/images/menu-nav.png' ) -25px 0 no-repeat;
}



.menunav-prev a:hover {
	background: transparent url( 'http://wapsisquare.com/images/menu-nav.png' ) -25px -25px no-repeat;
}



.menunav-next a {
	background: url( 'http://wapsisquare.com/images/menu-nav.png' ) -50px 0 no-repeat;
}



.menunav-next a:hover {
	background: transparent url( 'http://wapsisquare.com/images/menu-nav.png' ) -50px -25px no-repeat;
}





.menubar {
	border-right: 1px solid #aaa;
	margin-left: 15px;
}



.ie .menu {
	margin-left: auto;
}



.menu li a {
	border-left: 1px solid #555555;
	border-right: 1px solid #333333;
}



.menu ul li a {
	text-shadow: 2px 2px 4px #555;
}



.menu ul li ul li a {
	text-shadow: 2px 2px 4px #555;
	border: none;
}



.menu ul li a:link, .menubar ul li a:visited {
	text-shadow: 2px 2px 4px #555;
}





.menu ul li ul li a:link, .menu ul li ul li a:visited {
	text-shadow: 2px 2px 4px #555;
	border: none;
}



.menu ul li a.selected {
	/*CSS class that's dynamically added to the currently active menu items' LI A element*/
	background: Transparent;
	background: url( 'http://wapsisquare.com/images/menu.png' ) 0 -75px;
}



.menu ul li a:hover {
	background-color: Transparent; /*background of menu items during onmouseover (hover state)*/
	background: url( 'http://wapsisquare.com/images/menu.png' ) 0 -75px;
	border-left: 1px solid #8b160f;
	border-right: 1px solid #c28380;
}



.menu ul li ul li a.selected {
	background-image: none;
	background-color: #333;
}



.menu ul li ul li a:hover {
	background-image: none;
	background: #000;
}



#wp-paginav {
	background: url( 'http://wapsisquare.com/images/menu.png' );
	text-align: left;
	border: 1px solid #000;
}



#paginav {
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	line-height: 25px;
	font-size: 13px;
	border-right: 1px solid #aaa;
}



#paginav .paginav-pages, #paginav .paginav-extend {
	padding: 0 15px 0 15px;
}



#paginav a {
	padding: 0px 10px 0 10px;
	display: block;
	color: #000;
	text-decoration: none;
}



#paginav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}



#paginav li {
	float: left;
}



#paginav li a {
	border-left: 1px solid #aaa;
	border-right: 1px solid #ccc;
}



#paginav .paginav-next, #paginav .paginav-previous {
	font-size: 20px;
}



#paginav .paginav-current, #paginav .current {
	padding: 0px 10px 0 10px;
	color: #fff;
	border-left: 1px solid #aaa;
	background: url( 'http://wapsisquare.com/images/menu.png' ) 0 -150px;
}



#paginav li:hover a {
	border-left: 1px solid #8b160f;
	border-right: 1px solid #c28380;
	color: #fff;
	background: url( 'http://wapsisquare.com/images/menu.png' ) 0 -75px;
}



.comment-link {
	height: 25px;
	line-height: 20px;
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: right;
}



.comment-link a {
	color: #333;
	padding: 0 5px 0 0;
}



.comment-link a:hover {
	color: #800;
}



.comment-balloon {
	width: 30px;
	height: 25px;
	display: block;
	float: right;
	overflow: hidden;
	text-align: center;
	line-height: 16px;
	font-family: 'Georgia' , serif;
	font-size: 16px;
	font-weight: normal;
	background: url( 'http://wapsisquare.com/images/comment-balloon.png' ) no-repeat;
}



.comment-link a:hover .comment-balloon {
	color: #fff;
	background-position: 0 -25px;
}



.comment-balloon-empty {
	font-size: 20px;
	line-height: 30px;
}



.imagenav-wrap {
	width: 520px;
	margin: 0 auto;
}

#sidebar-right {
	padding: 0;
}

.type-post {
	margin-bottom: 10px;
}

}
If there are any strips which are too big and still get resized tell me so I can update the code as needed.

edit: already found a bigger strip and updated the code
Julie, about Wapsi Square wrote:Oh goodness yes. So much paranormal!

Image My deviantART and YouTube.
I'm done thinking for today! It's caused me enough trouble!
User avatar
Hansontoons
Posts: 998
Joined: Tue Jul 31, 2012 9:22 pm
Location: Houston, TX

Re: Modified Wapsisquare.com CSS

Post by Hansontoons »

Is it cheating to turn my tablet sideways to achieve the same effect? ;)

I work with wicked smart computer folks like you. I can design tools that survive running 25,000 feet down in an oil well but have no brains for what you did. And what brains I have left keep getting picked by all those youngling 'puter smarties!
User avatar
shadowinthelight
Posts: 2571
Joined: Mon Jul 30, 2012 11:49 pm
Location: Somewhere, TX
Contact:

Re: Modified Wapsisquare.com CSS

Post by shadowinthelight »

I wish it was as easy as turning the tablet sideways. :P This wouldn't be necessary if the site dynamically adjusted to the size of each strip but it is coded to fit the current strips which are uniformly 756 pixels wide. I just copied the site's original style.css file and went through a lot of trial and error to get this result. I still have little idea what the code does which is why the I didn't move the navigation controls like I really wanted to. Doing something that could adjust itself is way beyond my abilities and I don't fault Paul for not implementing it seeing as it is only a problem with the older pages. I also hang out in the forum of the guy who wrote the SNES emulator bsnes hoping to learn a thing or two by osmosis. Those guys are wicked smart computer folks.
Julie, about Wapsi Square wrote:Oh goodness yes. So much paranormal!

Image My deviantART and YouTube.
I'm done thinking for today! It's caused me enough trouble!
User avatar
Jabberwonky
Posts: 2963
Joined: Sun Aug 12, 2012 8:11 am
Location: Houston, Texas

Re: Modified Wapsisquare.com CSS

Post by Jabberwonky »

shadowinthelight wrote:Those guys are wicked smart computer folks.
'Wicked' smart? I thought you were in Dallas...
:P
"The price of perfection is prohibitive." - Anonymous
User avatar
Bookworm
Posts: 615
Joined: Sun Jul 29, 2012 11:59 pm
Location: Houston, TX
Contact:

Re: Modified Wapsisquare.com CSS

Post by Bookworm »

Jabberwonky wrote:
shadowinthelight wrote:Those guys are wicked smart computer folks.
'Wicked' smart? I thought you were in Dallas...
:P
Maybe he's been absorbing Boston by osmosis.
I'll get a life when it's proven and substantiated to be better than what I'm currently experiencing.
User avatar
Dave
Posts: 7584
Joined: Tue Jul 31, 2012 5:58 pm
Location: Mountain View, CA, USA

Re: Modified Wapsisquare.com CSS

Post by Dave »

Bookworm wrote:
Jabberwonky wrote:
shadowinthelight wrote:Those guys are wicked smart computer folks.
'Wicked' smart? I thought you were in Dallas...
:P
Maybe he's been absorbing Boston by osmosis.
Tsk. Artists working with pigments, oils, varnishes, or nasal dialects really should take proper precautions against osmosis.
User avatar
shadowinthelight
Posts: 2571
Joined: Mon Jul 30, 2012 11:49 pm
Location: Somewhere, TX
Contact:

Re: Modified Wapsisquare.com CSS

Post by shadowinthelight »

Meh, I was just reflecting Hansontoons's language back at him instead of direct quoting. #explainingthejoke #buzzkill
Julie, about Wapsi Square wrote:Oh goodness yes. So much paranormal!

Image My deviantART and YouTube.
I'm done thinking for today! It's caused me enough trouble!
Post Reply