Language…
15 users online: caioskii, Cristian Cardoso, fanfan21, Golden Yoshi, Green Jerry, Hayashi Neru, JezJitzu, Josuke Yoshikage, KoJi, Maw,  Nanako, Shomi, toady, tOaO, yoshi9429 - Guests: 249 - Bots: 282
Users: 64,795 (2,377 active)
Latest user: mathew

In-Depth Layout Guide / HTML + CSS Help Thread

  • Pages:
  • 1
  • 2
This is a in-depth guide on how to make custom layouts using CSS and HTML. Feel free to ask any questions regarding HTML and CSS you have here, as well!

If you don't feel like creating a layout manually, feel free to use the Layout Maker XP.

VERY IMPORTANT: Make sure your layout complies with the SMWC layout rules.

If you feel like I missed anything, please let me know and I'll edit it ASAP. If you need any additional help, you can try using the help thread.

Just a quick reminder, that part of the layout should be a header and the other part should be a signature, but in the tutorial below both parts are kinda fused together. To separate them, simply locate a text that should say something like "Post text goes here". Everything that's before the text goes in the header and everything that's after the text goes in the signature. The text itself should be erased.

Make sure to disable the option footer separator on your profile page later, otherwise the signature box might look weird. Another problem is accidentally putting a blank line on the post, make sure that, when putting your layout in SMWC, you didn't put any blank lines before or after the code.

Also, pay attention to any bold text while looking through the codes I posted, they highlight areas of the code that have been altered/added.


Table of Contents:
-HTML Basics
-CSS Basics
--Coding Layouts
-Post Box
-Post Background
-Quote and Code Boxes
-Text
-Signature Box
-Side Images
-Other Effects
-External CSS
-Tag <*> not closed?
--Designing Layouts
-Post Background
-Choosing The Colors
-Tools List
-The Little Things
--End

HTML Basics


First off, CSS and HTML are two separate code languages, but they both work together in order to create websites. Although there are also other languages used, like Javascript, Flash and HTML5, for creating layouts in here, CSS and HTML are all you're going to need.

First off, what is HTML? Simple, here's two examples:
Code
<b>Bold text.</b>

Bold text.


Code
<hr>




HTML is basically a way to implement any object into a webpage, it can go from images, tables, etc. The two examples above are bolt text and a horizontal line. The way it works is simple:

To implement a HTML tag that is going to be applied once and only once (like an image or a horizontal line), you can use:
Code
<*>


And to implement something that spans across a longer area, like bold text:
Code
<*>[something that is going to be affected by the HTML here]</*>


You just have to replace the * with something else, like b for bold text or hr for a horizontal line, both of these things are HTML tags. Here are more examples if you want. We'll be going back to this afterwards.

There are also HTML colors, they work like this:
#000000 - Black (gray background added so you can see the font color)
#FFFFFF - White
#FF0000 - Red
#FFFF00 - Yellow
#00FF00 - Lime Green
#00FFFF - Cyan
#0000FF - Blue

Each part of the #000000 is responsible for a color, respectively, red, lime green and blue. They go from #000000 (absolute darkness) to #FFFFFF (absolute brightness), using the hexadecimal system.

The hexadecimal system is something that works a little differently than the usual decimal system, it goes like this: 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 [...] 97 98 99 A0 A1 A2 A3 [...] AE AF B0 B1 B2 [...]

You can also create a few different colors with different combinations:
#808080 - Gray
#FFA500 - Orange
#008000 - Green
#800000 - Maroon
#800080 - Purple
#FFC0CB - Pink
#8B4513 - Brown

Before you ask, no, you don't have to memorize every color combination. There's a better way that I'll show a little later. For now, let's go to the CSS basics.

Back to the top

CSS Basics


CSS is basically what makes HTML look good. It's something you put before the HTML or maybe even into the HTML itself. Here's an example of CSS code:
Code
.hrexample1 {height: 5px;background-color: #0000FF;border: 0;}


In here, we're basically applying anything with the name hrexample1 a height of 5 pixels, a color of #0000FF and a border of 0 pixels. It's important to put a dot before the name, and it's even more important to specify a name, otherwise your CSS code will affect the entire webpage, which is bad.

The thing is, CSS doesn't do anything by itself, it needs something to apply to. This is where the HTML comes in:
Code
<hr class="hrexample1">


This line of HTML code will basically "call" the CSS code and apply it to itself. It's just like your normal <hr> tag, but it has the attribute:
Code
class="hrexample1"


That attribute gives the <hr> tag a name. It can be any name, but in this case it's "hrexample1". In the end, because both the CSS and HTML have the same name, it'll look like this:



See? It's easy!

Those things we put in the CSS code are attributes. After we put the name (in this case .hrexample1), we can apply attributes to it. We do that by adding this:
Code
{attributename: attributevalue;}


"attributename" is the name of what you're going to put in, let's say, color. We want it to look red. So we put the attribute background-color:
Code
{background-color: attributevalue;}


It needs to be the background-color attribute, because the attribute color only applies to fonts. Now we need a value for it. If you read the HTML section above, you might already know what's going to come next. What color is red in HTML again? #FF0000

So let's apply it:
Code
{background-color: #FF0000;}


And there we go. Do you want anything else in it? Maybe a line that's 10 pixels tall? No problem! Just put the height attribute right after the semicolon symbol:
Code
{background-color: #FF0000;height: 10px;}


You'll also need a name for the thing you're going to put, remember?
That's no problem. Just create a name that's not likely to be used by anyone else:
Code
.hrexample2 {background-color: #FF0000;height: 10px;}


Unfortunately though, you can't simply input any CSS code straight into a page, as it'll always read it as HTML. In order for your code to work, you have to wrap it around the HTML "style" tag, like so:
Code
<style> .hrexample2 {background-color: #FF0000;height: 10px;}</style>


And now you're good to go! Just put a little of HTML afterwards (in this case, <hr class="hrexample2">) to call the code and look at that:




If you want to do a little testing on your own, you can go right here. Erase everything on the text box, then put the code you want in there to see how it looks. Remember this, as it will be a very useful tool when testing your layouts.

Warning: CSS can get messy later on, so if you're worried your layout is going to end looking too cluttered code-wise, I recommend taking a brief look at the External CSS part of this tutorial.

And that's it for the basics of CSS. Are you ready to make a layout? Then let's go!

Back to the top

Coding Layouts


Now to the coding part. First, we need some basic code to start. We'll need an "area" for the background, and area for the post box. We can create these "areas" by using the HTML div tag, which stands for divisions. Like so:
Code
<style> div .postexample1 {background-color: #808080;}</style>


And the HTML code:
Code
<div><div class="postexample1">Post text goes here.</div></div>

Post text goes here.


Remember that the HTML code is normally put directly afterwards the CSS code. In this case it's separate in order to make it easy to read/understand.

In this case, the div in the CSS code isn't the name but rather the tags to be applied to. This makes sure that those attributes will be applied to the div tag and not to anything else, like an hr tag. You'll also need two of the HTML div tags, I'll get into why in a second. For now, it doesn't really look like a post layout, does it? Well, let's see what we can do to make it look like one!

Back to the top

Post Box


First, let's turn this into a post box. We need to make it go away from the border a little bit, so let's add some padding in the HTML:
Code
<div style="padding:25px;"><div class="postexample1">Post text goes here.</div></div>


This is something very neat, you can add CSS directly in the HTML! See that style="[...]"? You can see more about that here. In this case, we added a padding of 25px, as you can see right here:
Post text goes here.


If you lower the number from 25px, the post box will be closer to the edge and vice-versa. Be careful not to use very high values. You can also define each value separately, which will set the top, right, bottom and left values respectively, here's the CSS code for this:
Code
padding: 25px 50px 75px 100px;


The reason we have two divs here is weird. Normally, you'd want to use the CSS margin property on the post itself, but that creates some issues with the post background later on, so we need to use another division and apply padding to it.

Now we need a border, it feels weird having just a plain background. We'll do this by adjusting the CSS code a little bit:
Code
<style> div .postexample1 {background-color: #808080; border: 2px solid #FFFFFF;}</style>

Post text goes here.


The new property is border: 2px solid #FFFFFF;. The "2px" is how wide the border is going to be. #FFFFFF is the HTML color of the border, in this case, white. solid is the type of border. There are also other types of borders like dotted, dashed, double, etc. You can view all of them here.

Alright, now we need a way to make the text go away from the post border. It looks a little wonky with it touching the border. Just add the padding attribute, but this time, in the CSS code:
Code
<style> div .postexample1 {background-color: #808080; border: 2px solid #FFFFFF;padding: 5px;}</style>

Post text goes here.


Now let's say you want to use an image for the background, it's recommened you switch the background-color attribute to just background like so:
Code
<style> div .postexample1 {background: url("http://i.imgur.com/dCZ04KX.png") repeat #1D2B3D;  border: 2px solid #FFFFFF;padding: 5px;}</style>

Post text goes here.


Here, the property added was background: url("http://i.imgur.com/dCZ04KX.png") repeat #1D2B3D;. The url contains the image to be used between the quotes. It's necessary that you put it between quotes. repeat says if the image should repeat or not. In this case it should, the 26x26 image repeats itself endlessly. In other cases, you might not want that to happen. Here are the properties you can apply to it and their effects. By default, if you don't specify a value, it'll repeat endlessly. The color is the color the background will have where there is no image. There will be examples of both those properties in the Post Background section below.

REMINDER: Your post text absolutely must be readable in your post background. Don't use backgrounds where the color difference between them and the text is too low as to cause difficulties when reading the post's content.

Back to the top

Post Background



Alright, now we need a post background. For that, let's create another div in the CSS code:
Code
<style> div .postexample1 {background: url("http://i.imgur.com/dCZ04KX.png") repeat #1D2B3D;  border: 2px solid #FFFFFF;padding: 5px;} div .postexample2 {background: url("http://i.imgur.com/n0TY0Kz.jpg") no-repeat #6A7CC2;}</style>


We'll also need to add that extra div into the HTML:
Code
<div class="postexample2"><div style="padding:25px;"><div class="postexample1">Post text goes here.</div></div></div>


And on the end, it should look like this:

Post text goes here.
I'm putting more lines here in order for you to see the background.
















































See?


In here, the background is displayed until it reaches it's maximum size, then it gets replaced by the color. Although it looks cool in this image vertically, if you have a big monitor or if you zoom out the page, you can see it isn't very good horizontally. Let's say I want the image to strech horizontally but not vertically, we can change a little bit of the code to do it:
Code
div .postexample2 {background: url("http://i.imgur.com/n0TY0Kz.jpg") no-repeat #6A7CC2; background-size: 100%;}

Post text goes here.


As you might notice, the background looks good now, even when you zoom out. In the background-size: 100%; attribute, the first value will apply to the horizontal axis and the second value to the vertical axis (in this case no value was attributed, so it just leaves it alone). You can test all of the values here.

That's it about backgrounds, really. Now let's move on to more CSS.

Back to the top

Quote and Code Boxes


If you were able to understand everything up to this point, I can say to you that from here, everything should get easier.

This is the code for the quote box:
Code
.postexample1 .quote .box {background: url("http://i.imgur.com/dCZ04KX.png") repeat #1D2B3D;  border: 2px solid #FFFFFF;padding: 5px;}


Seems familiar? It should, it's the code for the post layout, except it has .quote .box added afterwards. This means that it'll apply to any quote boxes inside your layout, now just change a few colors/images to your liking:
Code
<style> div .postexample1 {background: url("http://i.imgur.com/dCZ04KX.png") repeat #1D2B3D; border: 2px solid #FFFFFF;padding: 5px;} .postexample1 .quote .box {background: url("http://i.imgur.com/xfmxcTM.png"); border: 2px solid #7A90C1;padding: 5px;} div .postexample2 {background: url("http://i.imgur.com/n0TY0Kz.jpg") no-repeat #6A7CC2;}</style>


In this case, I removed the "background" attribute since they aren't necessary when the background is repeating endlessly. You can do the same thing for code boxes, just copy and paste, replace the .quote for .code and there you go.
Code
.postexample1 .code .box {background: url("http://i.imgur.com/VFmnHNr.png"); border: 2px solid #A3D017;padding: 5px;}

Originally posted by Sample quote


Code
Sample code


Sample post


Unfortunately, both images I used here are 1x1 semi-transparent PNGs which means you can't see those easily, but it shows that putting backgrounds in the quote/code boxes can be done.

There are also boxheads, which are those texts that read "Originally posted by" and "Code". You can alter those by adding this:
Code
.postexample1 .quote .boxhead {font-variant: small-caps;}


In this example, we added a little bit of code that should alter the text of the box to utilize the small caps font variant, remember that you can do the same to the code box by switching .quote by .code. See the result:
Originally posted by Sample quote


Code
Sample code


Sample post


There's also quote/code icons. You can apply these at the boxhead in order for they to appear above the layout. You'll have to use the :before and :after properties, like this:
Code
.postexample1 .code .boxhead:before{content: url("http://i.imgur.com/keAXtGs.png");}


And in order to put it inside the box itself, just do this:
Code
.postexample1 .quote .box:before{content: url("http://i.imgur.com/IfcT473.png"); float:right;}


Originally posted by Sample quote


Code
Sample code


Sample post


You must remember by now, but just to make sure, you can simply apply these to both of the boxes, either only one of those or both.

Other than that, the font looks weird, doesn't it? As you already saw, there are ways to change the font. Let's get into more details right below:

Back to the top

Text


As you saw above, there's a way to change the text to use small caps using:
Code
font-variant: small-caps;

There aren't any other values to it, other than normal which is the default one so it shouldn't be needed. There is also font-weight, which you can test right here.

Before, we were using background-color instead of color for a while. Remember why? Simple, it's because color applies to fonts instead of the post itself. How do we use it? If you want to use a text color for anything you just put it inside the CSS code somewhere, like so:
Code
.postexample1 .code .boxhead {font-variant: small-caps;color: #AA0000;}


We can also alter the font face we use. For that, you'll use the font-family attribute. It's placement is exactly the same as the font color:
Code
font-family:'Lucida Sans Unicode', Arial, sans-serif;


The order goes from the left to the right. The font will only display if the user has the font installed on the computer, or if you link to a webfont. Fonts one or more space in their name must have a ' added. In the end there, you can see a font called sans-serif. Well, it's not really a font. In case all the fonts you provide are not available, it'll call the most appropriate font for what you're trying to type, depending on what you put at the end. You can either put serif, sans-serif or monospace. You can see the differences in each one right here.

There's also a way to alter the font size, it's applied to the code in the exact same way:
Code
font-size: 10px;


Now, let's see how it looks:
Originally posted by Sample quote


Code
Sample code


Sample post


Beware that, to use font-family and font-size on code boxes, you need to add another CSS property:
Code
.postexample1 pre.box {font-family:'Lucida Sans Typewriter', monospace !important;font-size: 10px;}


You can see that we also added !important after the fonts. This is because, currently that's needed to change the font on the code box only. Any other property will work normally without it.

There's also a way you can customize links. There's four properties to this, and you can apply a different color to each of them:
Code
.postexample1 a:link {color: #00AA00;}
.postexample1 a:visited {color: #007700;}
.postexample1 a:hover {color: #CCFFCC;}
.postexample1 a:active {color: #00FF00;}


You can combine those by putting a comma between two of them, like this:
Code
.postexample1 a:link, .postexample1 a:visited {color: #00FFFF;}
.postexample1 a:hover, .postexample1 a:active {color: #00FF00;}


There's also something else that can be applied, and it works just like the two properties above, text shadow:
Code
text-shadow: 1px 1px 1px #222736;


The first value represents how right-shifted it is, the second how down-shifted and the third how blurry the text shadow is. At last, there is the color of the shadow.

Now let's see how both of those look like in the layout:
Post text goes here. Link test.


But wait, aren't we forgetting something? Oh, the signature box. Right.

Back to the top

Signature Box


This is easy, really. If you want to create a signature box with the same design as the main box, simply do this to the HTML code:
Code
<div class="postexample2"><div style="padding:25px;">
<div class="postexample1">Post text goes here.</div></div>
<div style="padding:25px;"><div class="postexample1">Here's a signature!</div></div></div>

Post text goes here.
Here's a signature!


If you need to create a signature with a different design, it'll also be simple. First, you'll have to implement another CSS div tag, like so:
Code
.postexample3 {background: url("http://i.imgur.com/dCZ04KX.png") repeat #1D2B3D; border: 2px solid #FFFFFF;padding: 5px;}


Customize it the way you want it to be, just like the normal post box.
Code
.postexample3 {background: #FFBBBB; border: 2px solid #FF7777;padding: 5px;}


Then, implement the following code:
Code
<div class="postexample2"><div style="padding:25px;"><div class="postexample1">Post text goes here.</div></div><div style="padding:25px;"><div class="postexample3">Here's a signature!</div></div></div>


Now you have a different styled signature box!

Post text goes here.
Here's a signature!


Now to something that will create even more div tags! Yay!

Back to the top

Side Images


There's an easy way to implement an image first, let's say we want this image on the right:


We need to remember it's dimensions first, which are 191x296, or 191 pixels wide and 296 tall. Let's create another div in the CSS:
Code
.postexample4 {background: url("http://i.imgur.com/mDVNvc0.png") right bottom no-repeat;min-height:296px;}


The image needs to have "no-repeat" otherwise it'll loop endlessly like a background. It has min-height:296px; which makes sure that the image is shown at all times (otherwise, it might get shifted outside of the post). It's also aligned to the "right bottom" in this case, but you can change it to "right top" or "right center" or even "left center".

You're also going to need a little bit of HTML code:
Code
<div class="postexample2"><div style="margin-right: 5px;"><div class="postexample4"><div style="padding:25px 201px 25px 25px;"><div class="postexample1">Post text goes here.</div></div><div style="padding:25px 201px 25px 25px;"><div class="postexample3">Here's a signature!</div></div></div></div>


You can see that the post box padding was adjusted to the method described in the beggining. All of the values for the padding are the same, except for the right which was set to the image's width (in this case, 191 pixels) plus 10 more pixels to give some space between the post box and the image.

Post text goes here.















I'm doing this so you can see the image attach to the bottom right of the post.
Here's a signature!


Remember that, if you have an image without a bit of empty space in it (which is the case in here), you'll have to use this to make it go away from the right slightly:
Code
style="margin-right: 5px;"


That bit of code is used on the HTML code above. If you're going to put your image on the left by using "left center" for example, you'll have to change the right padding to the left and the right margin to the left, simply by using margin-left.

If you want to have some space on the bottom/top of the image, you'll also have to add this:
Code
padding-top: 5px; padding-bottom: 5px;

Be aware that, using this code is not recommended as the padding property affects the post box too. Unfortunately, margin does not work for the top and bottom values, at least, not in this case.

And that's it. Let's finish this off with a few more effects you can add to your code:

Back to the top

Other Effects


Be aware that most of the following effects use CSS3, which might look bad on outdated browsers.

RGBA Colors


Let's introduce another type of color that works somewhat like HTML color, RGBA colors:
rgb(255,0,0) - Red
rgb(0,255,0) - Lime Green
rgb(0,0,255) - Blue

These work just like HTML colors, expect they use the decimal system and go from 0 to 255, and also something else called alpha layer or transparency:
rgba(0,255,0,0.5) - Lime Green with 50% transparency.

The 0.5 on the end represents how opaque it is (opaque meaning non-transparent). 0 will be fully transparent and 1 will have no transparency. Example:
Post text goes here.


Box Shadows


The RGBA value is useful in something entirely new: box shadows. These can be used to make your post box cast a shadow on the background. It can also be used in your signature and in the quote/code boxes.
Just add this to the CSS code you want to:
Code
box-shadow: 5px 5px 0px rgba(10,10,10,0.5);


Just like text shadow, the first value sets how right-shifted it is, the second how down-shifted and the third how blurry the box shadow will be.

Post text goes here.


Border Radius


There's also a border radius property in order to make the border of your post box or the quote/code boxes round. Code goes into the CSS of what you want it to apply to:
Code
border-radius: 25px;


The higher the number, the bigger the radius.

Post text goes here.


CSS Position


There's the position property too, which is a cool property that can be applied to almost anything. Here's a detailed look into this attribute, but I can give you a little resumed version of it.

It has 4 values you can set:
static, which is the default one and is always positioned exactly where it should be.
relative, which is positioned relative to it's normal position (a.k.a. just like static, but it can be shifted to any direction) by adding values like left: 30px; or top: 50px;.
fixed, which really shouldn't be used, as it'll place the object in a fixed position relative to the window (like those annoying pop-ups).
absolute, which is an interesting one and probably the most useful. It behaves just like fixed does, but it gets contained in the last property it's in (in this case, your layout). It can also be shifted just like relative and can even be contained inside another property in your layout.

It is used like so:
Code
<img src="http://i.imgur.com/zFB0TeF.png" style="float:right;position:relative;left:20px;bottom:15px;">


Post text goes here.


The left and bottom properties in this case push the image slightly to the left and to the bottom.

Border Image


There's a way to implement images into a border with border-image. The image I'll use is this one. Just add this to whatever you want to have it (CSS code, again):
Code
border-image:url("http://i.imgur.com/ULd5FRX.png") 3 repeat;


The URL is the image you're going to use and the number 3 defines how much of the image is going to appear in each border. You can read more about it here.

Post text goes here.


Gradients


There's also gradient effects that can be applied to posts. It's used in the background property:
Code
background: linear-gradient(to bottom,#FFFFFF,#FFAAAA);

You can also add RGBA color values and more colors just by putting another color value at the end, like so:
Code
background: linear-gradient(to bottom,#FFFFFF,#FFAAAA,#FFFFFF);

You can change the direction it goes by switching bottom with any other value, like left. You can also use angles by replacing to bottom with 180deg for example.

And that's not all! There's also repeating gradients:
Code
background: repeating-linear-gradient(to bottom,#FFFFFF 10%,#AAAAFF 20%,#FFFFFF 30%);

The value right after the color indicates how far the color should go before the next one appears. Once there's no more colors, it repeats. In here, I'll apply a gradient that goes from rgba(255,255,255,0.5) to rgba(0,255,0,0.5):

Post text goes here.

More text so you can see the gradient.


Transitions


And, at last, there's a way to make elements change by using the transition attribute. It's most useful for links:
Code
.postexample1 a:link, .postexample1 a:visited {color: #00FFFF;transition: color 1s, text-shadow 1s;} .postexample1 a:hover, .postexample1 a:active {color: #FFFF00;text-shadow: 0 0 5px #9999FF;}


But it can also be used in the post itself:
Code
div .postexample1 {background: rgba(0,255,0,0.3);border: 2px solid #FFFFFF;padding: 5px;transition: background 1s;} .postexample1:hover {background: rgba(0,0,255,0.9);}


Here's how it should look:

Post text goes here. Link test.

Did you notice it even changed the opacity of the background? It's recommended to use this sparingly, for obvious reasons (read: don't spam hover effects on your layout).

Well, in both cases we used the following code:
Code
transition: color 1s;

color says which attribute should change when the transition is in effect, and 1s is the time it should take for the transition to complete. You'll also need this:
Code
.postexample1:hover {background: rgba(0,0,255,0.9);}

The :hover property tells what should the post do when you're hovering over it, and all attributes after it will apply while that action is taking place. This can be used about anywhere in the post, but like I said before, it's most commonly found in links. You can apply it to more than one element by repeating it again, like so:
Code
transition: color 1s;transition: text-shadow 1s;


Back to the top

External CSS


Here's something cool you can do, and you've probably seen me use it in a weird way in the tutorial above: Messing with layouts can get, well, messy, but ultimately there's three ways to organize CSS. The first is by inserting it directly onto the HTML with style=, that's an inline style, and the second is by having it inside the <style> HTML tag, that's a internal style sheet.

Thing is, there's another way to organize it, via external CSS. You still have to wrap it around a style tag, but you can use the @import rule to grab a .css file from somewhere else, somewhat like so:

Code
<style> @import url('urlnamehere.css'); </style>


Remember that this goes before anything else inside the style tag. As someone else said:

Originally posted by CSSNewbie
Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.

There's two reasons why you'd want to do this. The first is to use external web fonts. For example, I'll load the Jura font into this next (empty) div:

Code
<style> @import url(https://fonts.googleapis.com/css?family=Jura);</style><div style="font-family: 'Jura', sans-serif;">Test text here.</div>


Test text here.


Warning: Make sure to use free fonts that are safe for using in the internet. There are quite a few fonts that are copyright protected, and obviously you shouldn't use those unless you have permission to.

The other use is to upload a .css file into your file bin, and then put your CSS there. By doing that, all you need to input into the post header is the @import rule and the HTML code. Doing this, you can also organize your CSS better with a code cleaner like this one.

And before you ask, a .css file is just your regular .txt file with a different filetype. You can create one by simply putting your CSS code inside a text file and then saving it as a CSS file. Make sure there's no style tags in it, since those are HTML.

That's it about coding layouts. You can stop here if you want, but there's also a few things about designing layouts you might find useful below:

Back to the top

Tag <*> not closed?



If you are running into an error like this:

Tag (div) was not closed.

That means you did not close one of your HTML tags, in this case, a <div> tag. Remember, in HTML, you must close tags that were still open right at the end of the post layout. An easy fix in this case is just to add </div> to the end of the code.

If your error is this however:

Unexpected end tag (</div>) at 1, expected </span>
Tag (div) was not closed.


Then that means that you goofed up somewhere in the middle of the code, not right at the end. When you open up a tag, but forget to close it, but instead you close another tag. Here's an example:

Code
<i> <b> </i>


Back to the top

Designing Layouts


Coding layouts is one thing, but how does one code a good looking layout? There are multiple ways, really, but I found thses few tactics to be very good:

First, you can test your layout here before testing it in SMWCentral. Just put the header, then the following text and afterwards the signature:
Code
<div class="quote"><span class="boxhead">Originally posted by Sample quote</span><div class="box"><a href="#">Sample link</a></div></div><br><div class="code"><span class="boxhead">Code</span><pre class="box filter-noemote filter-nobr">Sample code</pre></div><br>Sample post


Besides, you might be wondering how I put that code there without it being converted into objects. It's quite simple, I used a HTML entities encoder/decoder, specifically, this one, but you can use other ones if you want.

Back to the top

Post Background


The post background is something very important to the layout itself, as it will define the feel of the layout. You must make sure you have a good background to put on your post. Also, think about how your background might look on different resolutions, smaller screens, bigger screens, etc. At last, make sure your background has good colors to be displayed. You don't want anything that looks too eye-searing.

Preferably use compressed JPGs for your background, that way it's easy for slower computers/connections. You won't really need the alpha channel for the background either way. Chances are you're going to need those for the other images, not the background.

Back to the top

Choosing The Colors


The way I generally pick the colors I use in my layout is by using the color picker tool on the background. Search for a color that looks feels like it would look good in the post box, but also one that's present in the background. One you picked the color, you can use this tool to tinker with the colors, either by implementing they via HTML or RGB, or by making it brighter/darker. If you have HTML5 on your browser, you can even click the HTML5 button there to use your OS' own color tool, which generally has even more options.



It's a good idea to choose transparent colors for the background of your post and quote/code boxes, while you can use stronger versions of those colors for the borders. Try to keep a consistent theme, but that doesn't mean you have to use the same colors for everything.

I'll show you an example, first you already know how the layout coded previously ended up looking like, right?

Originally posted by Sample quote

Code
Sample code

Sample post
Here's a signature!

While it's a good way to showcase all the cool things you can do in your layout, it certainly doesn't look that nice, does it? Well, let's change a few colors using the method I described above.

Originally posted by Sample quote

Code
Sample code

Sample post
Here's a signature!

You can also see that I changed a few of the attributes, like the padding for example. It's a good method to use, but beware it might not always work. It isn't just a "pick a random color and stick with it" method. You need to make sure that color is going to work, if it doesn't, you'll need to pick up another color. In case all colors fail, then you'll need to pick a good color to utilize from the color picker I mentioned before or from here.

Back to the top

Tools List


This is a list of the useful tools you can use while coding layouts. Some of these were already mentioned in the tutorial itself. Feel free to suggest any others.

W3Schools - Tryit Editor: For testing HTML/CSS code.
Web 2.0 Generators - HTML Entities Encoder/Decoder: For converting HTML into entities, making them readable.
W3Schools - Color Picker: A very useful tool for selecting colors, with options for both HTML and RGB colors and changes of Hue, Saturation, Brightness, etc.
Dirty Markup: A way to make your HTML and/or CSS code easier to read.
Colorzilla CSS Gradient Generator: A very good tool to create gradients. Suggested by determinedpsi
Contrast Ratio: A simple website so you can see if your post text is readable against the background.


Back to the top

The Little Things


Feel like there's an idea you want to try on your layout? Feel free to try it out! You can always search to see how to implement your idea with the codes, or maybe you already know the code to use.

Be creative, remember that there's many things you can try like applying different text shadows for links, using different transition effects, different gradient effects, creating more divs, etc. There are a ton of CSS attributes I didn't talk about here, and surely, some of those could be used to create very cool layouts. You can always search for the internet to see exactly how to code it.

Back to the top

End


And this is it. The end. This post took an entire day for me to make. It's long, it's detailed, it might be boring, but it's there for anyone that wants to create a layout. Again, if you feel like I missed something or if I made a mistake, just tell me. I tried to double-check everything but there always can be a little mistake here and there.

Good luck coding your layout. #tb{:D}
This needs to be stickied. This is a wonderfully in-depth guide - even though I (vaguely) already know HTML and CSS, this is really, really good for anyone who doesn't.

have a cookie

( ͡° ͜ʖ ͡°)( ͡° ͜ʖ ͡°)( ͡° ͜ʖ ͡°)( ͡° ͜ʖ ͡°)( ͡° ͜ʖ ͡°)
Current Project: Vanilla Rendezvous, my project. Click here to see the C3 thread.

Finally back and more active than ever!

Quest on Full Moon Island 2

Go watch GamingWithDrew at http://www.twitch.tv/gamingwithdrew

My Backloggery

That definitively need to be stickied and/ or should be linked in the layout-thread.
A wild CSS3 transition appears.
Maybe some want them?



That is a really cool transision? How did you even make it? (Too lazy to dig through your CSS)
However, we no longer allow destracting CSS effect to the post layout. They are neat to look at but in the end, they just distract from the post itself. So I have to kindly ask you to remove it :<.
Anime statistic on MyAnimeList:
400 animes completed ✓
6000 episodes completed ✓
100 Days completed ✓
... what even am I doing with my life?
Originally posted by JackTheSpades
That is a really cool transision? How did you even make it? (Too lazy to dig through your CSS)
However, we no longer allow destracting CSS effect to the post layout. They are neat to look at but in the end, they just distract from the post itself. So I have to kindly ask you to remove it :<.


ah well. some psix-themed styles can stay.
CSS3 keyframes and the linear-gradient background composed the background animation. it was an infinite loop which changed the gradient points gradually during 24 seconds. The signature had one with same length, but to make it against the background, the text-shadow property's color was inverted.

EDIT-- Have my source :)



Originally posted by determinedpsi
ah well. some psix-themed styles can stay.
CSS3 keyframes and the linear-gradient background composed the background animation.

Oh. Yeah, CSS animation, huh? If I remember correctly, there's a reason why it isn't in this tutorial (transition is a separate, different property). I mean, it looked cool, but overall it's a little too crazy to use.

Originally posted by JackTheSpades
That is a really cool transision? How did you even make it? (Too lazy to dig through your CSS)
However, we no longer allow destracting CSS effect to the post layout. They are neat to look at but in the end, they just distract from the post itself. So I have to kindly ask you to remove it :<.


I assume hover effects are allowed as long as they aren't too distracting, right? For example, would the one example layout in the tutorial break the rule (Coding Layouts, Other Effects)?
It's just not in any tutorial here because none of us knew it existed back then.
I had a completely obnoxious pastel-cube background scrolling in the background of my last layout and nobody complained, so it's probably more a matter of "don't animate the part where the text is actually on".

Hover effects were outlawed a while ago (that's literally in that thread Jack linked), because one of the two states is guaranteed to be more readable, so you might as well make that one the only state it can be in.
That and people started making some really terrible decisions.
Your layout has been removed.
Originally posted by leod
people started making some really terrible decisions.

Perfect example of that:
>White background
>Black text
hover: make it white

*facepalm*



I don't know why, but my computer really doesn't like your (determinedpsi's) layout. It's mainly that one animation thing you have, but there's something else too. I found it weird since it's the only one that's causing me trouble. I mean, I guess my computer has been acting weird these days, but I still think there's something wrong there.

Also, I added a section about External CSS and another one with a list of useful tools (as well as fix a few other things in the tutorial). As always, feel free to suggest any other useful tools.
Originally posted by RanAS
I don't know why, but my computer really doesn't like your (determinedpsi's) layout. It's mainly that one animation thing you have, but there's something else too. I found it weird since it's the only one that's causing me trouble. I mean, I guess my computer has been acting weird these days, but I still think there's something wrong there.

Also, I added a section about External CSS and another one with a list of useful tools (as well as fix a few other things in the tutorial). As always, feel free to suggest any other useful tools.

Hmph. Weird...
Since I've tested with Maxthon, Firefox & Chrome my layout, also some seem to like it (betause it looks like it should... version of your browser please?)
A good thing for these advanced (non animated) gradients is the Colorzilla gradient editor.



Originally posted by determinedpsi
Since I've tested with Maxthon, Firefox & Chrome my layout, also some seem to like it (betause it looks like it should... version of your browser please?)

It happens with both Opera 33 and IE11, where CPU usage goes to nearly 100% and temperatures skyrocket. It only happens while viewing your layout, it doesn't happen with anything else, and it also doesn't happen when loading your layout, just while viewing it.

Midori doesn't do anything, but it doesn't even render the animation. My mobile browser also doesn't seem to mind, but that's an exception since it too can barely render animations.

EDIT: I've since figured out the temperature problem, but your layout still uses a little too much of my CPU.
Originally posted by RanAS
It happens with both Opera 33 and IE11, where CPU usage goes to nearly 100% and temperatures skyrocket. It only happens while viewing your layout, it doesn't happen with anything else, and it also doesn't happen when loading your layout, just while viewing it.

Midori doesn't do anything, but it doesn't even render the animation. My mobile browser also doesn't seem to mind, but that's an exception since it too can barely render animations.

EDIT: I've since figured out the temperature problem, but your layout still uses a little too much of my CPU.


Right.
I've based my layout in a generic one ( guess what one [: ) and just added one animation. Still high CPU?



Originally posted by determinedpsi
Still high CPU?

It's high for me (Firefox Linux). Looking at your layout instantly maxes one CPU core, and the animation stutters a little sometimes as well. Switch to another tab, it drops to zero.

From what I've seen, GIFs lag far less than CSS3, but I'm pretty sure a 800 frame GIF background would run afoul of the layout filesize limits. Do you need the animation at all?
<blm> zsnes users are the flatearthers of emulation
Originally posted by determinedpsi
Still high CPU?

Yep. It's a little less than before, but it's still quite high. Again, removing the animation property caused my CPU usage to go to normal.

Originally posted by Alcaro
From what I've seen, GIFs lag far less than CSS3, but I'm pretty sure a 800 frame GIF background would run afoul of the layout filesize limits. Do you need the animation at all?

I mean, there's always ways to save resources by reducing the GIF to a minimum resolution and using background-repeat, I don't think that one would consume either too many resources or filesize.

But in the end, it really comes down to "Do you need the animation at all?" Your layout looks really cool, but that animation is doing more harm than good. I don't see any problems with having just the non-animated background.
Just standard css3 animation really shouldn't peak anyone's CPU, I used a lot more of it in another layout and nobody ever complained.
It had a background scrolling at roughly the same pace with 2 layers at different speeds and a transparent image over the postbox that "shook" (rotated back and forth) every 20 seconds or so, which should definitely be harder than a simple horizontal scroll.
Not sure what IS making your CPUs go up so much though, maybe a combination of transparent image, resizing it using background-size and the animation?


By the way, when was the rule about centered text removed? Cause that still isn't any easier to read than it ever was.
Your layout has been removed.
Originally posted by Alcaro
It's high for me (Firefox Linux). Looking at your layout instantly maxes one CPU core, and the animation stutters a little sometimes as well. Switch to another tab, it drops to zero.

From what I've seen, GIFs lag far less than CSS3, but I'm pretty sure a 800 frame GIF background would run afoul of the layout filesize limits. Do you need the animation at all?


First: wat
Second: ...Alrighto.

Originally posted by leod
Just standard css3 animation really shouldn't peak anyone's CPU, I used a lot more of it in another layout and nobody ever complained.


Ho. I wonder....

Originally posted by RanAS
Yep. It's a little less than before, but it's still quite high. Again, removing the animation property caused my CPU usage to go to normal.

Ok... removed it.
Man, why I am so evil without knowing...
Do I even CSS3?




What I think of that is super complicated (for me) good because there are many codes to write they can do it easily because I am knowing the page

Well because i have normal difficulty
Thanks Fam.
I'll give it a try, it might take a while though.
I'll read the entire wall several more times
-"SMW CENTRAL needs more collaboration group projects, and more donors."
Can i use a GIF as a background?

  • Pages:
  • 1
  • 2