A guide to fancy layouts [ more to come... ]
Mar 20, 2015 22:10:20 GMT -5
Post by ℐingle on Mar 20, 2015 22:10:20 GMT -5
Snazzy Coding
So you want to make something like this, huh?
Then I may be able to help!
Then I may be able to help!
These are slightly advanced codes...
I recommend checking out a few other tutorials before checking into this one if you're new at this.
color & font guide, & template and other codes
I also want to mention that this websites codes are very odd compared to actual html/css, they have a unique system of bbcode and html mixed together. It's very neat but requires some adjustment if you're used to normal style sheets and basic html.
Instead of using < > for tags, we will be using [ ].
I recommend checking out a few other tutorials before checking into this one if you're new at this.
color & font guide, & template and other codes
I also want to mention that this websites codes are very odd compared to actual html/css, they have a unique system of bbcode and html mixed together. It's very neat but requires some adjustment if you're used to normal style sheets and basic html.
Instead of using < > for tags, we will be using [ ].
Fun with Divs
A div is the 'text' box essentially. It's a fairly simple concept but is needed to build more advanced codes.
The skeleton of the div will look like this;
[div] [/div]
You can add many things to your divs, backgrounds, borders, shadows, padding, alignment, and more with the style function. Now usually a website, like this forum, will have a separate sheet of styles like this. That is called CSS [Cascading Style Sheet] and is not used here. Instead of making a separate sheet or an embedded one, we will simply add it into the div's code.
That will look like this;
[div style=" styles will go here "] [/div]
Here is a list of styles you may commonly use with your div;
width: 100px;
height: 200px;
Backgrounds;[li]This can be with either a color or an image.
[ for color I recommend 6 digit hex codes ][/li]
background:#000000;
background:url('image url here');
Borders;[li] This is the outline of the box. There are different styles of borders you can choose from like;
solid, double, dotted, and dashed.
You can also choose the thickness and color of the border.[/li]
ex. of order: thickness type color
border: 1px solid #000;
Radius;[li] this is the roundness of the corners of your box, the bigger the number the bigger the curve.[/li]
border-radius: 20px; (a slight curve)
border-radius: 100px; (dramatic curve)
[/ul]
These are not all of the styles of course, I will add on when I have time. A useful but not 'fancy' code is 'margin:auto' as this centers the div.
You can use all of these codes together and it will look something like this;
[div style="width:120px;height:50px;background:#000000;border:4px solid #387C44;border-radius:20px;margin:auto"] ... [/div]
...
and that is what it will look like!
Design Tips;
- do not use more than around 5 colors
- stay away from comic sans, chiller and fonts that are not easily read
- contrast is very appealing, while clashing is not.
- pick a theme and stay with it
- DO NOT steal other peoples idea, codes or layouts unless they allow you. It may not be a crime like art theft but it sure as heck is not nice. I, and other coders, spend a lot of time making and designing these layouts you know.
......... . .. ..... . .. . to be continued. ..... . .. ... . ..... . ..
to be added;
box shadows, hover codes, opacity, etc
[/font]
[/div]
Have any questions?
Shoot me a message!
--
I'll open up for layout requests soon ;V
Shoot me a message!
--
I'll open up for layout requests soon ;V
[/div]