Ultimate Shinobi - A Naruto RPG



 
HomePortalCalendarFAQSearchMemberlistUsergroupsRegisterLog in

Template How-To: CSS Explanation, Tutorials, Tips, and More!

View previous topic View next topic Go down
Setsugekka
avatar

Age : 21
Posts : 266

PostSubject: Template How-To: CSS Explanation, Tutorials, Tips, and More! Wed 09 Jan 2013, 2:23 am


The one thing I noticed here once I posted my templates is that a lot of people were curious about 1) How I learned so "much" CSS and 2) How I went about making templates. So I figured it'd make sense for me to do a compilation of sorts about template making. It's extremely easy, especially if you have background knowledge in CSS. Even if you don't know how to utilize Photoshop or GIMP, you can still edit your text to look a bit fancier and create a simple text box. :3 As always, this is a WIP guide so feel free to comment and ask for things to be added or explained on. I hope everyone is able to make good usage out of this.

Resources: They're Great

W3Schools - While I learned all of my CSS from doing web design work in school and through roleplaying, this place is amazing. It offers live tutorials and thorough explanation, as well as a large color index so you can get hexadecimal colors and use them to spice up your templates.

W3Schools: HTML Color List - All these colors are presented in hexadecimal, which is the most common way of allowing colors to be used on the internet. I know a handful of colors by heart but you obviously aren't expected to know them!

More to come soon!

CSS: What is that?

CSS is short for cascading style sheets. While I won't go over the history of CSS, you should know that CSS is essentially, how we make things look pretty and how we customize things. On UltimateShinobi, we have tags such as bold and italics, which we can also use in CSS. UltimateShinobi supports CSS and BBCode - the latter being all the options you see underneath the title of the topic area, which you can use to edit your post such as; changing font color, changing font, changing font sizes, making lists, centering text, adding images, and other sorts of cool things.

So you might be wondering: well, what the hell is the difference between the two? I'll show.

This is how you bold in BBCode.
Code:
[b]This is how you bold in BBCode.[/b]

Notice the [ ] bracket symbols. That's a big, main difference - bracket symbols won't work in pure CSS, but on US, you can mix CSS with BBCode.

This is how you bold in HTML/CSS.
Code:
<b>This is how you bold in HTML/CSS.</b>

Notice the < > symbols, which is the only way HTML/CSS will work.

How can I make things look cool?


Easily. I'll jump right into it - if you want to stylize your text, you need to put your info inside of a div, which allows you to use a long thing of CSS, rather than multiple BBCode tags!

Example;


This is in red!

Code:
<div style="font-size: 20px; color: #B00000; font-family: arial, sans-serif; letter-spacing: -1px;">This is in red!</div>

This is in red too!

Code:
[size=20][color=b00000][font=arial]This is in red too![/size][/color][/font]

See how easier it was using the div rather than using the BBCode? Not only that, but I could do things I can't do in BBcode like use the letter-spacing function, which allows me to decrease the spacing between the letters in what I write.


In my next post, I'll give an explanation on all the CSS styles you can use. Smile
Back to top Go down
View user profile
Setsugekka
avatar

Age : 21
Posts : 266

PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Wed 09 Jan 2013, 2:29 am

Alright, this is what you were all interested in: all the ways you can make things look cool.

CSS/HTML Styling Attributes

border: this gives you the option of having a border completely around the object (meaning all sides). you write it like this;
Code:
border: 5px solid #000000;

5px is the thickness or weight of the line, solid is how the line looks (you can use dashed or dotted as well) and #000000 is the hexadecimal color.


height: set the height of something. make sure to end it with "px"!

Rest coming soon!!
Back to top Go down
View user profile
Setsugekka
avatar

Age : 21
Posts : 266

PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Wed 09 Jan 2013, 2:30 am

reserving this post in case i need it.
Back to top Go down
View user profile
MsMoney
Wanderer
avatar

Age : 30
Posts : 2201

PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Wed 09 Jan 2013, 3:44 am

As a person who cannot do templates or anything really, then I am saying right now that I love this thread x) AWESOME JOB MAN
Back to top Go down
View user profile
Setsugekka
avatar

Age : 21
Posts : 266

PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Wed 09 Jan 2013, 4:17 am

Np!! Glad it could be of use. It'll be edited as soon as I get time to do so.
Back to top Go down
View user profile
Guest


PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Wed 09 Jan 2013, 7:26 am

You're an utter sweetheart. Way to spread the beauty! <3
Back to top Go down
Kayden
avatar

Age : 20
Posts : 103

PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Thu 10 Jan 2013, 4:00 am

Glad to see this, I have dabbled in HTML some and made a few basic sites. I'd love to learn this more, and find this very resourceful, thanks!
Back to top Go down
View user profile
Flare
Kumo Nin
avatar

Age : 22
Posts : 3640

PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Thu 10 Jan 2013, 7:20 pm

I would love to do stuff like this, but my patience and attention-span... not great
I was fascinated to read about it though!
Back to top Go down
View user profile http://www.ultimateshinobi.getgoo.us/forum
Cookie Monster
Swaglord
avatar

Age : 22
Posts : 4301

PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More! Sun 21 Jul 2013, 12:43 pm


Archived.

________________


.:Senju, Morijin:.
[340 | 340] Hokage [240 | 240]
.:Celene = Whale Buddy For Life:.
Back to top Go down
View user profile http://www.ultimateshinobi.org
Sponsored content


PostSubject: Re: Template How-To: CSS Explanation, Tutorials, Tips, and More!

Back to top Go down

View previous topic View next topic Back to top
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
-