CSS Help & Resources

[Hybrid Trainer]

Now how do you put their names underneath their images?

In the same way you did it with the pictures, put the text inside the cd tags like so.

Eevee Vaporeon

[cd="background-color:black;color:white;height:100px;width:200px;"][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
Eevee Vaporeon
[/cd]

But if I may, I think this signature would look pretty good if you were to use the

tag so that they could be aligned better :3

Eevee

Vaporeon

[cd="background-color:black;color:white;height:100px;width:200px; text-align: center;"][twocolumn][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG]
Eevee
[IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
Vaporeon[/twocolumn]
[/cd]

 

[Cosmotone8]

Ummmmm......

I'm new at the whole CSS thing but after going through a couple tutorials I think I know enough to get by alright. But I've been learning about the HTML coding CSS. I checked in the FAQs and found out that HTML is not used but that BBCode is. What's the difference and how can I adjust to make it compatible.
Sorry, I'm really new to this kind of stuff.

 

[Hybrid Trainer]

Well with the BBCode version you'll be making your own little pocket of CSS. For example if you were to make a heading out of CSS with the BBCode you'd set it out like this
[cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd]

This is a heading.

The red bits are the BBCode, the green bits are the CSS coding and the blue bits are the body text :3
[c*d=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/c*d]
* are put in to stop the code going all screwy, obviously.

It's possible for you to put a cd tag within a cd tag like so
[cd=width:100%; background-color:white;][cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd][/cd]

This is a heading.

Do you understand a little better now?

 

[Cosmotone8]

Yeah, Ill experiment with it a little bit and figure the rest out. Thanks!

 

[Pokemon Trainer Touko]

Hi! :D
Ok so I was making a thread, and then when I previewed it looooooooooads of random codes randomly appeared ;A; I deleted them and then previewed it again and they magically appeared againnnnnn ;w; halp meeeeeee >w<;;;;;;

 

[Hybrid Trainer]

In assuming you're using Firefox right? Try clicking the view code buttton in the top right hand side I think it is and edit your post directly from there. Alternatively you could use the clear formatting button in the top left and do as much formatting as you can using cd tags.

 

[Cosmotone8]

When I type in this:
[c*d=background-image: url('http://photoshopinc.com/free-stock-photo/wp-content/uploads/2009/08/websitetemplatestockphotoassortedbankcards4.jpg')][c*d=text-align: center; color:white; font-family:Arial; font-weight:bold; font-size:20px]Cosmotone8[/c*d]
[c*d=text-align: center; color:white; font-family:Arial; font-size:10px]The One and Only[/c*d][/c*d]

I end up with this chopped up thing.

Cosmotone8

The One and Only

 

[Legendary Silke]

When I type in this:
[c*d=background-image: url('http://photoshopinc.com/free-stock-photo/wp-content/uploads/2009/08/websitetemplatestockphotoassortedbankcards4.jpg')][c*d=text-align: center; color:white; font-family:Arial; font-weight:bold; font-size:20px]Cosmotone8[/c*d]
[c*d=text-align: center; color:white; font-family:Arial; font-size:10px]The One and Only[/c*d][/c*d]

I end up with this chopped up thing.

Cosmotone8

The One and Only

Explicitly set a width for the very first div tag. Preferably exactly the same as the image width, as long as you are not using CSS borders

 

[Cosmotone8]

Thank you so much! You are a lifesaver!
It now looks like this:

Spoiler:

Cosmotone8-

The One and Only

Owner:CoOwner: Clubs:

 

[Ninja Paladin]

I don't really understand how to do something like this in css via the forums:

<center><table border="0" cellspacing="0" >
<caption><img src="http://i43.tinypic.com/10ng4ma.jpg" /></caption>
<tr><td><a href="http://vdexproject.net/user.php?user=37392"><img src="http://vdexproject.net/p/37392/partymini.png" /></a></td>
<td rowspan="2"><a href="http://conora.dragonadopters.com/dragon_724477"><img src="http://conora.dragonadopters.com/dragonanimated_724477.gif" /></a></td></tr>
<tr><td><a href="http://my.gpxpl.us/Avara"><img src="http://p.gpxpl.us/TWdY.png" /></a></td></tr>
</table></center>

I do understand some html I just can't quite make the shift to using the variant with have in our sigs.

 

[donavannj]

Well that's because the CSS here is limited to stuff that can be done as inline properties, as it's BBCode CSS, and no HTML can be used. [div="insertelement1here;insertelement2here;insertelement3here;insertelement4here;"][/div] is an example of how the BBCode CSS needs to be structured to function properly.

However, I see no CSS whatsoever in that code block of yours. All I see is HTML. Not even any inline CSS. And tables can't easily be done in BBCode CSS or with CSS in general. I've done a table once before myself using only CSS, but then I broke it when I went to modify it later.

That table is in the first post of this thread here if you want to study it: http://www.pokecommunity.com/showthread.php?t=255029

 

[Ninja Paladin]

[center][img]http://i43.tinypic.com/10ng4ma.jpg[/img]
[url=http://dragcave.net/user/Avalar][img]http://i.imgur.com/nBb81.png[/img][/url]
[div="width:228px;padding:0px;"][url=http://vdexproject.net/user.php?user=37392][img]http://vdexproject.net/p/37392/partymini.png[/img][/url][div="float:right;"][url=http://conora.dragonadopters.com/dragon_724477][img]http://conora.dragonadopters.com/dragonanimated_724477.gif[/img][/url][/div]
[div="float:left;"][url=http://my.gpxpl.us/Avara][img]http://p.gpxpl.us/TWdY.png[/img][/url][/div][/div][/center]

That's the closest I can get in CSS, just using the images for now though to keep it small, however I don't want all that empty space around the two rows...

EDIT: Actually seems to be white space around the images, any way to shrink that via image size coding of any kind?

 

[Cosmotone8]

Hi, its me again. Is there a way to make is so that CSS boxes are aligned center? I tried using the align center thing that is preset, but then it screws up my whole post. Does anyone have a solution?​

 

[Hybrid Trainer]

There might be a box align code or something but I'm not sure if it works on PC so what I usually do is inside the box I'd align it to what ever I want to align it to, like maybe to the centre, and then use the BBCode align to actually align the box to something, like maybe the right.
That way everything inside of the box stays where it is and you can still align the box to where ever.

 

[Legendary Silke]

margin:auto is your friend.

If you want to be a little bit more specific:

https://developer.mozilla.org/en/CSS/margin

margin: <value> for all sides
margin: <vertical> <horizontal>
margin: <top> <horizontal> <bottom>
margin: <top> <right> <bottom> <left>

If you want to centre a DIV block, make sure that the horizontal or left and right margins are all set to auto.

 

[Winneon]

How do you resize an image here in bbcode?

 

[Legendary Silke]

How do you resize an image here in bbcode?

Background images in a div, or inline images?

For the former, use the background-size property.

For the latter, nope, nothing can help you, aside from manually resizing the image to be used in the first place. You should do manual resizing, as scaling down a large image to a smaller size anyway can waste bandwidth, and scaling up a small image to larger sizes might have different final rendering quality depending on the browser.

 

[Cosmotone8]

I'm back. This is what, the fourth or fifth time now? XD
So here is my problem. I am working on a new sig, but it isn't working.
What it looks like now:

Spoiler:

How do I get that final image up further so it isn't floating in the middle of nowhere? I'd also like some space between that image and the outside border of the largest box.

 

[Oryx]

I bumped it up a bit for you, you can just change the "top:-300px;" to whatever value you'd like to align it perfectly however you want. As for the space in between, I just moved the picture over in the same way 15 pixels. Not sure if it's the most elegant way to do it but it works :3

​

 

[Cosmotone8]

Thanks! Could you give me the code? (I know I'm a hypocrite by saying that, as I didn't do it in my original post XD)