• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Forum moderator applications are now open! Click here for details.
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

CSS Help & Resources

2,956
Posts
18
Years
Last question:

How about linking images?
This is an example of the code I used
HTML:
[URL="http://www.google.com/"][img][/B]http://www.google.com/intl/en_ALL/images/logo.gif[/URL][/img]
But the image will not show up and it'll make all my pictures and text link to the said website.

Fix?
Place the [/url] after the [/img]. This is BBCode too, by the way.


Edit: I think you didn't upload the picture correctly. Try Photobucket or imageshack, then copy + paste the tag they gave you.
[/SIZE][/COLOR][/FONT]
 

THIRTY-SIX

Banned
8,174
Posts
19
Years
  • Age 35
  • Seen Nov 18, 2015
It should be [/img][/url]. No css involved. oo

The [/b] is the problem
 

Syrex

[b][i][COLOR=black][font=Rock Salt][glow=green]Hen
653
Posts
15
Years
oops -_-
My bad on that one. I knew it wasn't css but I ended up posting it here anyway.
Sorry, sorry, sorry.
 

Syrex

[b][i][COLOR=black][font=Rock Salt][glow=green]Hen
653
Posts
15
Years
I just wanted to say Thanks to Abnegation and everyone else that helped me.

I finished coding my signature following this thread.
This was the outcome :) Check Signature, Of course.
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
Yea I'll try not to xD. Its just too hard and too complicated for me to do it on my own right not xD.

It's not too hard, just code a lot and you learn them. Or make flash cards or something XD

I just wanted to say Thanks to Abnegation and everyone else that helped me.

I finished coding my signature following this thread.
This was the outcome :) Check Signature, Of course.

You're welcome, looks very good I do admit!
 

cyan.

▲ 愛してる .
274
Posts
15
Years
Does anyone know how to make text go on the image?
Like your signature, Abnegation
 

cyan.

▲ 愛してる .
274
Posts
15
Years
Thanks ^^

Just wondering to more things:

1) How do you get the crosshair cursor when someone goes over your signature?

2) How do you add a music player on your signature?


Sorry I'm asking so much.:nervous:
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023

1) How do you get the crosshair cursor when someone goes over your signature?
cursor:crosshair;
Put it in the code.

2) How do you add a music player on your signature?
With sound tags.

[sound"Song title here/words"]song url here[/sound]

No problem.
 
2,956
Posts
18
Years
Thanks ^^

Just wondering to more things:

1) How do you get the crosshair cursor when someone goes over your signature?

2) How do you add a music player on your signature?


Sorry I'm asking so much.:nervous:
Crosshair (last code):

[div=" width: 100px; height: 100px; background-color: white; cursor: crosshair"][/div]


Music player:

Link.

Edit: Curse you, Gavin xD;
 

_Dean_

smoke if you got it
914
Posts
14
Years
  • Age 32
  • USA
  • Seen Sep 22, 2016
Hey, maybe somebody here can help me! :D
I need to add a some texts in a link into my banner, here's the code.
Code:
[div=" color: red;cursor: crosshair; background-image:url("http://img689.imageshack.us/img689/8531/1259014078232z.jpg"); width: 320px; height: 241px; font-size: 11px; text-align: left;"]Give until there's nothing left...[/div]
I'd like to add a link in the next break, then one more break for some more text, and that's all. So three lines total. I just can't figure out how to add breaks and a link into it all. D:
 

THIRTY-SIX

Banned
8,174
Posts
19
Years
  • Age 35
  • Seen Nov 18, 2015
[div=color: red; cursor: crosshair; background-image:url("http://img689.imageshack.us/img689/8531/1259014078232z.jpg");width:320px; height: 241px; font-size: 11px; text-align: left;]Give until there is nothing left...
[url=http://www.pokecommunity.com/showthread.php?t=201075]I've seen the future and I need to stop it.[/url]
This would be the third line.[/div]

You needed quotes in the background image.

Give until there is nothing left...
I've seen the future and I need to stop it.
This would be the third line.


Of course put color tags inside the link tags to change colour.
 

~Teh Panda~

Back in hacktion
918
Posts
16
Years
  • Seen Jul 20, 2022
Ugh I wrote up a mini basics thingy...

CSS Document
CSS = Cascading style sheet

Example of CSS


This is a crappy CSS example :)​



Why is CSS used?
To enhance a posts design.
What is its format?
It is used as a BBCode. Here is the code for that 'crappy example'
HTML:
[div=" background-color: lightgrey; border-color: grey; border-style:solid;"]
[CENTER]This is a crappy CSS example :)[/CENTER]
[/div]
Disregard the text which you see in the css and focus on the coding.​
__________________________________________________________________________________________

Ok so now you now what a basic CSS code looks like I will present to you the basic code which is needed.
[css-div], from here you can almost code any design into it. I myself have even only touched the surface of some of these commands.

The most basics are parameter commands.
Believe it or not this is in CSS now, what you are reading is a simple width parameter edit, I chose 180px.​

Height would just edit how much height the CSS takes up regardlss of how much text you have. It is advised not to use the height parameter when doing complex CSS designs.

More on usage...
Since our main code is [css-div], we must add things to it to make it stylized. Just using this BBCode will not do anything. Here is a table of some basic commands.
Code:
Width - explained above.
Height - explained above
Border-style - solid, etc. (solid is preferred)
Border-color - in hexadecimal place the color.
Border-width - in pixels how wide you want your border.
Background-color - in hexadecimal place the color.
background-image:url(" ") - then place the url in quotes.
for more look through more CSS code...

Finally here is how you put the codes in the CSS-Div.

After you place the main [css-div], change it to
.
Now in the quotes you will add your parameters of CSS.
Here try to make your first CSS with a 400px wide, 2px black border, and white background.
So place your CSS-Div, now add the new parameters.

Here is the code you should have gotten, or something like it...

HTML:
[div="background-color: #FFFFFF; width: 400px; Border-color: #000000; border-width: 2px; Border-style:Solid;"][/div]

Yep, should be like this.​


Basics tutorial over :)
 

THIRTY-SIX

Banned
8,174
Posts
19
Years
  • Age 35
  • Seen Nov 18, 2015
Blech, can someone explain to me how to form the line-height CSS in BBCode? xD;

It's best if you leave line height as normal... especially if you are just going to leave the text the way yours is set and not do it typographical. It just seems as if you have an extra break and two div/span tags for each line, which is unnecessary. If you want an extra space like that without two tags line-height:200%;

Oh wait... you are using span and div wrong there me thinks.
 
2,956
Posts
18
Years
It's best if you leave line height as normal... especially if you are just going to leave the text the way yours is set and not do it typographical. It just seems as if you have an extra break and two div/span tags for each line, which is unnecessary. If you want an extra space like that without two tags line-height:200%;

Oh wait... you are using span and div wrong there me thinks.
I just wanted the space between the two lines to not be so far apart. I got it to work, though. Thanks!
 

Morkula

[b][color=#356F93]Get in the Game[/color][/b]
7,297
Posts
20
Years
Going to shoot this over to Webmasters Discussion where it belonged to begin with~
*Moved*
 
Back
Top