[WIP] Wyld's GoN (Stylish)

[Wyld]

Very much a work in progress (as in, I started screwing around with it today) but if you want to give it a test run and provide any ideas, comments, etc ..

http://userstyles.org/styles/69303/wyld-s-gon

Preview:


View full sized image

[PirateEggs]

What'd you use for the background? The code doesn't show it.

[Wyld]

What'd you use for the background? The code doesn't show it.

Of course the code shows it.

Code: Select all

background-image: url("http://i.imgur.com/KYlpp.png");

[Wyld]

Thoughts for future tweaks:

Make the blockquote used for multiple 'quotes' look a little nicer.
Check more pages on the site, make sure it all works right.
Editor tweaks.

[PirateEggs]

Of course the code shows it.

http://www.mediafire.com/i/?1g0hp36uirqf51f
I don't see it, did the style not update yet?

[Wyld]

Of course the code shows it.

http://www.mediafire.com/i/?1g0hp36uirqf51f
I don't see it, did the style not update yet?

I have no idea what you're doing. The background graphic was the very first element I altered ..

I have updated the code now, but that's to make multiple blockquotes more perty.


View full sized image

Here's the raw code so far (in Mozilla format):

Code: Select all

@-moz-document url-prefix("http://games.on.net/forums/viewtopic.php") {
.bg1 {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow:  0px 0px 3px 1px #CCC;
  box-shadow:  0px 0px 3px 1px #CCC;
  margin-top: 6px;
  margin-bottom: 6px;
}

.bg2 {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow:  0px 0px 3px 1px #CCC;
  box-shadow:  0px 0px 3px 1px #CCC;
  margin-top: 6px;
  margin-bottom: 6px;
}

div.buttons div a {
  padding: 0px;
  padding-left: 7px;
  padding-right: 7px;
}

div.buttons div a:hover {
  padding: 0px;
  padding-left: 7px;
  padding-right: 7px;
}

blockquote {
  margin: 1em;
  background-color: #DDE3DD;
  border: 1px solid #666;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow:  0px 0px 4px 0px rgba(33, 33, 33, 0.5);
  box-shadow:  0px 0px 4px 0px rgba(33, 33, 33, 0.5);
}

blockquote blockquote {
  background-color: #CCD2CC;
}


blockquote blockquote blockquote {
  background-color: #BBC1BB;
}

}

@-moz-document url-prefix("http://games.on.net/forums/") {
body {
  background-image: url("http://i.imgur.com/KYlpp.png");
  background-size: 1920px 256px;
}

.pagination span strong {
  color: white;
  background-color: #45AF48;
  border-color: #45AF48;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.pagination span a, .pagination span a:link, .pagination span a:visited a:active {
  border-color: #45AF48;
  color: #45AF48;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.pagination span a:hover {
  background-color: #45AF48;
  color: white;
}

li.mspace {
  box-shadow: none;
}

li.mspace_news {
  box-shadow: none;
  width: 742px;
}

p.post_tools a {
  padding: 5px 43px;
}

li.advertising {
  width: 0px;
}

.postprofile {
  width: 21%;
}

.panel {
  background-color: transparent;
}

ul.profile-icons li span {
  border: 1px solid #BBB;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow:  0px 0px 2px 1px #CCC;
  box-shadow:  0px 0px 2px 1px #CCC;
  text-transform: uppercase;
}

h2 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #3F3F3F;
  font-size: 2.4em;
  margin: 0.5em 0 0.5em 0;
  text-shadow: 0px 1px 4px #999;
  filter: dropshadow(color=#999, offx=0, offy=1);
}


}

[PirateEggs]

I simply clicked the 'Show Code' button, it must have been before the code had uploaded properly, it looks fixed now. Must have derped.
display: none; would probably be better than; width: 0px; in the li.advertising though.

I like it though.
It's nice and clean, could go for a little wider page.

[Wyld]

I was tempted to made it wider .. but there's already a wider one out there, and I don't mind the size of it as it is.

There are issues with display: none; but combined it with width: 0px; and that button bar looks nice again.

[oriXon]

Me likey

[exe3]

I'll install it later but those pictures sure look nicer. Maybe you could look at making all the different elements of the page more defined rather than a sea of similar greys. eg: different posts having no borders

[Wyld]

I'm actually tempted to try some more crazy ideas .. like, pushing the user block to the right side .. that sort of thing.

Bit of fun to experiment with at the very least.

[Cas Bitton]

I'm actually tempted to try some more crazy ideas .. like, pushing the user block to the right side .. that sort of thing.

Bit of fun to experiment with at the very least.

Would of made my life a lot easier if I just left them on the righthand side

[Wyld]

Would of made my life a lot easier if I just left them on the righthand side

Heh.

Personally, I prefer that sort of info on the right. When reading posts, it makes 'visual sense' to keep all the content on the left and auxiliary info on the right. At least I find that.

[Marius]

It's by far the best user mod of the forums so far.

[Wyld]

Hmmm.