• 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

Cosmotone8

silhouette of the past
1,758
Posts
12
Years
I love this thread too much to leave without posting again. XDWell, this is what my problem is now. That last image is there when I take away the span tag for the text, but then the image disappears as soon as I try to put the tag back on or I center it. I've tried everything I know, but I can't seem to have the text and image both be aligned in the way I want.
Example:
This is how I want the text/symbols. Centered and all. But I can't see the other image.
Spoiler:


Now without those tags, I get the image, but the text isn't aligned. Center tags will do the same thing as the span tags I have inserted.
Spoiler:

Anyone got a solution?
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Maybe I'm missing something but those don't look centered so I'm confused as to what you want, things aren't aligned at least in the code you pasted. The two look like this:

Spoiler:
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Can you take a screenshot so I know what you're looking for?
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015

tumblr_lj1t56INxH1qcb1qao1_400.gif

: : : :
tumblr_llvqk7MXiV1qcb1qao1_400.gif



Is this what you're looking for? Keep in mind that this signature breaks 2 different sig rules though...lol
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
The images, as seen by the disabled tag in your sig right now XD;

Edit: No wait I'm wrong ignore me you already fixed that one
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
There are two ways to do this. One way would be to have an identically sized box positioned on top of the transparent one, that has a transparent background and opaque text. The other one (easier imo) would be to just make the background an image of a half-transparent box instead of using the opacity thing.
 

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
The other one (easier imo) would be to just make the background an image of a half-transparent box instead of using the opacity thing.

The third way (easier than easy) is to simply set the background colour of the box to a semitransparent value, which is achievable with RGBA colours. Try setting background-color: rgba(0, 0, 0, 0.85) for 85% opaque grey black, for instance.

Disclaimer: be sure to include another background-color attribute before said rule that is a standard hex value, like #000000, to prevent your signature from mangling up in IE8, which still sees some use today. And older feature phones.
 
Last edited:

Mortalis

[css-div="background-color:#4e9dda;text-align:cent
345
Posts
13
Years
I've tried everything, but I can't seem to get this to work.

I want to get this image:
376.gif


To go on here:
STUB.png


As in, I want Metagross to be on the left side of it, just standing on it. How do I do that? I can't figure it out. I've tried padding, spacing, etc..
 
2,096
Posts
15
Years
You could make the userbar a background image that doesn't repeat, so then all you need to do is place the image on it like this.


376.gif


Code:
[PLAIN][cd=background-image:URL('http://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png'); background-repeat:no-repeat;][IMG]http://sprites.pokecheck.org/i/376.gif[/IMG][/cd][/PLAIN]

Or you could use the margin code so that the gif is pulled up onto the userbar. Like this.


STUB.png

376.gif


Code:
[PLAIN][IMG]http://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png[/IMG]
[cd=margin-top:-40px; padding-left:10px; background-repeat:no-repeat;][IMG]http://sprites.pokecheck.org/i/376.gif[/IMG][/cd][/PLAIN]

As you can see the second one is more accurate so I'd personally go with that one.
 

Mortalis

[css-div="background-color:#4e9dda;text-align:cent
345
Posts
13
Years

Or you could use the margin code so that the gif is pulled up onto the userbar. Like this.


STUB.png

376.gif


Code:
[PLAIN][IMG]http://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png[/IMG]
[cd=margin-top:-40px; padding-left:10px; background-repeat:no-repeat;][IMG]http://sprites.pokecheck.org/i/376.gif[/IMG][/cd][/PLAIN]

As you can see the second one is more accurate so I'd personally go with that one.

Ah, that's exactly what I was looking for! Thank-you. I didn't know of the margin code.
 

Impo

Playhouse Pokemon
2,458
Posts
14
Years
I have a problem with CSS to do with inline: block codes (I think that is what it's called)


that very messy piece of code is meant to produce this:


BATTLE LOG





KNOWN ACHIEVEMENTS






But the second box is a little higher than the first. Does anyone have any idea how to level them?
Uhm I tried to get the code but it only turns into the thing above so :s
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
Let me know how this goes.


BATTLE LOG





KNOWN ACHIEVEMENTS






PHP:
[CENTER][div="height:150px;"][div="width:300px;height:150px;-webkit-border-radius:25px;border-radius:25px;background-color:#1b1b1b;border-width:4px;border-style:     solid;border-left-color:#0a0a0a;border-right-color:#323232;border-top-color:#232323;border-bottom-color:#232323;display:inline-block;"]
[SIZE=3][COLOR=White]BATTLE LOG[/COLOR][/SIZE][SIZE=1]

[/SIZE]   [div="width:290px;height:80px;overflow:auto;-webkit-border-radius:      10px;border-radius:10px;border-width:2px;border-style:solid;border-left-color:#323232;border-right-color:#0a0a0a;border-top-color:#232323;border-bottom-color:#232323;text-align:justified;"]

[/div]
[/div]   [div="width:300px;height:150px;-webkit-border-radius:25px;border-radius:25px;background-color:#1b1b1b;border-width:4px;border-style:      solid;border-left-color:#0a0a0a;border-right-color:#323232;border-top-color:#232323;border-bottom-color:#232323;display:inline-block;"][SIZE=3][COLOR=White]
KNOWN ACHIEVEMENTS[/COLOR][/SIZE][SIZE=1]

[/SIZE][div="width:290px;height:80px;overflow:auto;-webkit-border-radius:       10px;border-radius:10px;border-width:2px;border-style:solid;border-left-color:#323232;border-right-color:#0a0a0a;border-top-color:#232323;border-bottom-color:#232323;text-align:justified;"]

[/div]
[/div][/div][/CENTER]
 

Satan.EXE

King of the Hell
2,807
Posts
12
Years
  • Age 29
  • C:\
  • Seen Jun 12, 2015
Okay, I need help here.

Is there any way to use CSS to create tabs?

For example, when you're on a PC Profile, and you can click the different tabs to see other information.

Is there any way to do this with the coding for this forum? I want to make a signature with multiple sections, and a row of buttons (tabs) that will reveal different sections of information one at a time.

I would like to know if there's certain codes or a method of using those codes to work in the way I've just explained. That way I can keep my Signature nice and cozy.

Thanks in advance,
WolfOfEve
 
2,096
Posts
15
Years
totally thought someone else had answered this already

But no, sorry. Tabs and stuff are done using JavaScript and HTML as far as I know so you can't do it using CSS.
Honestly I can't even think of an alternative to tabs in a signature either.
 

Ralaia

~Smooth as Ice~
56
Posts
11
Years
How would you get this background to "stretch" or not repeat?

Spoiler:

That's the only problem I'm having so far.
A.nd I know how to do CSS I just really like the style she used.
 
Last edited:

Satan.EXE

King of the Hell
2,807
Posts
12
Years
  • Age 29
  • C:\
  • Seen Jun 12, 2015
totally thought someone else had answered this already

But no, sorry. Tabs and stuff are done using JavaScript and HTML as far as I know so you can't do it using CSS.
Honestly I can't even think of an alternative to tabs in a signature either.

Okay, so maybe I could start it off a little bit simpler. Is there a code that does something similar to
Spoiler:
 
Back
Top