The Uberstyle Dictionary

A Tutorial for GameBanana

Notice: I'm considerring deleteing this tutorial and making one specifically for CSS so that I'm not so restrained. Just thought you should know. Note: Before you even think about editing your UberStyle, you must have at least a moderate understanding of HTML Note: The newest updates will be monospaced
Table of Contents
  1. Introduction
  2. Groups
  3. Classes
  4. Colors
  5. Properties
    1. The Backgrounds
    2. The Texts
    3. The Fonts
    4. The Borders
    5. The Margins
    6. The Paddings
Introduction
First off you need to know what the UberStyle actually is. It is a cascading style sheet, or CSS, and is used to say how to display HTML elements, I.E. what colors to use, etc.
Groups
If you look at the top line in your UberStyle you should see:
body, input, select, optgroup, textarea, tr, legend { cursor: default; font: 13px 'Arial' }
or something like that. That is a group, which is used to determine which tags will be affected by the classes following it. At first you probably won't be editing the groups, but later on you'll be adding them regularly. Seperate tags must be seperated by a comma (,). The syntax is:
tags { property: value }
Multiple property-value sets must be seperated by a semicolon (;). I.E:
tags { property: value; property2: value2 }
Classes
Do you see all of those lines that are preceeded with a "."? Those define classes. The classes can only be used with the tags in the group that preceeds them. For example, if you have:
body, input, tr .blue { color: blue }
then < body class="blue"> would work, and the text inside it would be blue, but < div class="blue"> would not work, because it is not listed in the group. Always remember that the property and value are seperated by a colon (:). The syntax is:
.class { property: value }
Classes can also be specified by using:
tag.class { property: value }
Colors
There are three ways to indicate a color where necessary. You can use the colors hex. I.E:
{ color: #00ff00 }
Or you can use the colors RGB (red, green, and blue) values. I.E:
{ color: rgb(127,34,90) }
You can also use the colors name such as: green, navyblue, beige, turquoise, and just about any other color you can think of, as well as transparent.
Putting an image in the FPSBanana logo
Look through your UberStyle and find where it say's ".color1" and replace the text within the brackets with "background-image: url(http:// image url)". Simple enough.
Properties
Here I am going to list most of the properies and their possible values. The Backgrounds this can be used the change the backgrounds of any element, not just the main background. Background-color: Use a color as explained previously. Background-image: Syntax: { background-image: url(http://url) } always remember to include the http:// Background-repeat: Use either repeat-x, repeat-y, repeat (which repeats on both axes), or no-repeat. Background-attachment: Either scroll or fixed. If it's fixed the background doesn't move, if it's scroll it does. Background-position: Any combination of top, center, or bottom with left, center, and right. I.E. top center or bottom left. Background: Used to include all of the previous in one. Use the order color, image, repeat, attachment, position. The Texts This changes how the text is displayed, but mainly deals with the location of text. Color: Use a color as explained previously. Letter-spacing: If you want the default just don't use this. To change use a length in pixels. I.E. { letter-spacing: 5px }. Note that there is no space between the number and the px. Text-align: Use left, right, or center. Text-decoration: Use underline, overline, line-through, or blink Text-indent: Use a length in pixels or a percentage Text-transform: Use capitalize, uppercase, or lowercase. Word-spacing: Use a length in pixels. The Fonts This also changes how the text is displayed, but mainly deals with the size and style of the text itself. Font-size: Use xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, or a pixel size. Font-stretch: Use normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded or ultra-expanded. Font-style: Use italic or oblique. Font-variant: Use small-caps, which makes the lowercase letters look uppercase, but smaller. Font-weight: Use bold, bolder, lighter, or 100, 200, etc. to 900. The Borders These are primarily used for fieldsets, divs, buttons, etc. but can be used for anything. Border-color: Use a color as previously explained. Border-style: Use hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. Border-width: Use thin, medium, thick, or a width in pixels. To change the color of the different border sides do as so: { border-color: #ff0000 #ffff00 #ff00ff #00ffff }. The order it colors in is top, right, bottom, left. You can do the same with the other border properties like: { border-style: dotted groove dashed inset }. It uses the same order. The Margins The margin is the distance between one element and another. Margin-top: Use a length in pixels or a percentage Margin-right: Use a length in pixels or a percentage Margin-bottom: Use a length in pixels or a percentage Margin-left: Use a length in pixels or a percentage Margin: Used to include all of the margins properties in one. The order goes: top, right, bottom, left. I.E: { margin: 2px 4px 6px 8px } The Paddings Padding is the distance between the border of an element and the text inside it, not to be confused with margins. Padding-top: Use a length in pixels. Padding-right: Use a length in pixels. Padding-bottom: Use a length in pixels. Padding-left: Use a length in pixels. Padding: Used to change all of the padding properties in one. Again, the order used is top, right, bottom, left. The screenshots included are examples of what may be accomplished through editing your UberStyle. If you have ANY questions don't hesitate to ask via PM or in my profile. Also if you just don't want to do the work I will make you a style for points. Just provide enough information. I would also like suggestion on things to add.
1-10 of 43
1
Pages
Go to page:
  • Vcc2cc avatar
    Vcc2cc Joined 13y ago
    Offline
    3,754 points Ranked 2077th
    12 medals 1 legendary 1 rare
    • 10 years a member Medal icon
    • 6 years a member Medal icon
    • Reached 1,000 Points Medal icon
    • Reached 2,500 Points Medal icon
    • 1 post awarded Exemplary Feedback Medal icon
    • 5 posts awarded Exemplary Feedback Medal icon
    access_time 11y
    This just confused me it says... "The Borders These are primarily used for fieldsets, divs, buttons, etc. but can be used for anything. Border-color: Use a color as previously explained. Border-style: Use hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. Border-width: Use thin, medium, thick, or a width in pixels. To change the color of the different border sides do as so: { border-color: #ff0000 #ffff00 #ff00ff #00ffff }. The order it colors in is top, right, bottom, left. You can do the same with the other border properties like: { border-style: dotted groove dashed inset }. It uses the same order." but it dont sya where to cahnge the border colors at...or how to make an image the border. ARGH this is confusing.
    URL to post:
  • Phant0m avatar
    Phant0m Joined 12y ago
    Offline
    2,256 points Ranked 20324th
    access_time 11y
    Posted by s500i93
    Posted by felipegoes This Is not in HTML
    its in XML :)
    Actually it is a basic CSS script.
    Gaming should not be taken too avatar
    Mantra
    Gaming should not be taken too
    URL to post:
  • Embusque avatar
    Embusque Joined 12y ago
    Offline
    5,336 points Ranked 1199th
    9 medals 1 legendary 1 rare
    • 10 years a member Medal icon
    • 6 years a member Medal icon
    • Reached 1,000 Points Medal icon
    • Reached 2,500 Points Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    access_time 11y
    Great job. This helps me out a lot. :D
    Vote me MEMBER UBERSTYLE OF TH
    URL to post:
  • MardenThing avatar
    MardenThing Joined 13y ago
    Offline
    2,035 points Ranked 20638th
    9 medals 1 legendary 1 rare
    • 10 years a member Medal icon
    • 6 years a member Medal icon
    • Reached 1,000 Points Medal icon
    • 1 post awarded Exemplary Feedback Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    access_time 11y
    Has this been updated?
    URL to post:
  • s500i93 avatar
    s500i93 Joined 12y ago
    Offline
    252 points Ranked 52456th
    access_time 11y
    Posted by felipegoes This Is not in HTML
    its in XML :)
    not Banned yet =D avatar
    Mantra
    not Banned yet =D
    URL to post:
  • Degger avatar
    Degger Joined 12y ago
    Offline
    157 points Ranked 59184th
    access_time 11y
    Yea, omg why delete. Useful!
    The man with few words avatar
    Mantra
    The man with few words
    URL to post:
  • felipegoes avatar
    felipegoes Joined 12y ago
    Offline
    883 points Ranked 41354th
    access_time 11y
    This Is not in HTML
    You Won't Get A Second Shot In avatar
    Mantra
    You Won't Get A Second Shot In
    URL to post:
  • Mxmlln avatar
    Mxmlln Joined 13y ago
    Offline
    40,370 points Ranked 103rd
    17 medals 1 legendary 2 rare
    • 10 years a member Medal icon
    • 6 years a member Medal icon
    • Returned 1000 times Medal icon
    • Reached 1,000 Points Medal icon
    • Reached 2,500 Points Medal icon
    • Reached 7,500 Points Medal icon
    access_time 12y
    This is going to be very very usefull. Thanks for making this :) 10/10 obv.
    fpsb?
    URL to post:
  • Eugene avatar
    Eugene username pic Joined 14y ago
    Offline
    8,252 points Ranked 717th
    20 medals 2 legendary 2 rare
    • 10 years a member Medal icon
    • Submitted 200 Threads Medal icon
    • 6 years a member Medal icon
    • Submitted 100 Threads Medal icon
    • GAMEBANANA Spray Contest Entrant Medal icon
    • Reached 1,000 Points Medal icon
    access_time 12y
    Posted by uniQue I have no understanding of html so it sucks for me.
    This is not html, its css.
    this site is dead avatar
    Mantra
    this site is dead
    URL to post:
  • ChesireGuy avatar
    ChesireGuy Joined 12y ago
    Offline
    1,095 points Ranked 23821st
    9 medals 2 rare
    • 6 years a member Medal icon
    • Submitted 50 Maps Medal icon
    • One month a member Medal icon
    • 6 months a member Medal icon
    • 1 year a member Medal icon
    • 2 years a member Medal icon
    access_time 12y
    Hey, don´t delete. I don´t know nothing about uberstyle!
    We're all mad here... avatar
    Mantra
    We're all mad here...
    URL to post:

Embed

menu
Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Key Authors
Teh Maestro
Unknown

Submitter

Teh Maestro avatar
Teh Maestro Joined 14y ago
Offline
121,908 points Ranked 23rd
12 medals 1 legendary 2 rare
  • 10 years a member Medal icon
  • Reached 75,000 Points Medal icon
  • 6 years a member Medal icon
  • Reached 1,000 Points Medal icon
  • Reached 2,500 Points Medal icon
  • Reached 7,500 Points Medal icon
Teh Maestro
Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Details

Difficulty Level
Intermediate

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • favorite 30
  • remove_red_eye 11.7k
  • mode_comment 48
  • access_time 13y
  • access_time 12y

More from Submitter

menu

WiPs by Submitter

menu

More Other/Misc Tutorials