Re-Stylise Your Profile With CSS.

next »Page 1 2 3 4 5 6 ... 19

TobyToby said

a long time ago | Post #1

Read ME first!


Here is a Fansite-Documentation which will do EVERYTHING below without any coding knowledge required. Enjoy!

The correct people are credited if I used your codes below. ;)


Yes, so the newnoba appears to have broken many of your CSS pages due to the class' being renamed and such, but never fear! Post what you know about and together we can recreate our pages!

Teh C0des!

These extracts go into the settings -> text -> stylesheet area of your profile. Enjoy.

How to Change the Background Image:

This code will change the lower (white) area of your profile to whatever you want.

Replace IMAGEURLHERE with the location of the background image you want.

How to change your profile text box.

This code will change the textbox of your profile by altering the background.

First you'll need this image:

then use this code:

Again, replace EDITEDIMAGEURL with the image location.

NEXT you need to fix the tops and bottoms. For this you'll need this image:

And you'll have to change this code:

And as if I need to tell you. Replace IMAGEURLHERE with the location of the edited file.

How To Edit the Nonoba Logo

NO. Do not remove the Logo, do not make it un-seeable, people want to be able to know where they are

The logo should be 70 by 150 in dimensions.

And yes, unless you really didn't grasp the concept yet. IMAGEURLHERE refers to the location of your new logo.

How to Edit the SearchBox

Ok, so first you'll be wanting this image:

Download it, edit it and then reupload it.


Then replace IMAGEURLHERE with it's location.

How to Change The Wunderbar (playbar) Background:

This is another simple edit.

IMAGEURLHERE should be the location of the background image.
For this image you can use replace "repeat" with "repeat-x" to make it a side scrolling image only. If you are doing this, the image will need to be a height of 61px.

How to change the Standard boxes (on the right).

This is another standard image swap. You'll need this files:

Image 1:
Image 2:

Replace IMAGE_1_URL and IMAGE_2_URL with their locations respectively.

How to Change the Colour of the "Focus-Bar".

The focus bar (i.e. That blue thing between navigation and the the page-content) can be changed by editing its hex value. Here is the code:

Replace NEWHEXHERE with your new colour hex.

Don't know how to find a hex? Look down in the F.A.Q



Where Can I upload these images?

There are multiple sites you could use. My favourite (they don't limit bandwidth or require an account) is

Somthing I want isn't on here.

I'm looking as are others. Just post about things you find here so we can create some form of knowledgebase.

Q.My image only displays once and then just a blank Colour, why?

A. This is because the repeat tag hasn't been added after the image. Lets take this case, for example:

Because the url is followed by repeat it will copy in ALL directions. If we changed this to repeat-x then it will only repeat along the horizontal (<--->) axis, and only across the y axis if we change it to repeat-y. If you want it to loop then change it from no-repeat to one of the above.

Q.What is a colour hex value and how do I get one?

From Wikipedia:
A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order:

Byte 1: red value (color type red)
Byte 2: green value (color type green)
Byte 3: blue value (color type blue)

If you don't care about that stuff:
To find a hex for your CSS goto:
and copy the 6-digit code from the coloured square you want.

Q.Somthing is not positioned the way I want it, how can I fix this?

A. You can use top, left, right, bottom. For example, if your nonoba logo is too high on the page, adding:

on the line above

will move it down 12 pixels. Left is distance from the left and right and bottom are hopefully obvious from there.
Last edited a long time ago
Post #2 deleted

Lyra_ said

a long time ago | Post #3
<3 Toby
Post #4 by area51 has a score of -20. show

area51area51 said

a long time ago | Post #4
Post #5 deleted
Post #6 by Inferno Emporer has a score of -5. show

Inferno EmporerInferno Emporer said

a long time ago | Post #6
Wait now can u add pics in your personal folders as a backround!

blakeg14 said

a long time ago | Post #7
cool! Thanks Toby.
I gotta start working on my css :D

timztimz said

a long time ago | Post #8
yaaaaaaaaaaay <333
Post #9 deleted

TobyToby said

a long time ago | Post #10
Inforno Emporer, the files must uploaded to the internet, you cannot use locally stored files for your CSS.
Post #11 deleted

TobyToby said

a long time ago | Post #12
^There. Upload to him.
Post #13 deleted
Post #14 deleted

blakeg14 said

a long time ago | Post #15
what's the "playbar"?

TobyToby said

a long time ago | Post #16
That's due to the space you left between "background:url" and "(http://...".
You'll need this:

The top:12px essentially moves it 12px from the top of the page.
Post #17 deleted
Post #18 deleted

TobyToby said

a long time ago | Post #19
Sorry, blakeg14! Didn't see your post! The 'playbar', 'Wunderbar' or Wonderbar (jokingly of course :3) as I call it, is the the new bar at the bottom of all the pages. It has the Noba, 4 tiles and settings along it. Look Down! :)
Post #20 deleted
next »Page 1 2 3 4 5 6 ... 19

Reply to thread

Sign up now to reply to threads

About Fltron | Latest News | FAQ | Support & Contact | Privacy Policy
Copyright ©2007-2010 Fltron™ - All rights reserved.
31,2002ms on NONOBA-WEB2
Support & Contact | Privacy Policy