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'.
Make sure to enter a name for the style, and tick the 'Enabled' box.
Next, click 'specify' next to everything.
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!
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'.
Make sure to enter a name for the style, and tick the 'Enabled' box.
Next, click 'specify' next to everything.
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: