• 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
Sorry to say Justin but the way that person does it is by turned the userbars into a gif.

The closest thing you can do to get it like that with CSS is to create a box and have people manually scroll it.
It can be done like this:
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll


You set the box's width and height and then the overflor code makes it scroll when the text hits the box's limit.

[cd=width:300px; height:30px; overflow:auto;]Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll[/cd]
 
Last edited:

Impo

Playhouse Pokemon
2,458
Posts
14
Years
does anyone here know how to make css appear side by side? All I've got is this:


RADIANT YELLOW BUILDING

th_GatheringYellow-1.png

The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP




SERENE BLUE
BUILDING


th_GatheringBlue-2.png

The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP




NETTLE RED
BUILDING


th_GatheringRed-1.png

The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP



And I want it to be side by side, so I can add another css box under all three. Any help is appreciated, thanks.
 
Last edited:

Mew~

THE HOST IS BROKEN
4,163
Posts
15
Years
  • Age 28
  • Seen Apr 13, 2016
I had a similar problem before. Just add this to each css coding 'display:inline-block;' if your too lazy then just quote this post and steal the code. xD;


RADIANT YELLOW BUILDING

th_GatheringYellow-1.png

The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP


SERENE BLUE
BUILDING


th_GatheringBlue-2.png

The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP


NETTLE RED
BUILDING


th_GatheringRed-1.png

The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP


 

Impo

Playhouse Pokemon
2,458
Posts
14
Years
...wow, thank you so much :D !

...is there a way to put spaces inbetween? I'll mess with the code anyway, thank you :) !

I had a similar problem before. Just add this to each css coding 'display:inline-block;' if your too lazy then just quote this post and steal the code. xD;

RADIANT YELLOW BUILDING

th_GatheringYellow-1.png

The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

SERENE BLUE
BUILDING


th_GatheringBlue-2.png

The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

NETTLE RED
BUILDING


th_GatheringRed-1.png

The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP




wow, thanks so much

but now the boxes are all next to each other, and not spaced like they were before.
Do you know how to fix that :s ?

Wait, I fixed that. But now, how do I give them spaces inbetween :/ ?
 
Last edited:

Purple Materia

Shape the future!
785
Posts
13
Years
  • Age 29
  • Seen Apr 12, 2014
Centering three divs?

I'm trying to have a three-column website, where the columns are completely center.

It's driving me crazy trying to center them! I know I'm doing something wrong, obviously, but I can't figure it out. I am a little new to coding websites, though, so keep that in mind.

Spoiler:

HTML
Spoiler:

Thanks in advance!

@Impo - Try using "margin-left" and "margin-right".
 
Last edited:
22,952
Posts
19
Years
I'm trying to have a three-column website, where the columns are completely center.

It's driving me crazy trying to center them! I know I'm doing something wrong, obviously, but I can't figure it out. I am a little new to coding websites, though, so keep that in mind.

Spoiler:

HTML
Spoiler:

Thanks in advance!

@Impo - Try using "margin-left" and "margin-right".



I see at least two excess closing </div> tags without opening pairs, causing at least one of your divs to close early.
 

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
Hmm...

OK, here's the deal:

My signature appears correctly in IE7/8/9, Chrome, and the Android browser. However, when rendered in Firefox, it somehow appends extra padding to the bottom, causing the signature area to have a vertical scrollbar.

How should I fix it? Or is the issue on the forum side? (No extra padding appears in the signature preview or in this post)

Code:
[PLAIN][center][div="position: relative; top: 0px; left: 0px; font: 10pt "Trebuchet MS", Helvetica, sans-serif; border-style: solid; border-width: 4px; border-color: black; background-image:url("http://i1096.photobucket.com/albums/g329/Jarooda/Signatures/twiggysigback2.jpg"); width: 592px; height: 342px;"][div="position: relative; top: 0px; left: 0px"][img]http://i1096.photobucket.com/albums/g329/Jarooda/Signatures/sigshadowinset.png[/img][/div][div="position: relative; top: -342px; letter-spacing: 1px; color: #ffffff; width: 592px; height: 24px; background-color: #7e9a3b; opacity: 0.85; filter:alpha(opacity=85);"][center][size=3][URL=http://www.pokecommunity.com/blog.php?u=243899][color=#ffffff]diaries of a quadruped[/color][/URL] :: [URL=http://www.pokecommunity.com/member.php?u=73941][color=#ffffff]paired with kip[/color][/URL] :: [URL=https://twitter.com/#!/AxAxAxew][color=#ffffff]twitter[/color][/URL][/size][/center][/div] [div="letter-spacing: 1px; position: relative; top: -62px; color: #ffffff; width: 592px; height: 24px; background-color: #7e9a3b; opacity: 0.85; filter:alpha(opacity=85);"][center][size=3][url=http://www.pokecommunity.com/showthread.php?t=269655][color=#ffffff]starters[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=264197][color=#ffffff]cute[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=268621][color=#ffffff]dragons[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=269280][color=#ffffff]water[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=266169][color=#ffffff]snivy[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=270023][color=#ffffff]egg swap iv[/color][/url][/size][/center][/div][div="letter-spacing: 1px; position: relative; top: -62px; color: #ffffff; width: 592px; height: 14px; background-color: #3F4C1D; opacity: 0.85; filter:alpha(opacity=85);"][center][size=1]signature art by kip[/size][/center][/div][/div][/center][/PLAIN]

sigshadowinset.png
signature art by kip
 
2,096
Posts
15
Years
It seems to be a forum problem twiggy. I can see what you mean on firefox it adds quite a bit of margin to the bottom causing it to scroll but after I changed from the default delibird theme to Flames of Simplicity the scroll bar was gone.
Looks like there isn't much you can do about it :x
 

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
It seems to be a forum problem twiggy. I can see what you mean on firefox it adds quite a bit of margin to the bottom causing it to scroll but after I changed from the default delibird theme to Flames of Simplicity the scroll bar was gone.
Looks like there isn't much you can do about it :x

The problem seems to also appear with The Stand Nexus, so I have a feeling that the scrollbar implementation is problematic or something.

So what to do if a signature moderator sees the signature using Firefox?
 
2,096
Posts
15
Years

So what to do if a signature moderator sees the signature using Firefox?
Technically you aren't breaking any rules so if it were me who was judging it I would let it slide but really it depends on who's judging it. Some will let it be because it's a problem on the forum styles side, some will make you change it because it's a problem on the forum styles side.
I think if you are forced to change it then you could remove the credit part at the bottom and maybe add it in as a title over kips name?
 
152
Posts
15
Years
While not the most elegant solution, you could force the scrollbar to be hidden by adding overflow: hidden; to your CSS. It should have no effect on any of the working browsers and since the scrollable content is white space in Firefox, you won't be missing anything there either.
 

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
While not the most elegant solution, you could force the scrollbar to be hidden by adding overflow: hidden; to your CSS. It should have no effect on any of the working browsers and since the scrollable content is white space in Firefox, you won't be missing anything there either.

That seems to be the best solution to work around the FF issue - the extra padding is now invisible and inaccessible, the scrollbar disappeared, and FF users are now none the wiser.
 
27,733
Posts
14
Years
Question of curiosity, but how do I get a transparent rectangle overlayed on top of a background with a scroll box inside the transparent rectangle? I'm not too experienced with CSS as a whole.
 
2,096
Posts
15
Years
Well as for the transparent bit Zach you can either set the background image as a semi-transparent colour . The other way is to make the box transparent using this code:
Code:
opacity:0.4

Or

filter:alpha(opacity=40)
(for IE8 or earlier)
The transparency code also makes everything inside the box transparent too though so personally I'd go with the background image.

As for the scroll box bit you just set the height/width to how big you want to be and then use this code
Code:
overflow: auto;
 

Impo

Playhouse Pokemon
2,458
Posts
14
Years
I'm in a little bit of trouble. What I want to do is have some rotating text on the outside of my signature, but even time I do it the text goes far far away.

This is what I mean:
toadimagesig.png

7-1.png
7-1.png
7-1.png

coin.png
3,600+

Paired to DragonOmega and Shining Raichu


Does anyone know how to fix this?
 
2,096
Posts
15
Years
I've had this problem quite a lot Impo "/
So far from what I've seen the only way to fix it is to use positioning codes such as "left:0px;", "right:0px;", "top:0px;" and "bottom:0px;" to position it in the correct place like so.

toadimagesig.png

7-1.png
7-1.png
7-1.png

coin.png
3,600+

Paired to DragonOmega and Shining Raichu


I'm assuming that's what you were trying to do but idk :x

I don't use rotation that much though so if there's another, easier way of doing this please do share :3
 

Impo

Playhouse Pokemon
2,458
Posts
14
Years
toadimagesig.png


coin.png
3,600+


Mario Kart 7 Sig Collab

Paired to DragonOmega and Shining Raichu


Wow, that's amazing! Thank you so much :D !
But I kinda edited my signature a small touch, and I tried subtly adding it in to the equasion, but then I messed up again /facepalm

I want it all to be on the right side of the page, with everything in the Toad thing centered. Would it be too much to ask if you could help with that :x ?
 

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
Wow, that's amazing! Thank you so much :D !
But I kinda edited my signature a small touch, and I tried subtly adding it in to the equasion, but then I messed up again /facepalm

I want it all to be on the right side of the page, with everything in the Toad thing centered. Would it be too much to ask if you could help with that :x ?

You might want to remove a couple of extra returns/enters at the bottom of the sig, by the way. That should remove the scroll - if not, insert "overflow: hidden;" to the first div block.

Maybe we can do a reboot of the thread at this point... should we? I think a bit of extra information about all the fancier stuff should be in there. XD
 
Last edited:

Impo

Playhouse Pokemon
2,458
Posts
14
Years
.. I don't currently have any visible scroll on my screen. The line spacing for the enters is 4px, I think that's why.
 
2,096
Posts
15
Years
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

.


Maybe we can do a reboot of the thread at this point... should we? I think a bit of extra information about all the fancier stuff should be in there. XD
Or failing that we could just get a mod/the original poster to add stuff in? xD
 
Back
Top