• 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

pokewalker

If it ain't Dutch,it ain'tmuch
667
Posts
13
Years
Toujours said:
Can you explain what's annoying? It looks perfectly alright for me (the sprite is animated as well):

r7lmc6.png
Click to expand...

Yeah, but I want the "pokewalker" in the box xD And I can't get it on the place I want.

jigglyppuff8 said:
If it's the text being under the box that's the problem, then use
Click to expand...
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
For some reason the links in my signature don't work. I have a link on IRC, one on Talk, and one on Me, and none of them are activating.

PHP: 
[cd="height:120px;width:500px;overflow:visible;"][cd="background-image:url("http://i53.tinypic.com/2m28kn9.png");  width: 500px; height: 200px; float:left;"]
[cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:160px; overflow:auto; width:500px;  height:280px;letter-spacing:10px;line-height:40px;text-shadow:0px 0px  5px #ffffff;"]★[title="Catch all non-Unova Pokemon in  Unova"]Goal[/title]
[cd="font-size: 15px; color:#737373; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:60px; overflow:visible; width:200px;  height:200px;letter-spacing:7px;line-height:40px;text-shadow:0px 0px 5px  #ffffff;"][title="133/174, 76.4%"](Progress)[/title]
[cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-5px; left:-59px;  overflow:visible;height:100px;letter-spacing:10px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]★[title="Sanguinius <3"]Pair[/title]
[cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:16px; left:0px;  overflow:visible;height:100px;letter-spacing:10px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]★IRC
[cd="font-size: 15px; color:#737373; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:60px; overflow:visible; width:200px;  height:30px;letter-spacing:7px;line-height:40px;text-shadow:0px 0px 5px  #ffffff;"](Talk to me)
[/cd][/cd][/cd][/cd][/cd][/cd][/cd]
[cd="font-size: 15px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-10px; left:217px;  overflow:visible;height:50px;width:500px;letter-spacing:5px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]I ask for nothing, I can get by
[/cd]
[cd="font-size: 15px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:10px; left:300px;  overflow:visible;height:50px;width:500px;letter-spacing:5px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]but I know so many less lucky than I[/cd]
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
They're there, I just forgot to switch out of the dumb rich text mode before I copied it so it copied as if they're not there. the links look like this:

PHP: 
[url="blahblahblah.com"][color=#123456]IRC[/color][/url]

I tried putting the url inside so the link color showed up but I still couldn't click it.
 

jigglyppuff8

⑧
2,319
Posts
16
Years
Please forgive me for starting completely over, but I could not follow your code with all of its positioning and height and width shenanigans.

★Goal
(Progress)
★Pair

★IRC
(Talk to me)
I ask for nothing, I can get by
but I know so many less lucky than I​

Spoiler:


I wouldn't use so many divs for just simple text. Divs tend to add line breaks whenever a new one is added which is quite pain if your code doesn't require divs. Spans work just as well at getting the job done without having to add a line break or height/width shenanigans.

Now, indepth break down of what I did. Hopefully it won't be too hard to follow.

1. Start with
to make it center align.
2. Declare a [cd] div that will contain the background-image. It will hide anything that spills out of it.
3. Use
to left align anything with this div.
4. Declare another [cd] div that will contain the code used most often so that it doesn't have to be repeated in each new span/div. For example, the margin-left:160px; moves all the text over at least 160px from the left edge.
5. Use [span]s around the text and code that they need individually.
6. Close each [span] after the text they modify. Compare to how you had all of your [/cd]s at the end.
7. Close the second [cd] div.
8. Close the
.
9. Close the first [cd] div.
10. Make a new [cd] div that will contain the rest of the text.
11.
to left align everything again.
12. [span] on the first line to move it over like you had and closed on the first line.
13. Close the
.
14. Close this [cd] div.
15. Close the
.

Links should work. I don't know what they are, so you should put them in yourself.​
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
I'm not sure I quite understand, but I'll take your word for it because it works. xD Thanks!
 
Alternative

Alternative

f i r e f l y .
4,262
Posts
15
Years
You can do it manually by getting all seperate colours, but that would take a while, or you can use a text gradient generator, such as this one to make it. It shouldn't be too hard to do what you want with it.
 

pokewalker

If it ain't Dutch,it ain'tmuch
667
Posts
13
Years

PHP: 
[RIGHT][title="The best Pokémon ever"][div=" width: 450px; height: 210px; background-image:URL('http://img541.imageshack.us/img541/8013/shinyswellowdwz.png'); padding-left: 19px; padding-right: 19px; "][RIGHT][COLOR="#178262"][SIZE="5"][FONT="Slackey"][title="hunting, 765 eggs"]SHINY SWELLOW[/title][/FONT][/COLOR][/SIZE][/RIGHT]

[div=" width:10px;"][sound="swellow"]http://veekun.com/dex/media/cries/277.ogg[/sound][/div]
[title="Click all links please"]
[div=" width:110px; height:70px; overflow:auto; border-radius: 50px; border-style: solid; background-color: #FFAB40; border-color: #EE6A02"]
[CENTER][URL="http://www.youtube.com/user/pokedragonmaster"][title="Sub me please"][COLOR="#FFFFFF"][B]My YouTube[/title][/B][/COLOR]
[URL="http://www.pokecommunity.com/member.php?u=119663"][B][COLOR="#FFFFFF"][title="Awesome guy, check him out!"]My CSS Teacher[/title][/URL]
[/B][/COLOR][/URL][/CENTER][/div][/title]
[/div][/title][/RIGHT]

Basically I want the black/grey thing in the back away, and I want the music bar to be resized which I saw in Roswell's sig and then it'll fit in Swellow's mouth. Anyone have any suggestions?
 

flamz321

Redefining the arts...
34
Posts
13
Years
  • Age 27
  • Seen Jan 13, 2024
Hey can anyone help me out? I'm looking for a way to make a text box on my thread, but i don't know how T_T. Is it just standard CSS commands? Or do i have to make an image and insert it?
 
Hybrid Trainer

Hybrid Trainer

2,096
Posts
15
Years
Well by text box do you mean the scroll one? because to do that all you need to do is create a CSS box and set it to overflow, like this

text
text
text
text
moar text


the code looks like this
[div=" width:100px; height:50px; overflow:auto;"]
text
text
text
text
moar text
[/div]
 

flamz321

Redefining the arts...
34
Posts
13
Years
  • Age 27
  • Seen Jan 13, 2024
Hybrid Trainer said:
Well by text box do you mean the scroll one? because to do that all you need to do is create a CSS box and set it to overflow, like this

text
text
text
text
moar text


the code looks like this
[div=" width:100px; height:50px; overflow:auto;"]
text
text
text
text
moar text
[/div]
Click to expand...

Ah sorry I meant infobox.
 
Hybrid Trainer

Hybrid Trainer

2,096
Posts
15
Years
text and stuff here
Oh right!
well for that all you needed to do was make it float to the right but using this code float:right;
coding looks a little like this
[div=" width:100px; height:50px; float:right; border:solid;"]text and stuff here[/div]
 

flamz321

Redefining the arts...
34
Posts
13
Years
  • Age 27
  • Seen Jan 13, 2024
Phew thanks you're a lifesaver :D

And how do I make the subsections inside the big box?
 
Last edited:
Hybrid Trainer

Hybrid Trainer

2,096
Posts
15
Years
Whatever
Other stuff
well thats just other CSS boxes inside of that, one of them will have a different background colour and stuff.

[div=" width:100px; height:50px; float:right; border:solid;"][div=" width:100%; height:20px; background-color:black; color:white;"]Whatever[/div]Other stuff[/div]
 
Charizard★

Charizard★

13,373
Posts
14
Years
  • Age 29
  • Seen Jan 28, 2019
Just wondering, how do you do the 'hover text' with CSS? I've tried following this, yet I still can't do it. Any help please?
 
You must log in or register to reply here.
Back
Top