PDA

View Full Version : HTML help?


laralives
17-12-06, 16:50
I hope i am allowed to post this...

Well,my friend has a forum on invision free...
He has a very dark backround (black) i was recently made Admin and i asked him if i could try to change the backround he said it was fine...
so i decided to look at the code...i was like OMG :cln: what is this...
Not a recognizable language :cln: So i decided to look on the main invision free website to see if there was a tutorial on how to change the backround...Well i did find something...but it said you had to know a whole different language :cln: CSS so i was bummed because i had no clue :hea: but i found this other thing that said something about changing a back round and it said about finding a line of text and all you needed to do was change a couple of things and enter new jibberish words...

The first time I managed to make everything white OOOPS! :cln: (luckily he didn't mind :D *a good friend*)
The second time i manage to add grey bars... which i might add was really cool :cln: (he thought i was cool)

but can someone plz point me in the right direction or just tell me how to change the backround...

If you need the code...here it is...

html { overflow-x: hidden; overflow-y: auto; }
form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #FFF; margin:0px 10px 0px 10px;background-color:#000 }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #FFF; }
a:link, a:visited, a:active { text-decoration: underline; color: #FFF }
a:hover { color: #AAA; text-decoration:underline }
fieldset.search { padding:6px; line-height:150% }
label { cursor:cursor; }
img.attach { border:2px outset #EEF2F7;padding:2px }
.googleroot { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#FFF; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#FFF }
li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help { padding:0px 0px 0px 15px }
option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#FFF }
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#FFF;background-color:#000;padding:4px;margin:0px }
.warngood { color:green }
.warnbad { color:red }
#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }
#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }
#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px white }
#photoimg { text-align:center; margin-top:15px }
#ucpmenu { line-height:150%;width:22%; border:1px solid #FFF;background-color: #000 }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #000; border:1px solid #FFF;line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }
#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #FFF;background-color: #000;background-image:url(http://72.139.216.38/buttons/tile_back.gif);padding:0px;margin:0px; }
#submenu { border:1px solid #FFF;background-color: #000;font-size:10px;margin:3px 0px 3px 0px;color:#FFF;font-weight:bold;}
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #FFF; }
#userlinks { border:1px solid #FFF; background-color: #000 }
#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }
.activeuserstrip { background-color:#000; padding:6px }
.pformstrip { background-color: #000; color:#FFF;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #000; padding:6px; margin-top:1px;width:25%; border-top:1px solid #FFF; border-right:1px solid #FFF; }
.pformleftw { background-color: #000; padding:6px; margin-top:1px;width:40%; border-top:1px solid #FFF; border-right:1px solid #FFF; }
.pformright { background-color: #000; padding:6px; margin-top:1px;border-top:1px solid #FFF; }
.post1 { background-color: #000 }
.post2 { background-color: #181517 }
.postlinksbar { background-color:#000;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://72.139.216.38/buttons/tile_sub.gif) }
.row1 { background-color: #000 }
.row2 { background-color: #000 }
.row3 { background-color: #000 }
.row4 { background-color: #000 }
.darkrow1 { background-color: #535353; color:#FFF; }
.darkrow2 { background-color: #3c3c3c; color:#FFF; }
.darkrow3 { background-color: #000; color:#FFF; }
.hlight { background-color: #000 }
.dlight { background-color: #000 }
.titlemedium { font-weight:bold; color:#FFF; padding:7px; margin:0px; background-image: url(http://72.139.216.38/buttons/tile_sub.gif) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #FFF }
.maintitle { vertical-align:middle;font-weight:bold; color:#FFF; letter-spacing:1px; padding:8px 0px 8px 5px; background-image: url(http://72.139.216.38/buttons/tile_back.gif) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: underline }
.plainborder { border:1px solid #FFF;background-color:#000 }
.tableborder { border:1px solid #FFF;background-color:#000; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #FFF;background-color:#000;padding:6px; }
.tablepad { background-color:#000;padding:6px }
.tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
.wrapmini { float:left;line-height:1.5em;width:25% }
.pagelinks { float:left;line-height:1.2em;width:35% }
.desc { font-size:10px; color:#FFF }
.edit { font-size: 9px }
.signature { font-size: 10px; color: #FFF }
.postdetails { font-size: 10px color: #006699}
.postcolor { font-size: 12px; line-height: 160% }
.normalname { font-size: 12px; font-weight: bold; color: #FFF }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #c20000 }
.searchlite { font-weight:bold; color:#FFF; background-color:#000 }
#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #ffffff; background-color: #353b61; background-image:url(http://72.139.216.38/buttons/quoteback.jpg); border: 1px solid #FFF; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #fff; background-color: #353b61; background-image:url(http://72.139.216.38/buttons/quoteback.jpg); border: 1px solid #FFF; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }
.codebuttons { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #FFF;border-bottom:1px solid #FFF }
.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }


Thank You for whomever helps :hug:

jamieoliver22
17-12-06, 16:57
Thats just basic CSS.. Easy! :D

To change the background, just edit this section:


BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #FFF; margin:0px 10px 0px 10px;background-color:#000 }


Change the 'background-color:#000' section to the the colour that you want. The colours are stored using HEX.

Jamie.

laralives
17-12-06, 17:01
Thats just basic CSS.. Easy! :D

Easy for you to say! :tea:

okay now to find out how HEX numbers/letters are :cln:

But what if i wnat to put an image?

Btw

Thank you for the help :hug: :gki:

jamieoliver22
17-12-06, 17:03
But what if i want to put an image?


Change it to this:

background-image:(www.imagelocation.com/image.gif);
Change "www.imagelocation.com/image.gif" to the URL of the image.


EDIT: For future references, it may be useful to read this: http://www.w3schools.com/css/default.asp

Titanium
17-12-06, 17:04
http://www.steves-templates.com/guide/color.gif

That has a nice list of hex colours. :)

jamieoliver22
17-12-06, 17:06
Yeah, there are hundreds of hex colour charts around. Most programs actually show you colours in HEX format anyway (such as FrontPage, Dreamweaver).

Also, try these ones too:
http://www.liu.edu/cwis/CWP/library/colors.htm
http://my.athenet.net/~franklin/tips/hexclick.html

laralives
17-12-06, 17:10
Change it to this:

background-image:(www.imagelocation.com/image.gif);
Change "www.imagelocation.com/image.gif" to the URL of the image.


EDIT: For future references, it may be useful to read this: http://www.w3schools.com/css/default.asp (http://www.w3schools.com/css/default.asp)

okat thank you (again) :hug: Does the image have to be a gif?

http://www.steves-templates.com/guide/color.gif

That has a nice list of hex colours. :)
Thank you :hug:

Yeah, there are hundreds of hex colour charts around. Most programs actually show you colours in HEX format anyway (such as FrontPage, Dreamweaver).

Also, try these ones too:
http://www.liu.edu/cwis/CWP/library/colors.htm
http://my.athenet.net/~franklin/tips/hexclick.html

THANK YOU! You have both been a great help thank you! :hug:

jamieoliver22
17-12-06, 17:17
okat thank you (again) :hug: Does the image have to be a gif?


No, that was only an example.. But GIF or low JPEG would be best, for quicker loading times.

Jacob x5
17-12-06, 17:32
If you have Photoshop, you can select a colour from its palette and it will tell you the hexidecimal figure. :wve: