| PICTURES WILL BE ADDED! So I see you want to design your own list eh? Too lazy to watch those well thought out and helpful tutorials from actual professionals? Well you're in luck fellow noob! I'm here to help you create your own list with a few simple steps without making anything too complicated. Don't get me wrong though, Shishio's tutorials are more precise, well thought out, and put together so if you want to actually learn a thing or two I HIGHLY advise checking his out. Before you start! Get this incedibly useful tool that will make it even easier to customize your list. Firefox: https://addons.mozilla.org/en-US/firefox/addon/firebug/ Chrome: https://getfirebug.com/releases/lite/chrome/ The step in which I usually do when making a list is finding a good wallpaper. This sets the theme of the whole list and is usually where you will get your insperation! Default lists This is going to make it pretty simple to make a list without actually starting from scratch. These are 3 of my personal favorites and fairly simple to customize. Also they look pretty different too! NOT DONE] 1. Border List: Good for showing the background more than the list. The border really makes it pop and is personally my favorite design to use. DONE 2. Cover List: Most popular, most bulky, covers are shown without hovering. http://myanimelist.net/forum/?topicid=1102101 NOT DONE 3.Bulky: Used when the other two lists just don't seem right, for those who want thicker list. Changing the wallpaper Almost 100% of the time you are going to just want the background to COVER the whole screen. Which is exactly the reason why this code will almost always be your best option. body { background-attachmentfixed; background-imageurl(httpi42.tinypic.com5sn48.png) !important; background-position0 0; background-repeatno-repeat no-repeat; background-sizecover; } See where that link is? The httpi42.tinypic.com5sn48.png that's how you change the background. Go to the site [url=tinypic.com]Tinypic[url] and upload the image you want as your background. To choose the best background you can, try and get images that have lots of space on the right or left side, this is to have room to fit the list in without blocking any characters that might be on there. If it is a background without character then you don't have to worry about a thing. Make sure you copy the direct link from tinypic and put it in between the two ( ). You got your background changed? Ok on to the next step, changing the colors of the list. Changing Colors Lets just use a little example here. background-color: rgba(50, 75, 90, 0.7); Notice how it says rgba followed by four numbers? That just means the first number is how much red is in it. Second is green, third is blue, and last is alpha Obviously you have heard of red green and blue, but what the heck is alpha? It's pretty simple actually, it's just how much you can see though something to see what is behind it. So lets say that you put 0 for alpha, the color would not even be there, it would be completly see though. But if you put 1 as your alpha, it will not be see though at all, get it So if you want to see the color but dont want it to be solid, all you need to do is put the alpha at something like (0.1, 0.2, 0.3, 0.4, etc.) The best alpha to use I find is around 0.6-0.9 Anything lower will look too see though. Ok now that I got alpha out of the way, lets talk about rgb. To make this nice and simple, go to the site [url=httpwww.colorschemer.comonline.html]Colorschemer[url]. It is a great site for helping you choose colors you want without having to guesstimate what it will look like. But let me just give you a little example from art class. Green + Blue = Cyan Green + Red = Yellow Red + Blue = Pink To make white simply put all numbers at 255. Ex. rgba(255,255,255,0.7) To make black put all the numbers at 0. Ex. rgba(0,0,0,0.7) Changing Sizes and Positions To start off px = pixels % = percentage If you have something you want moved or you want to change the size of something you will need to decide if you want to use px or %. Px is the size that something will be on ALL screens no matter what. % is there to adjust to each screen size acordingly so it will look how it does on yours. For example, if you have a 1000px wide screen and you put an image that is 500px wide, it will be half the screen right Ok, now lets say you have a 2000px wide screen and you have that 500px image on it. It will only cover 14 of the screen right But what if you want it to cover 50% of the screen on both computers That is when you would use %. The same goes for position, the image could be 10% from the left of the screen or it could be 100px from the left of the screen, the choice is yours. That is pretty much the basic of the basic things that you will need to customize a simple list. If you want something more advanced looking, you should go check out Shishios tutorials. REPLY IF YOU HAVE A QUESTION! |
TheHolyPotatoMar 9, 2014 6:35 PM
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7924 |
by Shishio-kun
»»
Yesterday, 1:50 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Sep 22, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Sep 22, 4:14 AM |