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

CheatFreak47

CheatFreak47

Official Terrarian
note: Mods if this is in the wrong section, please move it to the appropriate one, i figured it belonged here the best considering the subject matter involves some creativity in coding and web design.
NFPOdeF.jpg

Perhaps this will garner some attention:naughty:

This is a thread for discussing playing with the forum CSS locally for personal use.
If you don't know what CSS is, it's what allows websites to have rich user interfaces, and also what allows them to be interchangeable, as with this forum. If you'd like to play with some of the forum's CSS, you need some basic skills and knowledge of Web Design. Artistic Skill is also nice as well because custom themes need backgrounds! ;D

Generally, to modify the CSS of a website you don't own for personal use or preference, you need to use a browser extension like Stylish (see bottom of post for downloads). All code on this thread is to go into Spoiler tags and inside the spoiler should be code tags. Code can be lengthy and unsightly so please try to stick to that rule.

Google Chrome's Element Inspector is great for learning what parts of CSS to tweak.
Some minor quality of life improvements I've made with CSS tweaking thus far have been the following:
Code: 
.message .signature {
max-height: 1000px!important;
} /*Infinity Signiture*/

.navTabs .navTab.account .navLink .accountUsername {
max-width: 250px!important;
} /*Full Username in Head Bar*/
The first bit makes the cap on vertical signature display size 1000 pixels, allowing any given users' full signature to be displayed.
The second bit makes it so usernames wider than 100 pixels don't end up with an ellipsis (...) at the end, cap is at 200 pixels now.

Since it's the halloween season, i thought it would be neat to make a halloween theme using the corruption theme as a base. (It's what you see above :naughty:) I did this with only basic image editing in Gimp and a bit of looking into the forum CSS. The Background Image used is fanart by jake55778, and can be found here on the terraria subreddit. Thanks for the awesome art there Jake!

Here is the CSS i used to make it happen.:cool:
Code: 
.message .signature {
max-height: 1000px!important;
} /*Infinity Signiture*/
.navTabs .navTab.account .navLink .accountUsername {
max-width: 250px!important;
} /*Full Username in Head Bar*/
img[src*="logo.png"]{ content: url("http://i.imgur.com/JGKtgbb.png"); }
body {
background: #3d1247 url('http://i.imgur.com/YOxuHXY.jpg') no-repeat;
}
.grassBar::before {
background-image: url('http://i.imgur.com/1VWe2ye.png');
}
.navTabs {
background: rgb(107, 83, 71) url('http://i.imgur.com/mNcJV5S.jpg');
}
/*Custom Theme*/
While this is quite basic, i've done it with only minimal code digging and that's a nice result for the little amount of work done.
So if you guys have any experience in CSS, know that its quite easy to play with this forum and xenforo in general when it comes to style tweaking. Note that while this is basic, it is indeed possible to make much more intricate stuff, but that will require mode digging in the website's CSS.
This is a good place to post discoveries in the forum's CSS innerworkings and even show off your Stylish themes for the Terraria Forum!, so if you'd like to make any go right ahead and post em here, but be sure to host them on Userstyles!

If you guys would like to try the halloween theme, set your forum theme to the corruption, then download stylish for chrome or firefox and install this theme into it. :D

I'll be updating this post with more themes and such as I make them. I also take requests so if you have something in mind, let me know!
 
Last edited:
It happens sometimes with CSS. That's a known bug with Chrome and its derivates, others browsers are maybe concerned ?

Regarding custom CSS, my favorite rule is this one :p
Code: 
.message .signature {
   display: none;
}
 
darthmorf said:
Wow...
Cool stuff. I need to look into this, could make some really cool themes. Some of @Daimera 's stuff would work well.

I hope somebody else makes more themes too!
If you'd be kind enough, would you make a theme exactly the same as the underground one, except use this image for the background?
Click to expand...
Simplest css ever, just switch to underground and apply the following css to all pages (I suggest using an extension/add-on):

Code: 
body { background: url('http://i.imgur.com/XNf2fqn.png'); }
 
Everest said:
Simplest css ever, just switch to underground and apply the following css to all pages (I suggest using an extension/add-on):

Code: 
body { background: url('http://i.imgur.com/XNf2fqn.png'); }
Click to expand...
Yeah- but it doesn't look very good that way.
 
CheatFreak47 said:
Yeah- but it doesn't look very good that way.
Click to expand...
Agreed, but there's not much more to it that he described. Background is that image, everything else is underground.

If he wants the background to look nicer, he doesn't have to use that image nor does he have to use that exact css. He can obviously change it to not repeat, or be stretched to fit, or follow the screen, etc.

Again, I just supplied what he asked for, not necessarily the best that could be made of it.

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;
}
 
Last edited:
darthmorf said:
Wow...
Cool stuff. I need to look into this, could make some really cool themes. Some of @Daimera 's stuff would work well.

I hope somebody else makes more themes too!
If you'd be kind enough, would you make a theme exactly the same as the underground one, except use this image for the background?
Click to expand...
I did some playing about- and I found this too look coolest.
Enjoy darthmorf-
3z3qhlz.jpg

For some reason- userstyles isn't letting me submit it right now- so you'll have to wait a bit on that link.
Code: 
@-moz-document url-prefix("http://forums.terraria.org/") {
.message .signature {
max-height: 1000px!important;
} /*Infinity Signiture*/

.navTabs .navTab.account .navLink .accountUsername {
max-width: 250px!important;
} /*Full Username in Head Bar*/


img[src*="logo.png"]{ content: url("http://i.imgur.com/72uhLqh.png"); }
body {
background: #0a1e53 url('http://i.imgur.com/aDOecoy.png') no-repeat;
}

/*Custom Theme*/

}
}
 
As shown elsewhere:

TerrariaCustom02_zpsf41a6c42.jpg


I guessed the color tag "transparent" could be used, and I was right. Still need to find the codes for all parts of the forums - thus far only the nav bar, logo and profile posts are affected - most other listings and threads are unaffected.

Edit: Not sure if that would work for Firefox.
 
Still trying to get everything transparent'd.

May use a Terraria screencap as a theme for a while once I do that, just for the "yo dawg" value.
 
You must log in or register to reply here.
Back
Top Bottom