So you want to decorate your alliance page?
First off, a few facts.
- The OGame alliance page uses BBCode.
- HTML code is ignored.
- Some css (Cascading Style Sheets) seems to work.
So BBCode it is.
Some basic tags are listed below. These are for changing text:
[b] Your text [/b]
This tag bolds the text. Simple enough.
[i] Your text [/i]
This tag makes your text italic.
[fc]#FF00FF[/fc] Your text [/f]
Alright, getting a bit more advanced here. This tag changes the font color
of your text to the hex color. The hex color ranges from #000000 (black) to #FFFFFF (white), and there are 16,777,216* colors (256^3).
You can also substitute names into here. Such as skyblue.
Note: The hash (#) needs to preceed the hex code. You can find a list of the
colors all over the WWW.
•My initial number was wrong. Thanks for the point out. :)
[ff]Verdana[/ff] Your text [/f]
This tag changes the font face of your text.
The font faces are dependent on the skin you are using, as I was told.
So just use common fonts.
[fs]2[/fs] Your text [/f]
This tag changes the font size of your text.
It only has the range of 1-7. 7 being the largest.
This tag places the image for energy from the evolution skin onto your page.
You can upload your own images onto an image-hosting server, and then use
those images instead. Note that these must be in the right language,
non-offensive, and generally keep them small in size (under 80kb).
But remember, use your imaginations to decorate it. You can do most things
with images. You can use animated gifs for fancy effects, you can add dynamic
images (PHP), you can use images for titles instead of words, you can combine tags.
Lots of things. :)
There is a nice thread on the OGame forums about this.
I don’t think it’s moral to remove some of the stuff, since it’s rather unique
stuff. But check it out for some stuff about embedded sounds, some css
Dun dun dun!
I found a way to align text, among a lot of other stuff with css.
Anyway, the following ideas are my own work, but I did get inspiration from zinzin’s
work with css implementation in BBCode.
This may/may not work on all browsers and skins.
[fc]#FFFFFF style=’ display: block; text-align: left;’[/fc]
This aligns text after this point to the left and changes the
font color to white (which is already is).
To cancel that, you simply add:
[fc]#FFFFFF style=’ display: block; text-align: center;’[/fc]
And all text after that will be back in the center and changes
the font color to white, again.
You can also place text on the right.
This alignment can be very useful for making a cool
alliance page. The block attribute is to define the type of area, and that there is a left and right side, I think. Not too sure. Seems to be important for aligning however.
Other css attributes that can be used in the style tag:
Syntax: [fc]#FFFFFF style=’ Attribute1; Attribute2; Attribute3;’[/fc]
This changes the color of the background from the point where it was declared. You can use hex colors, or RGB colors, but just use hex.
This underlines the text from the point where it was declared.
This makes the font lighter, or you can use other examples. Look on other css sites to see some other values that are accepted. Note: not all will work.
This moves the text 50 units to the right. I’m not sure how many units, it might be pixels, it might be something else. Anyway, use this to add a margin. Negative values will move the text off of the assigned area, and it will look stupid.
This adds a margin to the top of your text, not too useful. Maybe you can find a use.
This changes the spacing between lines, and this can be used to space/condense your lines of text. I’m sure you can find a use for this.
This is a delightfully useless piece of code. This changes the cursor to the one specified by the url. Use a file-hosting website to host your cursor (*.cur), and then specify it in the link. You can also use values instead of the url like crosshair, and there are more. Look for them on a css website. I tried with a cursor file, and it only worked while hovering on text, while the crosshair works on the page. To make your own cursor, download a trial version of a cursor making program, unless you actually want to pay. :P It’s not as simple as renaming a bitmap.
Examples of usage of the css attributes:
[fc]#FFFFFF style=’ margin-left: 20; background-color: #000000; cursor:url(“mycursor.cur”); display:block;’[/fc]
Would create a black, boxed area, 20 pixels from the left margin of the alliance page, with a custom cursor when going over text, with the text wrapping and white font.
[fc]#FFFFFF style=’ display:block; line-height: 5px; margin-top: -5; font-weight: lighter; text-decoration: underline;’[/fc]
Would make your margin 5 pixels up, the line-height 5px, block text, thin text, underlined.
There are more things you can do with css, these are some of the more interesting ones. Have fun making a beautiful page that everyone will envy.