[Google Chrome] How to make a custom forum theme

Have you made something awesome using this?

  • Yes!

  • No.

Results are only viewable after voting.
darthmorf

darthmorf

Treederator
Staff member
Moderator
Hopefully this is the right section...
Hello there! Today, I will be teaching you how to make your own custom forum theme!

I'd like to say thanks to @CheatFreak47 for making me realise that this is possible.

First of all you must install Stylish for google chrome.

Once it's installed, you should see a small 'S' icon in the top right of google chrome. Click it, then click 'Manage installed styles' it should open up a new tab. On the left, click 'Write new style'.

upload_2015-3-28_12-49-32.png


Make sure to enter a name for the style, and tick the 'Enabled' box.

upload_2015-3-28_13-34-34.png


Next, click 'specify' next to everything.

upload_2015-3-28_13-35-37.png


Enter this is the boxes. This is what tells it which website to use it on.


Now, I'll teach you a little basic CSS.

body {
background: #000000 url('http://i.imgur.com/IrThXS5.jpg') no-repeat;
background-attachment: fixed;
background-position: center;
font-family: Andy MT
background-size: 100% auto;
}


So, this bit you can see it editing the main body in the forum, using the class 'body.' It is setting the background colour to #000000 (Which is black). After that, it is setting the background image url to a custom image, hosted on imgur. After that, it's making it so that as you scroll the image stays in the same place. It's also positioning it to be located in the center, and setting the font to Andy MT. Next it is making the image 100% sized. For each class, you can add or delete any of these lines, and replace the url with any image of your choice.

In the /* text here */ section I have written something telling you what bit of the forum this corresponds to. So, now paste this code into the main box, and change all the urls into what you want them to be! Have fun making your custom themes, and post their results below!

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

img[src*="logo.png"]{
   content: url("http://forums.terraria.org/styles/underground/relogic/logo.png");
} /*forum logo*/

body {
   cursor: url('http://i.imgur.com/7YbDX.png'), auto; /*Cursor Url*/
    background: #000000 url('http://i.imgur.com/IrThXS5.jpg') no-repeat;
    background-attachment: fixed;
    background-position: center;
    font-family:  Andy MT;
    font-size:  1em;
    background-size: 100% auto;
} /*main background of the forum*/

.navTabs .visitorTabs {
    background-image: url('http://megahdwall.com/wp-content/uploads/2014/06/Red-Stars-Full-Hd-Space-Blue-635630.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
} /*Alerts toolbar*/

.grassBar::before {
     background-image: url(' ') transparent;
    font-family:  Andy MT;
    font-size:  2em;
} /*Grass bar at top*/

.navTabs {
    background-image: url('http://fc08.deviantart.net/fs71/i/2013/061/4/8/starry_sky_by_shironiji-d5wq8no.jpg');
    font-family:  Andy MT;
    font-size:  1.5em;
} /*Stuff underneath grass bar at top*/

.navTabs .navTab.selected .tabLinks {
    background-image: url('http://napwebdesign.com/wp-content/gallery/space/Space_Ios_7_outer_space_stars_wallpaper_043425_.jpg');
} /*bar under search bar*/

.titleBar {
     background-image: url('http://fc08.deviantart.net/fs71/i/2013/061/4/8/starry_sky_by_shironiji-d5wq8no.jpg');
} /*title section exterior*/
 
.breadBoxTop {
     background-image: url('http://napwebdesign.com/wp-content/gallery/space/Space_Ios_7_outer_space_stars_wallpaper_043425_.jpg');
} /*title section interior*/

.messageUserBlock div.avatarHolder {
    background-image: url('http://megahdwall.com/wp-content/uploads/2014/06/Red-Stars-Full-Hd-Space-Blue-635630.jpg');
    background-position: center;
    background-size: 1005 auto;    
} /*Avatar background*/

.sidebar {
    background-image: url('http://i.imgur.com/ZtUZjRm.jpg?1');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
} /*Front page sidebar background*/

.texturedPanel {
    background-image: url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
} /*Front paged threads background*/
                 
.messageList {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/* threads background*/

.Menu {
    background-image: url('http://megahdwall.com/wp-content/uploads/2014/06/Red-Stars-Full-Hd-Space-Blue-635630.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*user dropdown*/

.formPopup .controlsWrapper {
    background-image: url('http://megahdwall.com/wp-content/uploads/2014/06/Red-Stars-Full-Hd-Space-Blue-635630.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*search interior*/

#QuickSearch.active {
    background-image: url('http://megahdwall.com/wp-content/uploads/2014/06/Red-Stars-Full-Hd-Space-Blue-635630.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*search exterior*/

.searchResult {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*Search results background*/

.bbCodeSpoilerButton {
    background-image: url('http://megahdwall.com/wp-content/uploads/2014/06/Red-Stars-Full-Hd-Space-Blue-635630.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}  /*Spoiler button*/

.thread_view .threadAlerts {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*thread locked background */

.xenForm {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*Edit threads background */

.breadBoxBottom {
    background-image: url('http://fc08.deviantart.net/fs71/i/2013/061/4/8/starry_sky_by_shironiji-d5wq8no.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*footer top*/

.footer .pageContent {
    background-image: url('http://napwebdesign.com/wp-content/gallery/space/Space_Ios_7_outer_space_stars_wallpaper_043425_.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}  /*footer bottom*/

.profilePage .primaryUserBlock {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}  /*profile page top*/

.profilePage .profileContent {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}  /*Profile page main*/

.profilePage .mast {
    background-image:url('hhttp://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}  /*profile page sidebar 1*/

.profilePage .mast > .section {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}  /*profile page sidebar 2*/

.profileContent#info .primaryContent {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}   /*profile page bio background*/

.nodeList .node.level_1 {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}   /*forums list 1*/
     
.node .nodeLastPost  {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}   /*forums list 2*/

.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}   /*forums list 3*/

.topicViewContent {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}   /*forums list 3*/

.miniNodeList .sectionMain {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*forums list 4 */
     
.memberList {
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}   /*members list*/
     
.navTabs .navLink .itemCount  {
    background-position: center;
    background-color: #ff0000;
}  /*alert teture 1*/    
     
.navTabs .navLink .itemCount .arrow  {
    background-position: center;
    border-top-color: #ff0000;
}  /*alert teture 2*/            
     
.secondaryContent {       
    background-image:url('http://i.imgur.com/FAEILsu.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto; 
}/*Poll */

#SocialForumDescription {
    background-image:url('http://images3.alphacoders.com/324/32477.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto;
}/*Social forum description background*/

#StackAlerts .stackAlertContent {
     background: url('https://38.media.tumblr.com/7d3f04500329ab17c061d7b0e4ca9f60/tumblr_mns2qeBUBF1rmj6o1o4_500.gif');
     background-position: center;
     background-size: 100% auto;
}  /*Alert popup background*/
     

.discussionListItem .iconKey .locked {
   float: left;
   margin-right: 4px;
} /*Moves thread locked icon to be more visible*/
   
footer .choosers dd:before {
content: 'darthmorfs custom theme, based on:';
color: rgb(156, 255, 253) ;
} /*adds custom theme text above current one*/

.discussionList {
  background-image:url('http://images3.alphacoders.com/324/32477.jpg');
  background-position: center;
  background-attachment: fixed;
  background-size: 100% auto;
} /*new posts background*/
 
Last edited:
Well...
this might takes a while to sortify out.
I'm gonna have to try doing some stuff 'n tings here.
Start it from scratch, so I can get a different background and stuff.
Yep... This is gonna take ages.
I guess i'll be back when i've got it all sorted.
 
Pumpking said:
OH MY WOW I NEED THIS THEME NOW AHHHHHRG
Anyways, that is a really nice looking theme. Can you share it?
Click to expand...
The code in the main post is that theme.

If you notice any bits of the forum that I've missed, don't hesitate to tell me, and I'll find the code.
 
Mine is still in progress; I'm going to use a Terraria Screenshot as a base.
And then go mad with editing power.
 
I actually changed my theme a little; having to complex an image as the posts background makes your eyes ache after a bit.
 
Guys. I found the code for the 'you have one new alert' popup.

Capture.PNG


Yes. When I get alert, I get a pop up of a gif of the death star exploding.

This code, and the social forum description one.

Code: 
#SocialForumDescription {
    background-image:url('http://images3.alphacoders.com/324/32477.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: 100% auto; 
}/*Social forum description background*/

#StackAlerts .stackAlertContent {
     background: url('https://38.media.tumblr.com/7d3f04500329ab17c061d7b0e4ca9f60/tumblr_mns2qeBUBF1rmj6o1o4_500.gif');
     background-position: center;
    background-size: 100% auto
}  /*Alert popup background*/
 
You must log in or register to reply here.
Back
Top Bottom