CSS Help & Resources

Hybrid Trainer · Feb 23, 2012

Iloveeevee said:
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 · Feb 24, 2012

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 · Feb 24, 2012

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 · Feb 24, 2012

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

Pokemon Trainer Touko · Feb 24, 2012

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 · Feb 25, 2012

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 · Feb 25, 2012

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 · Feb 25, 2012

Cosmotone8 said:
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 · Feb 25, 2012

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

Spoiler:

Ninja Paladin · Mar 7, 2012

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

HTML:

<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 · Mar 7, 2012

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 · Mar 7, 2012

Code:

[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 · Mar 11, 2012

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 · Mar 11, 2012

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 · Mar 11, 2012

margin:auto is your friend.

If you want to be a little bit more specific:

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

Code:

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 · May 26, 2012

How do you resize an image here in bbcode?

Legendary Silke · May 27, 2012

JalordaSerpent7 said:
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 · May 30, 2012

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 · May 30, 2012

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 · May 30, 2012

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)

CSS Help & Resources

More options

Hybrid Trainer

Cosmotone8

silhouette of the past

Hybrid Trainer

Cosmotone8

silhouette of the past

Pokemon Trainer Touko

春野サクラ ♥

Hybrid Trainer

Cosmotone8

silhouette of the past

Legendary Silke

[I][B]You like dragons?[/B][/I]

Cosmotone8

silhouette of the past

Ninja Paladin

donavannj

Ninja Paladin

Cosmotone8

silhouette of the past

Hybrid Trainer

Legendary Silke

[I][B]You like dragons?[/B][/I]

Winneon

[b][color=#fb0120]しょう[/color][color=#fc6d24]が[/col

Legendary Silke

[I][B]You like dragons?[/B][/I]

Cosmotone8

silhouette of the past

Oryx

CoquettishCat

Cosmotone8

silhouette of the past