Back to Top!

Tutorial How to change your background, color scheme, and more on kpopselca using Stylish

Learn how to make your photos stand out! Photoshop, Pudding Camera, Haduri, posing techniques, angles & lightning, backdrops, etc.
anjel5521
Post May 26, 2013 @ 2:38 pm

Want to change the plain site layout? I'm here to help.
A few people asked me how I changed my layout after my thread about changing it with Stylish.
I was a bit reluctant to make this tutorial because doing this DOES require some very basic knowledge of html and more importantly css (computer/web language used to make websites pretty), but I will try to make it as simple as possible. If you have any further questions or want to know how to change more aspects of the layout than I mentioned in this tutorial please just comment your question below.

The first thing you will need is the stylish app. It is available for both Chrome and Firefox. Idk if this is possible in other browsers, sorry. For Chrome users go here and for Firefox users go here and click. Just install it like you would any normal extension or addon.
Once you've installed it you'll have to create a new style for kpopselca. Getting to this is different for Chrome and Firefox.

On Chrome
SHOW SPOILER



On Firefox
SHOW SPOILER



Firefox users, please type what I pasted into the box.
Later when we do the actually code for styling you MUST put all of it inside these brackets.
DO NOT SKIP THIS STEP OR YOU WILL SCREW UP THE STYLE.

@-moz-document domain("kpopselca.com"){
            /*You can delete this line later and replace it with the code I mention*/
}


BASIC STYLING
This is for complete novices who know next to nothing about CSS or html. I will teach you how to change the very basics of your page (background, font, and maybe some other colors.

In the editing panel write this code:
body{
  background-attachment: fixed !important; /* Don't delete this line */
  background-image: url(YOUR_IMAGE_HERE) !important;
  background-color: YOUR_COLOR_HERE !important;
  color: FONT_COLOR_HERE !important;
  font-family: FONT_HERE !important;
  font-size: FONT_SIZE px !important;
}

If you are using Firefox it is important that you keep this code inside of the @-moz-document domain("kpopselca.com"){ } section.
Firefox users should have this:

@-moz-document domain("kpopselca.com"){
    body{
        background-attachment: fixed !important; /* Don't delete this line */
        background-image: url(YOUR_IMAGE_HERE) !important;
        background-color: YOUR_COLOR_HERE !important;
        color: FONT_COLOR_HERE !important;
        font-family: FONT_HERE !important;
        font-size: FONT_SIZE px !important;
        }     
}


You may edit the parts that say "YOUR____HERE" but leave all other attributes like "px" or "!important".
For any of these lines that you are NOT using please delete that entire line.
For instance, if I don't want to change my font color then I will delete this entire line:
color: FONT_COLOR_HERE !important;

It should look something like this in Chrome and Firefox respectively:

SHOW SPOILER





BACKGROUND IMAGES
Found a background you like?
I suggest if you want your bias in the background you choose a large photo that's about the size of your desktop with your bias either on the left or right or both sides of it, because they will be covered by the middle section on each page. There are ways to fix that, but for the simplicity of this tutorial that is just what I will suggest. You can also use things that have repeating patterns like stars or polka dots. I have a really cool white polka dot background http://i.imgur.com/BUim0.png that will work on top of any non-white background color and you're all free to use it as you like.
If you'd like a red background with white polka dots for your page then go with this code:
background-image: url(http://i.imgur.com/BUim0.png) !important;
background-color: red !important;

You can change the background color to whatever you'd like instead of red and it'd basically look like this:



You can still use tiled images of your biases. Here is a sample of what it can look like:



For this tutorial I'm just going to use a full screen photo of Hyuna where she's off to one side



*You can also reposition your background to the left, center, right, top, or bottom of the screen using
background-position: POSITION_HERE !important;

In a lot of cases you won't need to reposition your background so I suggest you don't unless you REALLY want to use a picture but the background is getting cut off.
Your options for "POSITION_HERE" can be found at this site

Feel free to use whatever background you like and have fun!



COLOR OPTIONS
You can change background color, border color, font color, basically any color you want.
On the web colors are displayed using something called a hex code. It starts with a "#" and is followed by a combination of 6 numbers and letters. Every color has a hex code and this is how you will pick colors for your page. Only for very basic colors can you say "color: blue" or "color: white". You can't use words like "pink" to describe colors, so it's best to just use a hex code.
White is #FFFFFF or just #FFF for short. Black is #000000 or just #000 for short.
The other colors fall somewhere in between. Here is a small color chart to help you pick colors:



And I will recommend http://html-color-codes.info/ for choosing even more unique colors. Just scroll down to their color picker and choose a color, then copy the hex code and use it.
I will change my font color to pink so my code for the font color will look like this:
color: #FF0066 !important;




FONT
The major things to change here are font family and font size. I would say stick with something around 14-20px in size but some fonts are bigger or smaller than others so you may need to adjust more so that it is readable.

For font-family you can use ANY font that you have installed on your computer. Most people have Verdana and Century Gothic by default so for my sample I chose to use Century Gothic with Verdana as a backup (separated by commas) . You won't need a backup font because you'll be choosing from whatever fonts you have installed so just choose ONE font here. Pick any font you want.

If you're wondering which fonts I used in my "I just made my Kpop selca so much better" thread, I used Origin for the topic headers and a Korean font called RixPinkRibbon M for the post font. You can download those fonts through the links I provided. Since they are custom fonts you will not be able to use them unless you download them and install them on your computer first. I will not go through the process of explaining how to install fonts, you can just google that, lol.
Remember, you can use any font that you have installed on your computer.
Sample font code:
  font-family: Century Gothic, Verdana !important;
  font-size: 15 px !important;




Here is a sample layout: - feel free to use this as a template and just change colors, fonts, etc. or just delete parts you don't want
** FIREFOX USERS: @-moz-document domain("kpopselca.com"){ PASTE THE CODE INSIDE THESE BRACKETS }

/*This will change major page properties like background, font, etc."*/
body{
  background-attachment: fixed !important; /* Don't delete this line */
  background-image: url(http://i.imgur.com/6h4ne9p.jpg) !important;
  background-color: #ffffff !important;
  color: #F84074 !important;
  font-family: Century Gothic, Verdana !important;
  font-size: 15 px !important;
}

/*This will change the bar the header for each major forum section, ie. "Preface", "Entertainment", etc."*/
.forum-head{
  background:none !important;
  background-color: #F84074 !important;
  border: 1px dashed #B40431 !important;
}

/*This will change the top bar that tells you what page you're on, for instance, "Forum" or "Selcas"*/
#heading{
  background-color: #F84074 !important;
  border-bottom: 1px dashed #B40431 !important;
}

/*This will change the top bar on the right side for Active Topics as well as the search bar on the Active Topics page*/
.gradient-gray{
  background:none !important;
  background-color: #ffa1ac !important;
  border: 1px dashed #B40431 !important;
}

/*This will change Hienwa and KPOPSELCA's names from red to dark gray/black (to match the layout)*/
a.username-coloured{
  color: #404040 !important;
  text-shadow: 0px 0px 8px #fff;
}

/*This will change the post timestamps from dark gray to white" */
.timestamp{
  color: #fff;
}


/*This which change the those forum prefixes (like "rant" or "boy group") to pink. You can change the background color. Feel free to also change the font color using "color: YOUR COLOR HERE !important;" */
.label-important{
  background-color: #F84074;   
}

/*This which change most of the buttons to a green color. The colors are two different shades of green (the first color is on top and the second color on bottom) so they create a slight gradient*/
.btn{
  background: -webkit-linear-gradient(top, #a3d280, #79bf45);
  color: #fff;
  text-shadow: none;
}

/*This which change most of the buttons to a pink color when you hover over them. The pinks are both the same so it looks like solid pink*/
.btn:hover{
  background: -webkit-linear-gradient(top, #ff599b, #ff599b);
  color: #fff;
}

/*This will change the selca upload camera button to blue. You can change the colors so they are the same or different and make a subtle gradient*/
.btn-danger{
  background: -webkit-linear-gradient(top, #5cb6ec, #1e81bc);
  color: #fff;
}


/*This will change the color of thread titles*/
h3 a{
  color: #fa4e93;
}

/*This will change link colors*/
a{
  color: #79bf45;
}

/*This will change all of those yellow boxes to white with a gray border*/
.alert{
  border: 1px solid #e8e8e8;
  background-color: #fff;
}

/*This will the yellow font in those yellow boxes to dark gray*/
.alert-warning{
  color: #999;
  text-shadow: none;
}



Final product





If I forgot anything please let me know, and again if you have questions don't hesitate to ask.
Enjoy the tutorial and have fun with your new kpopselca layout~


EXO · Sekai · Xiuhan · Baekyeol
Heaven17
Post May 26, 2013 @ 2:44 pm

U know everything, an Anjel indeed ToT


ImAShawolForOnew
Post May 26, 2013 @ 2:45 pm

you are a computer wiz!...im gonna try to do that! thank you soooooooooooo much :lol:

SojuPang
Post May 26, 2013 @ 2:46 pm

Bless your soul.


Vorisy
Post May 26, 2013 @ 2:48 pm

Kay, you seriously need to be a mod.



Dibs on Zion.
anjel5521
Post May 26, 2013 @ 2:49 pm

Heaven17 wrote:U know everything, an Anjel indeed ToT

A jack of all trades. xD
But this is my forte actually, lol.



ImAShawolForOnew wrote:you are a computer wiz!...im gonna try to do that! thank you soooooooooooo much :lol:

I was a computer science major when I entered college. I'm not anymore tho. Too much math, lol.
But I've been doing this since I was a kid so I can help you guys with computer-y things if you need :3



SojuPang wrote:Bless your soul.

No problem. This took like half my day to make but if it helps you guys then I'm glad. ^_^


EXO · Sekai · Xiuhan · Baekyeol
choibliss
Post May 26, 2013 @ 2:50 pm

no safari?


Heaven17
Post May 26, 2013 @ 2:51 pm

anjel5521 wrote:No problem. This took like half my day to make but if it helps you guys then I'm glad. ^_^

Woah, what dedication does thee have TAT
U should really become a mod I guess...I think you're gonna be easily chosen xP


anjel5521
Post May 26, 2013 @ 3:01 pm

choibliss wrote:no safari?

Hey, I don't have safari installed but I googled it and apparently there is a beta version of Stylish for Safari. It might be worth trying if you would like to do this.
Or you could get chrome or FF cause they're better. ^_^*


EXO · Sekai · Xiuhan · Baekyeol
dramaqueenwishes
Post May 26, 2013 @ 3:08 pm

Honestly im a really lazy person so i doubt i could have the patience to do this xD but thanks <3


anjel5521
Post May 26, 2013 @ 3:20 pm

Heaven17 wrote:
anjel5521 wrote:No problem. This took like half my day to make but if it helps you guys then I'm glad. ^_^

Woah, what dedication does thee have TAT
U should really become a mod I guess...I think you're gonna be easily chosen xP

Oh lol, I didn't do it for modship. It's just cause a few people specifically asked if I could do a tutorial and I thought a bunch of people would benefit from this. Hehe :3


EXO · Sekai · Xiuhan · Baekyeol
Heaven17
Post May 26, 2013 @ 3:29 pm

anjel5521 wrote:
Heaven17 wrote:
anjel5521 wrote:No problem. This took like half my day to make but if it helps you guys then I'm glad. ^_^

Woah, what dedication does thee have TAT
U should really become a mod I guess...I think you're gonna be easily chosen xP

Oh lol, I didn't do it for modship. It's just cause a few people specifically asked if I could do a tutorial and I thought a bunch of people would benefit from this. Hehe :3

lol I know, but you're so umm dedicated and helpful


anjel5521
Post May 26, 2013 @ 3:41 pm

Heaven17 wrote:
anjel5521 wrote:
Heaven17 wrote:Woah, what dedication does thee have TAT
U should really become a mod I guess...I think you're gonna be easily chosen xP

Oh lol, I didn't do it for modship. It's just cause a few people specifically asked if I could do a tutorial and I thought a bunch of people would benefit from this. Hehe :3

lol I know, but you're so umm dedicated and helpful

Hahah, you're too sweet, omg :smooch:


EXO · Sekai · Xiuhan · Baekyeol
J-Arc
Post May 26, 2013 @ 3:48 pm

You rock, it came out beautifully



anjel5521
Post May 26, 2013 @ 6:41 pm

J-Arc wrote:You rock, it came out beautifully

SHOW SPOILER

THAT'S AWESOME! I'm glad it turned out well for you and so glad I could help. :embarassed:


EXO · Sekai · Xiuhan · Baekyeol