• 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?".
  • 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.
    Register

CSS Help & Resources

Impo

Impo

Playhouse Pokemon
2,458
Posts
14
Years
Hybrid Trainer said:
Ok I think that's done it. What I've done is created a box and set it to relative using the position: code. I've also added on a bit of a margin to the right so that the text isn't poking out the side :3

toadimagesig.png


coin.png
3,600+


Mario Kart 7 Sig Collab

Paired to DragonOmega & Shining Raichu

.



Or failing that we could just get a mod/the original poster to add stuff in? xD
Click to expand...

oh my god. You are amazing. Thank you so much :D !
I really appreciate it :D !
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
You might want to move it left ~5-10 pixels though because right now it shows a horizontal scroll bar at least on my screen. It's not outside the rules but it ruins the effect a bit :(
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Yeah, no more scrollbar for me. :3
 

abnegation

10,673
Posts
15
Years
  • Age 30
  • Seen Dec 30, 2023
You do realise that does not work on IE Impo? It breaks the screen width.
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
You could just make another div, like [cd="background-image:url('image.png');width:533px;height:270px;"][/cd]...that's what I would do at least.
 

Mew~

THE HOST IS BROKEN
4,163
Posts
15
Years
  • Age 28
  • Seen Apr 13, 2016
I had a similar problem a while back. I'd get rid of the opacity tag, and put in a transparent image as the background image. For example;


Just quote this post and steal the code...
​
 
Legendary Silke

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
Or if you're willing to break compatibility with older browsers, try RGBA or HSLA colours at background-color. (instead of a hex value, rgba(a,b,c,d) and something similar for hsla - for rgba, a,b,c = in terms of 255, and d = in terms of 0.00 to 1.00) It's more of a convenience tool, though. For graceful degradation, put a duplicate background-color with the expected hex value or rgb value before the alpha-enabled one. On the other hand, PNG transparency is waaaaay easier and works with more browsers. It's probably a better idea to not fiddle with the CSS and replace the background-color with an image.
 
donavannj

donavannj

22,952
Posts
19
Years
♪Twiggy♪ said:
Or if you're willing to break compatibility with older browsers, try RGBA or HSLA colours at background-color. (instead of a hex value, rgba(a,b,c,d) and something similar for hsla - for rgba, a,b,c = in terms of 255, and d = in terms of 0.00 to 1.00) It's more of a convenience tool, though. For graceful degradation, put a duplicate background-color with the expected hex value or rgb value before the alpha-enabled one. On the other hand, PNG transparency is waaaaay easier and works with more browsers. It's probably a better idea to not fiddle with the CSS and replace the background-color with an image.
Click to expand...

PNG transparency isn't necessarily easier if you don't have graphical editing skills in the first place, or if the code is easier for you to work with than a program like Photoshop.
 
Legendary Silke

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
donavannj said:
PNG transparency isn't necessarily easier if you don't have graphical editing skills in the first place, or if the code is easier for you to work with than a program like Photoshop.
Click to expand...

I know, but this time, it's just a single color. Chances are, even if software is missing, a download of Paint.NET or GIMP, filling in the color values and painting the background image at once... (make another layer in GIMP first)
 
Hybrid Trainer

Hybrid Trainer

2,096
Posts
15
Years
That's actually a BB code mew :3
It's called an anchor. You need to use the a id code (here) and the aurl code (here)
It's kinda complicated at first but it's easy to pick up once you've done it a few times.
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Okay after struggling with this for a really long time I'm giving up. This sig is like one pixel too tall and idk where that 1 pixel is coming from or how to fix it. I tried all the tricks I found online to get rid of empty boxes in the case of relative positioning and in the end that helped some but now I can't....get rid...of the pixel...going to lose my mind. Please help. :(

emi.jpg
Emi
Ibarazaki

Pokémon General ☼ Pokémon Voting Polls ☼ Pair ☼ Poetry ☼ VM ☼ PM​
 

Giraffe

キリンリキ
315
Posts
14
Years
I'm using smaller CSS boxes on my trading thread, and I'm just wondering how you add a scroll onto them? :3
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
You want the "overflow:auto;" tag in the css box that you'd like a scroll on. That will add one if the text spills over the height limit. :3
 
You must log in or register to reply here.
Back
Top