Playing with the Forum CSS Thread [AKA Custom Forum Styles!]

41sp2sN47kL._SY300_.jpg


Code: 
http://ecx.images-amazon.com/images/I/41sp2sN47kL._SY300_.jpg
 
Razor Knight said:
I'm wondering, is there a code to have an image "stretch" to fit the window?

//inb4 "stretch" is the code and I kick myself.
Click to expand...
↓ Everest was already on it in his spoiler. He even left notes for what his code was doing within the code.
Everest said:
Code: 
/* The facebook button has it's own iframe w/ a body, don't wanna apply styles to that */
#XenForo > body {
  /* The image, don't repeat it */
  background: url('http://i.imgur.com/XNf2fqn.png') no-repeat;

  /* Stretch to fit the screen */
  background-size: 100% auto;

  /* Scroll with you; it's always in the same place in the background */
  background-attachment: fixed;

  /* The center of the background should be in the center of the window */
  background-position: center;
}
Click to expand...
 
Razor Knight said:
I'm wondering, is there a code to have an image "stretch" to fit the window?

//inb4 "stretch" is the code and I kick myself.
Click to expand...

I assume you're speaking of the background. In that case, this is what you're looking for:

Code: 
/* Stretch to fit the screen */
background-size: 100% auto;

That'll fill it horizontally (100%, full DOM size) and scale it vertically the same amount (auto) to compensate.

With that, you'll likely want to also make the center of the image show, as opposed to whatever's the default (top?)

Code: 
/* The center of the background should be in the center of the window */
background-position: center;

I also have a little advice, and this applies to everyone, but google some of the simple stuff. I can't be bothered to remember a ton of css names and tricks whenever I'm making something, so often I'll google it up (regardless of language, anything from CSS to C#, from JS to Lua, etc.). Usually, I'll find Mozilla dev or StackOverflow (SO = :passionate:). Google. Use it.
 
I decided to make it 100% fit vertically, because if I did it horizontally it would only show half the image. Anyhow...

terrariacustom03_zpscb06409c.jpg


May darken that purple background if it burns my eyes too much.
 
Sheldon Cooper said:
@CheatFreak47, I want a custom CSS Theme, can you handle that for me?
Click to expand...
Lp78mVy.jpg

Threw this together. It looks good with Jungle or Overworld themes set. Jungle is the one shown above.
Background Image is this for those curious.

userstyles.org link: Download for Stylish
Code: 
@-moz-document url-prefix("http://forums.terraria.org/") {
/*Full Username in Head Bar*/
.navTabs .navTab.account .navLink .accountUsername {
max-width: 250px!important;
}

/*Custom Theme*/
img[src*="logo.png"]{ content: url("http://i.imgur.com/Zo3hFYI.png"); }
body {
background: #040a00 url('http://i.imgur.com/QEiU8GU.png') no-repeat;
background-size: 100% auto;
}
}
 
Last edited:
I feel I may as well show off the very little that I've done for myself personally:

ZFRUVXy.png

Not much, definaitly work to be done, but I'll save said work for when I have nothing to do.

For those wondering, there's 3 images there. The first one is the grass itself, the second would be the grass image's background, and the third is my eevees. All three are just pngs converted to base64.

The grass images are straightforward: Just change `.grassBar` and `.grassBar::before`'s background-images accordingly.

As for the eevees, little more fun. I create a `#navigation::before` pseudo element (as with any `::before`, with `content: '';`). Then I just float it to the left (might not need that but I don't care to change it right now), and some positioning w/ a negative margin to make it go up. This results in the eevees behind the grass, which is also kinda nice.
 
Everest said:
I feel I may as well show off the very little that I've done for myself personally:

ZFRUVXy.png

Not much, definaitly work to be done, but I'll save said work for when I have nothing to do.

For those wondering, there's 3 images there. The first one is the grass itself, the second would be the grass image's background, and the third is my eevees. All three are just pngs converted to base64.

The grass images are straightforward: Just change `.grassBar` and `.grassBar::before`'s background-images accordingly.

As for the eevees, little more fun. I create a `#navigation::before` pseudo element (as with any `::before`, with `content: '';`). Then I just float it to the left (might not need that but I don't care to change it right now), and some positioning w/ a negative margin to make it go up. This results in the eevees behind the grass, which is also kinda nice.
Click to expand...
I think your theme would go nicely with this version of the logo:
YxmFFza.png
 
Razor Knight said:
I decided to make it 100% fit vertically, because if I did it horizontally it would only show half the image. Anyhow...

terrariacustom03_zpscb06409c.jpg


May darken that purple background if it burns my eyes too much.
Click to expand...

Could you be hassled to put that up on Userstyles? I'd like to check out the CSS myself and maybe borrow some bits for future custom themes.

Sheldon Cooper said:
Also, @CheatFreak47, you should create an art thread where people can request this.
Click to expand...
I don't know if that's really necessary, I'm perfectly content taking and filling requests for regular forum users (people with at least 100 posts) right here in this thread.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom