The PokéCommunity Forums  

Go Back   The PokéCommunity Forums > Entertainment & Hobbies > Technology & Internet
Sign Up Rules/FAQ Live Battle Blogs Mark Forums Read

Notices

Technology & Internet The place to go for all things tech and internet. Share a funny YouTube video or meme, discover the latest useful apps, or just get some free tech support.


Reply
Click here to go to the first staff post in this thread.  
Thread Tools
  #401    
Old June 16th, 2011, 11:38 PM
Gallaceon's Avatar
Gallaceon
 
Join Date: Jul 2010
Gender: Male
I have to use CSS on my forum
Quote:
I think that the CSS feature should be added. It'll make posts and signatures look more snazzy.
Someone on my forum asked me for that..
Can i anyone explain me how can i do so?
I am using vBulletin 4
__________________
PokéHunngry™ Community - Pokemon Forum
Reply With Quote
  #402    
Old June 20th, 2011, 09:44 AM
pokewalker's Avatar
pokewalker
If it ain't Dutch,it ain'tmuch
Community Supporter
 
Join Date: Jun 2010
Location: Netherlands
Age: 17
Gender: Male
Nature: Jolly
I have some annoying thing in my signature.... Does anyone know how to fix?














pokewalker

Code:
PHP Code:
[CENTER][title="Hunting! And previous signature got deleted cos it bugged up with some people. New one under construction!"][css-div=" width: 430px; height: 275px; background-image:URL('http://img600.imageshack.us/img600/8013/shinyswellowdwz.png'); padding-left: 19px; padding-right: 19px; border-radius: 50px; border-style: solid; border-color: #158015;"]












[
URL="http://www.pokecommunity.com/member.php?u=215584"][title="The only true Skylegend"][LEFT][IMG]http://images.wikia.com/pokemon/images/e/e7/Shiny_Swellow_BW.gif[/IMG][/LEFT][/title][/URL][RIGHT][COLOR="#158015"][SIZE="5"][FONT="Slackey"][title="CSS Teacher: Hybrid Trainer"]pokewalker[/title][/FONT][/SIZE][/COLOR][/RIGHT]
[/css-div][/title][/CENTER
__________________
Reply With Quote
  #403    
Old June 20th, 2011, 09:52 AM
Oryx's Avatar
Oryx
Moon Prism POWER
Community Supporter
 
Join Date: Mar 2011
Age: 21
Gender: Female
Nature: Relaxed
Can you explain what's annoying? It looks perfectly alright for me (the sprite is animated as well):

__________________
Reply With Quote
  #404    
Old June 20th, 2011, 10:19 AM
jigglyppuff8's Avatar
jigglyppuff8
 
Join Date: Jun 2007
Location: PA, USA :effort
Age: 20
Gender: Male
Nature: Modest
If it's the text being under the box that's the problem, then use [image=left] tags instead of [img] tags for the image.














pokewalker

I would advise against using line breaks for the purpose of positioning since their height can vary from browser to browser. I'd use position:relative;, padding, and margin properties to position things around.
__________________
迷いながらトキメイタ 
記憶は儚くて消えないで

Reply With Quote
  #405    
Old June 20th, 2011, 10:35 AM
pokewalker's Avatar
pokewalker
If it ain't Dutch,it ain'tmuch
Community Supporter
 
Join Date: Jun 2010
Location: Netherlands
Age: 17
Gender: Male
Nature: Jolly
Quote:
Originally Posted by Toujours View Post
Can you explain what's annoying? It looks perfectly alright for me (the sprite is animated as well):

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

Quote:
Originally Posted by jigglyppuff8 View Post
If it's the text being under the box that's the problem, then use [image=left] tags instead of [img] tags for the image.














pokewalker

I would advise against using line breaks for the purpose of positioning since their height can vary from browser to browser. I'd use position:relative;, padding, and margin properties to position things around.
Sure, looks beter, I'll try also getting the pokewalker one enter lower.

EDIT: Nvm. It's fine now, exactly how I wanted it. Thanks!
__________________
Reply With Quote
  #406    
Old June 20th, 2011, 01:42 PM
Oryx's Avatar
Oryx
Moon Prism POWER
Community Supporter
 
Join Date: Mar 2011
Age: 21
Gender: Female
Nature: Relaxed
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 Code:
[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 nothingI 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
__________________
Reply With Quote
  #407    
Old June 20th, 2011, 02:00 PM
jigglyppuff8's Avatar
jigglyppuff8
 
Join Date: Jun 2007
Location: PA, USA :effort
Age: 20
Gender: Male
Nature: Modest
Are you sure you put the [URL] tags in? Because I'm not seeing them.
__________________
迷いながらトキメイタ 
記憶は儚くて消えないで

Reply With Quote
  #408    
Old June 20th, 2011, 08:38 PM
Oryx's Avatar
Oryx
Moon Prism POWER
Community Supporter
 
Join Date: Mar 2011
Age: 21
Gender: Female
Nature: Relaxed
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 Code:
[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.
__________________
Reply With Quote
  #409    
Old June 20th, 2011, 09:36 PM
jigglyppuff8's Avatar
jigglyppuff8
 
Join Date: Jun 2007
Location: PA, USA :effort
Age: 20
Gender: Male
Nature: Modest
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:
[center][cd=height:200px; width:500px; overflow:hidden; background-image:url('http://i53.tinypic.com/2m28kn9.png');][left][cd=line-height:29px; margin-left:160px; margin-top:10px; font-family:Trebuchet MS; text-shadow:0px 0px 5px #ffffff;][span="font-size: 20px; color:#330000; letter-spacing:10px;"]★[title="Catch all non-Unova Pokemon in Unova"]Goal[/title][/span]
[span=font-size: 15px; color:#737373; letter-spacing:7px; position:relative; left:60px; bottom:10px;][title="133/174, 76.4%"](Progress)[/title][/span]
[span=font-size: 20px; color:#330000; letter-spacing:10px;]★[title="Sanguinius <3"]Pair[/title][/span]

[span=font-size: 20px; color:#330000; letter-spacing:10px;]★IRC[/span]
[span=font-size: 15px; color:#737373; letter-spacing:7px; position:relative; left:60px; bottom:10px;](Talk to me)[/span][/cd][/left][/cd][cd=width:500px; color:#330000; text-align: left;decoration:none;font-family:"Trebuchet MS"; font-size: 15px; letter-spacing:5px; text-shadow:0px 0px 5px #ffffff;][left][span=position:relative; right:65px; ]I ask for nothing, I can get by[/span]
but I know so many less lucky than I[/left][/cd][/center]


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 [Center] 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 [Left] 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 [left].
9. Close the first [cd] div.
10. Make a new [cd] div that will contain the rest of the text.
11. [left] 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 [left].
14. Close this [cd] div.
15. Close the [center].

Links should work. I don't know what they are, so you should put them in yourself.
__________________
迷いながらトキメイタ 
記憶は儚くて消えないで

Reply With Quote
  #410    
Old June 20th, 2011, 10:00 PM
Oryx's Avatar
Oryx
Moon Prism POWER
Community Supporter
 
Join Date: Mar 2011
Age: 21
Gender: Female
Nature: Relaxed
I'm not sure I quite understand, but I'll take your word for it because it works. xD Thanks!
__________________
Reply With Quote
  #411    
Old June 20th, 2011, 10:15 PM
jigglyppuff8's Avatar
jigglyppuff8
 
Join Date: Jun 2007
Location: PA, USA :effort
Age: 20
Gender: Male
Nature: Modest
If there's anything in particular that you'd like clarified on why I did it the way I did, feel free to ask.
__________________
迷いながらトキメイタ 
記憶は儚くて消えないで

Reply With Quote
  #412    
Old June 20th, 2011, 10:25 PM
TheMarkCrafter
Magma.
 
Join Date: Jan 2011
Location: Kalos
Gender: Male
Nature: Serious
How can i make Dark to Lime green text colors?
Like in jigglypuff's?
__________________

omega.
No information yet.
Reply With Quote
  #413    
Old June 20th, 2011, 11:21 PM
Alternative's Avatar
Alternative
welcome to my womb
Community Supporter
 
Join Date: Jan 2009
Location: Adelaide, Australia
Age: 21
Gender: Male
Nature: Impish
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.
__________________
Reply With Quote
  #414    
Old June 23rd, 2011, 04:27 AM
pokewalker's Avatar
pokewalker
If it ain't Dutch,it ain'tmuch
Community Supporter
 
Join Date: Jun 2010
Location: Netherlands
Age: 17
Gender: Male
Nature: Jolly

PHP Code:
[RIGHT][title="The best Pokémon ever"][css-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][/SIZE][/COLOR][SIZE="5"][/SIZE][/RIGHT]

[
css-div=" width:10px;"][sound="swellow"]http://veekun.com/dex/media/cries/277.ogg[/sound][/css-div]
[title="Click all links please"]
[
css-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[/B][/COLOR][/title][COLOR="#FFFFFF"][B][/B][/COLOR]
[
URL="http://www.pokecommunity.com/member.php?u=119663"][B][COLOR="#FFFFFF"][title="Awesome guy, check him out!"]My CSS Teacher[/title][/COLOR][/B][/URL][B][COLOR="#FFFFFF"]
[/
COLOR][/B][COLOR="#FFFFFF"][/COLOR][/URL][/CENTER][/css-div][/title]
[/
css-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?
__________________
Reply With Quote
  #415    
Old June 23rd, 2011, 05:23 PM
jigglyppuff8's Avatar
jigglyppuff8
 
Join Date: Jun 2007
Location: PA, USA :effort
Age: 20
Gender: Male
Nature: Modest
Learn to use height, width, and overflow properties in your favor. No I will not give you the code.
__________________
迷いながらトキメイタ 
記憶は儚くて消えないで

Reply With Quote
  #416    
Old July 1st, 2011, 10:47 AM
flamz321's Avatar
flamz321
Redefining the arts...
 
Join Date: Apr 2011
Age: 17
Gender: Male
Nature: Brave
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?
__________________
Pokemon Cobalt



Reply With Quote
  #417    
Old July 1st, 2011, 10:54 AM
Hybrid Trainer's Avatar
Hybrid Trainer
My Secrecy. My Advantage.
 
Join Date: Nov 2008
Location: «UK»
Age: 19
Gender: Male
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
[css-div=" width:100px; height:50px; overflow:auto;"]
text
text
text
text
moar text
[/css-div]
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #418    
Old July 1st, 2011, 11:32 AM
flamz321's Avatar
flamz321
Redefining the arts...
 
Join Date: Apr 2011
Age: 17
Gender: Male
Nature: Brave
Quote:
Originally Posted by Hybrid Trainer View Post
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
[css-div=" width:100px; height:50px; overflow:auto;"]
text
text
text
text
moar text
[/css-div]
Ah sorry I meant infobox.
__________________
Pokemon Cobalt



Reply With Quote
  #419    
Old July 1st, 2011, 11:38 AM
Hybrid Trainer's Avatar
Hybrid Trainer
My Secrecy. My Advantage.
 
Join Date: Nov 2008
Location: «UK»
Age: 19
Gender: Male
Quote:
Originally Posted by flamz321 View Post


Ah sorry I meant infobox.
Infobox? can you give an example of somewhere where its used?
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #420    
Old July 1st, 2011, 11:56 AM
flamz321's Avatar
flamz321
Redefining the arts...
 
Join Date: Apr 2011
Age: 17
Gender: Male
Nature: Brave
http://www.pokecommunity.com/showthr...hlight=uranium

The infobox is on the right with the download, team, status, etc.
__________________
Pokemon Cobalt



Reply With Quote
  #421    
Old July 1st, 2011, 12:13 PM
Hybrid Trainer's Avatar
Hybrid Trainer
My Secrecy. My Advantage.
 
Join Date: Nov 2008
Location: «UK»
Age: 19
Gender: Male
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
[css-div=" width:100px; height:50px; float:right; border:solid;"]text and stuff here[/css-div]
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #422    
Old July 1st, 2011, 12:19 PM
flamz321's Avatar
flamz321
Redefining the arts...
 
Join Date: Apr 2011
Age: 17
Gender: Male
Nature: Brave
Phew thanks you're a lifesaver :D

And how do I make the subsections inside the big box?
__________________
Pokemon Cobalt




Last edited by flamz321; July 1st, 2011 at 12:24 PM.
Reply With Quote
  #423    
Old July 1st, 2011, 12:40 PM
Hybrid Trainer's Avatar
Hybrid Trainer
My Secrecy. My Advantage.
 
Join Date: Nov 2008
Location: «UK»
Age: 19
Gender: Male
Whatever
Other stuff
well thats just other CSS boxes inside of that, one of them will have a different background colour and stuff.

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


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #424    
Old July 5th, 2011, 02:41 PM
Naruto Uzumaki's Avatar
Naruto Uzumaki
memories.
Community Supporter
 
Join Date: Jul 2009
Age: 19
Gender: Female
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?
__________________
My melted heart remains
As I painfully cover my permanent wounds
Somewhere in the city that flies by
Your siren wails endlessly
Open up

l MAL l
Reply With Quote
  #425    
Old July 5th, 2011, 02:47 PM
abnegation's Avatar
abnegation
proudly paired with adventure
 
Join Date: Apr 2009
Age: 21
You can't, you need HTML, CSS alone doesn't have the capabilities.
Reply With Quote
Reply
Quick Reply

Sponsored Links
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Minimum Characters Per Post: 25



All times are UTC -8. The time now is 08:20 AM.


Style by Nymphadora, artwork by Sa-Dui.
Like our Facebook Page Follow us on Twitter © 2002 - 2014 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2014 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.