• 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,096
Posts
15
Years
Code:
border-radius:50px;
or you can use this to do only one corner
Code:
border-top-right-radius:50px;
Changing the top and the right bit accordingly of course x]
 

Gymnotide

8377 | Scorpaeniform
3,597
Posts
16
Years
Code:
border-radius:50px;
or you can use this to do only one corner
Code:
border-top-right-radius:50px;
Changing the top and the right bit accordingly of course x]

You'll also want to include moz tags too in case anyone is viewing from Firefox, since they don't have webkit. The tag works exactly the same, though.

border-radius
-moz-border-radius

border-top-left-radius
-moz-border-radius-topleft

border-top-right-radius
-moz-border-radius-topright

border-bottom-right-radius
-moz-border-radius-bottomright

border-bottom-left-radius
-moz-border-radius-bottomleft
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
Actually, border radius works for every browser that uses CSS3, so moz has supported it since 3.5. But not everyone is updated. So if you're going to add extra codes, you might as well just stick with -moz-border-radius & web-kit-radius.

However, let me point out that IE9 will support CSS3, meaning it will have rounded corners etc. So I'd advise adding all 3 codes when it does. You're better off covering all angles to ensure the best browser compatibility you can get.
 

Mew~

THE HOST IS BROKEN
4,163
Posts
15
Years
  • Age 28
  • Seen Apr 13, 2016
Okay, what I want to do is get two CSS codes to show up on the same line. Since when I try to do two seperate CSS codes and put them next to each other they end up on different lines, if that makes sense.
 
2,096
Posts
15
Years
This has come up before, it wasn't really solved but if you only want two codes i think you can get away with it.
Previous problem/answer

But if its just two things i tend to use the float:left/right code to make one thing move to the side.
 

Winneon

[b][color=#fb0120]しょう[/color][color=#fc6d24]が[/col
525
Posts
12
Years
How do you change the hyperlink color in BB code?
 
2,096
Posts
15
Years
You put the colour tag inside of the URL tag. Like this.

[URL="http://www.pokecommunity.com/member.php?u=119663"][COLOR="#B82556"]James[/COLOR][/URL]
 

Winneon

[b][color=#fb0120]しょう[/color][color=#fc6d24]が[/col
525
Posts
12
Years
You put the colour tag inside of the URL tag. Like this.

[URL="http://www.pokecommunity.com/member.php?u=119663"][COLOR="#B82556"]James[/COLOR][/URL]
Thanks! I know CSS but I didn't know how to add that into BB code!:)
 

Winneon

[b][color=#fb0120]しょう[/color][color=#fc6d24]が[/col
525
Posts
12
Years
How do you overlap images like in Rukario's signature?
 
5,256
Posts
16
Years
You could either use a background image (background: url('linktoimage.png');) and then put another image ontop (which can then be positioned with position: absolute: and left: pixelpx/right: pixelpx/etc. or padding-top: pixelpx etc.) or you could use the z-index code (z-index: 99; would make everything in that div have priority over anything with a z-index of 98 or lower).
 

Winneon

[b][color=#fb0120]しょう[/color][color=#fc6d24]が[/col
525
Posts
12
Years
I don't really understand. CAn you give me an example with the CSS code?
 
2,096
Posts
15
Years
If you look here inside the spoiler there is a rattata signature that uses the z-index code on the teeth and as you can see, they are on top of the sprite thats underneath.
As for the background image bit the background-image:URL('urlhere.png') is put inside the css tag next to the other codes like the background-color code. It can be explained in a bit more detail here ^_^

tbh if you want a signature like Rukarios your better off using the background image code ;D
 

Winneon

[b][color=#fb0120]しょう[/color][color=#fc6d24]が[/col
525
Posts
12
Years
Ok. Thank you very much! I'll try that.
 

Mew~

THE HOST IS BROKEN
4,163
Posts
15
Years
  • Age 28
  • Seen Apr 13, 2016
Okay, so I'm trying out a format for episode discussions, and I've done this so far.

season14logo.png


Episode 31: "Oshawott's Lost Scalchop"
Air Date: 13/08/2011


What I want to do is get an image in the nested CSS box, but the image goes faded too, any help please?
 

Alternative

f i r e f l y .
4,262
Posts
15
Years
Okay, so I'm trying out a format for episode discussions, and I've done this so far.

season14logo.png


Episode 31: "Oshawott's Lost Scalchop"
Air Date: 13/08/2011


What I want to do is get an image in the nested CSS box, but the image goes faded too, any help please?
You're probably using the transparent code. Easy way around that is to use some image editing program (photoshop, gimp etc.), make a blank canvas, fill it up with the colour you want, and lower the opacity down to whatever it is you want. Then the image you want in the nested CSS box should be fine. :D
 

TheMarkCrafter

roses are red, violets are blue, i used to break r
543
Posts
13
Years
How can I make the cursor change? Like at Pokemon Trainer Touko's Lilligant signature? It has a lilligant cursor.
 

Mew~

THE HOST IS BROKEN
4,163
Posts
15
Years
  • Age 28
  • Seen Apr 13, 2016
Add this into your CSS:
Edit:

cursor: url('cursor URL here'), crosshair;
 
Last edited:

TheMarkCrafter

roses are red, violets are blue, i used to break r
543
Posts
13
Years
Thanks Mew~!
But I has a problem..
too354.gif

The cursor should be like this, but at my sig, it doesn't animate fastly.
HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEELP!
 

Kylie-chan

[span="background:#000; padding: 2px 10px;"][color
14,979
Posts
19
Years
Animated .gifs don't make animated cursors. They have to be converted to .ani files. However, only Internet Explorer will support .ani files right now, I believe (not sure about Chrome). Conversely, Internet Explorer doesn't support .gif cursors. It only supports .cur and .ani.

ETA: As far as I can tell, Chrome does not support .ani files either.

I don't recommend it, but you'll need to find software that converts .gifs to .anis. I doubt you can upload .anis to standard image hosting sites, so you'll need to upload it to your own hosting as well.

You could try:

cursor: url('cursor.ani'), url('cursor.gif'), crosshair;

but I'm not sure if that will work. My theory is Firefox etc. will ignore the .ani and use the .gif, but it's only a theory.

Okay, so I'm trying out a format for episode discussions, and I've done this so far.

That's how inheriting from parent elements works. The simplest solution would be to make a 50% transparent pixel and use it as a tiled background of the CSS box, as suggested. It can be done in CSS, but for now images are probably the easiest way to do it. (Remove the opacity tag.)

You might not have access to sufficient image editing software right now, so here's one:

4MDwa.png


http://i.imgur.com/4MDwa.png

season14logo.png


supporter-tier1.png


Air Date: 13/08/2011


Don't ask about image choice >.> Just picked a random img off the page. It stretches, but I don't know the dimensions of the image you want to put in, so you'll have to adjust that yourself. ;)
 
Last edited:

Winneon

[b][color=#fb0120]しょう[/color][color=#fc6d24]が[/col
525
Posts
12
Years
Ok. I'm not understanding the overlap text concept.
 
Back
Top