The PokéCommunity Forums

The PokéCommunity Forums (https://www.pokecommunity.com/index.php)
-   Internet & Technology (https://www.pokecommunity.com/forumdisplay.php?f=57)
-   -   CSS Help & Resources (https://www.pokecommunity.com/showthread.php?t=200899)

TheMarkCrafter April 8th, 2011 4:47 AM

Can someone tell me how to do this:
http://www.pokecommunity.com/attachment.php?attachmentid=59875&d=1302238679

donavannj April 8th, 2011 6:37 AM

Quote:

Originally Posted by KingSnivy (Post 6563971)

The person who created that is probably not willing to share their CSS template, so I won't attempt to imitate it for you.

You also shouldn't be asking outright for code. Why don't you try experimenting with the CSS posted in this thread in PMing yourself or in your own signature? I've even got sample syntax in my post just above yours to create the following:

Example text.


Blinking text is annoying, though, so don't use it in a signature and avoid using it in posts. Also, all CSS properties go inside the quotation marks after the equals sign in the [css-div=""]opening tag. Don't forget to close it with a [/css-div] tag after all the text/images you want affected by it are inside the two tags.

Massacre. April 17th, 2011 12:32 PM

On the background/text colors, do you need to use both the color name AND the hex? Say #ff9900, would you have to say orange with it?

donavannj April 17th, 2011 1:26 PM

Quote:

Originally Posted by Massacre. (Post 6584476)
On the background/text colors, do you need to use both the color name AND the hex? Say #ff9900, would you have to say orange with it?

No. But you're better off using the hex instead of colors because different browsers have different interpretations of which hex color is "orange" or "pink" or "navy blue".

Xyrin April 30th, 2011 7:03 PM

I have a few questions. The semi-transparent bar for links and such in my sig, I want it at the bottom.

Also how do you make a help cursor and have it show something when you scroll over it?

And in the PPN CSS tut it says there is a code to round images and boxes. Could somebody tell me where to put this in my code? At what part? I want the semi-trans bar to be rounded as well as the image.

If someone could give me the codes or link me somewhere to find the info I would be happy. And on the second one could you give an example.

Here is my sig.
Code:

[css-div=" color: white;cursor: crosshair; background-image:url("http://fc07.deviantart.net/fs70/f/2011/120/3/f/sasuke2_by_xyr1n-d3fadbp.png"); width: 400px; height: 200px;"][css-div="width: 400px; height: 10px;"][css-div="padding: 2px 2px 2px 2px; border: solid 2px #8B0000; font-variant: small; color: #000000; background-color: #FF0000; opacity: 0.8;"]

My name is Tanner-Add Xyr1n on XBL-My Twitter-


donavannj April 30th, 2011 7:51 PM

For that bar, use a div with a transparent image as the background with dimensions that match where you want it positioned. That'll get it right where you want it.

That help cursor is actually implemented in BBCode. [title=Rain]Weather[/title] creates: Weather

You'd put that where you put the rest of your CSS. Remember to use both -webkit-border-radius and -moz-border-radius so it appears the way you want it to in as many browsers as possible.

There are plenty of codes strewn throughout this thread. Read through it to see if you skipped over anything that would actually help.

TheMarkCrafter May 1st, 2011 1:27 AM

Quote:

Originally Posted by KingSnivy (Post 6563971)

Umm.. i want the code with Cilan's VS sprite, his trainer sprite, and my youtube account, but give me the code..
Can someone do it for me, Abgenation? Zet? Anyone?

Alternative May 1st, 2011 3:42 AM

Well first of all, that's a staff collab, made by Abnegation, so you would need his permission before actually using it. Maybe instead of requesting a CSS signature to be made for you, you could try experimenting and making one for yourself. :)

Xyrin May 1st, 2011 4:09 AM

Quote:

Originally Posted by donavannj (Post 6616961)
For that bar, use a div with a transparent image as the background with dimensions that match where you want it positioned. That'll get it right where you want it.

Wait, by transparent you mean opacity not the actual image being transparent? That kinda confused me. I tried to make an image that was 400x190 and position it top with opacity 0.0.

Did I do it wrong?

donavannj May 1st, 2011 9:09 AM

Quote:

Originally Posted by Xyrin (Post 6617389)
Wait, by transparent you mean opacity not the actual image being transparent? That kinda confused me. I tried to make an image that was 400x190 and position it top with opacity 0.0.

Did I do it wrong?

Yeah. I did actually mean a completely transparent image, though opacity works, too, I guess. But you need to put the div it is inside BEFORE the div that has your text and links. And set your div to those dimensions.

Xyrin May 1st, 2011 12:23 PM

Okay I got it right but there's one problem. Lemme just show you.

siggeh]
My name is Tanner-Add Xyr1n on XBL-My Twitter-

See? The box isn't completely on the image, it looks very awkward. It looks even worse actually being in my sig because it goes over the line. :( Here's the code
Code:

[css-div=" color: white;cursor: crosshair; background-image:url("http://fc07.deviantart.net/fs70/f/2011/120/3/f/sasuke2_by_xyr1n-d3fadbp.png"); width: 400px; height: 200px;"]

siggeh]

[css-div="width: 400px; height: 10px;"][css-div="padding: 2px 2px 2px 2px; border: solid 2px #8B0000; font-variant: small; color: #000000; background-color: #FF0000; opacity: 0.8;"]

My name is Tanner-Add Xyr1n on XBL-My Twitter-

I took out the cssdivs.

donavannj May 1st, 2011 12:35 PM

Then adjust the height of it until it does line up. :\

jigglyppuff8 May 2nd, 2011 6:46 PM

That's probably more a fault with the image itself than the code. Try hosting the image elsewhere.

Oryx May 8th, 2011 5:36 PM

I want to center this, but the code is incredibly kind of messy and I can't get it to center right. :c Any tips? Putting it in code tags because it does weird things when I post it with my sig, but it's just the code I use for my sig.

HTML Code:

[css-div="align:center;"][css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;decoration:none;"][b][i][title="Catch all Pokemon available in Unova"]Current Goal[/title][/i][/b][/css-div][/css-div]    [css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][title="88/174, 48%"][color=#ffcc99]P[/color]rogr[color=#ffcc99]ess[/color][/title][/i][/b][/css-div][/css-div] [css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][url="http://www.flickr.com/people/[email protected]/"][color=#ffcc99]Flic[/color][color=#5e2612]kr[/color][/url][/i][/b][/css-div][/css-div] [css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][title="Signature created by me, images from DeviantArt"][b][i][color=#ffcc99]Si[/color]gnatur[color=#ffcc99]e[/color][/i][/b][/title][/css-div][/css-div][/css-div]



Xyrin May 8th, 2011 5:41 PM

Quote:

Originally Posted by Toujours (Post 6631488)
I want to center this, but the code is incredibly kind of messy and I can't get it to center right. :c Any tips? Putting it in code tags because it does weird things when I post it with my sig, but it's just the code I use for my sig.

HTML Code:

[css-div="align:center;"][css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;decoration:none;"][b][i][title="Catch all Pokemon available in Unova"]Current Goal[/title][/i][/b][/css-div][/css-div]    [css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][title="88/174, 48%"][color=#ffcc99]P[/color]rogr[color=#ffcc99]ess[/color][/title][/i][/b][/css-div][/css-div] [css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][url="http://www.flickr.com/people/[email protected]/"][color=#ffcc99]Flic[/color][color=#5e2612]kr[/color][/url][/i][/b][/css-div][/css-div] [css-div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][css-div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][title="Signature created by me, images from DeviantArt"][b][i][color=#ffcc99]Si[/color]gnatur[color=#ffcc99]e[/color][/i][/b][/title][/css-div][/css-div][/css-div]



I'm not all that great at CSS but couldn't you use the BB code to align everything?

Oryx May 8th, 2011 5:47 PM

Quote:

Originally Posted by Xyrin (Post 6631502)


I'm not all that great at CSS but couldn't you use the BB code to align everything?

I tried that at first, but I think the float:left ruins that, but I need that to put the boxes all on one line, soooo idk. D;

jigglyppuff8 May 8th, 2011 5:58 PM

Current Goal
Progress
Signature

Spoiler:
[CENTER][cd=height:150px; width:600px;][cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;decoration:none;"][b][i][title="Catch all Pokemon available in Unova"]Current Goal[/title][/i][/b][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][title="88/174, 48%"][color=#ffcc99]P[/color]rogr[color=#ffcc99]ess[/color][/title][/i][/b][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][url="http://www.flickr.com/people/[email protected]/"][color=#ffcc99]Flic[/color][color=#5e2612]kr[/color][/url][/i][/b][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][title="Signature created by me, images from DeviantArt"][b][i][color=#ffcc99]Si[/color]gnatur[color=#ffcc99]e[/color][/i][/b][/title][/cd][/cd][/cd][/CENTER]


Basically, what I did was put the rest of your CSS into another div, gave that div a defined height and width, and then centered that div. I'm not sure if it's a good method, but it works for me. Also, for PC CSS, cd > css-div. It's shorter and easier to manage.

Also also, image width limit is 500px. You might want to consider resizing since you have 600px.

Oryx May 8th, 2011 6:35 PM

Quote:

Originally Posted by jigglyppuff8 (Post 6631526)
Current Goal
Progress
Signature

Spoiler:
[CENTER][cd=height:150px; width:600px;][cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;decoration:none;"][b][i][title="Catch all Pokemon available in Unova"]Current Goal[/title][/i][/b][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][title="88/174, 48%"][color=#ffcc99]P[/color]rogr[color=#ffcc99]ess[/color][/title][/i][/b][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][url="http://www.flickr.com/people/[email protected]/"][color=#ffcc99]Flic[/color][color=#5e2612]kr[/color][/url][/i][/b][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][cd="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][title="Signature created by me, images from DeviantArt"][b][i][color=#ffcc99]Si[/color]gnatur[color=#ffcc99]e[/color][/i][/b][/title][/cd][/cd][/cd][/CENTER]


Basically, what I did was put the rest of your CSS into another div, gave that div a defined height and width, and then centered that div. I'm not sure if it's a good method, but it works for me. Also, for PC CSS, cd > css-div. It's shorter and easier to manage.

Also also, image width limit is 500px. You might want to consider resizing since you have 600px.

Changed it, thank you very much :D

Neptune Vasilias May 15th, 2011 2:00 AM

HELP!!!! SOS!!! PLEASE HELP THIS DAMSEL IN DISTRESS! >.<

So, I was tasked (actually, volunteered but it doesn't matter now) to host the bimonthly RPA in the RP forum and I was using CSS for the OP. So I did everything nicely to the best of my beginner abilities(Which sucks, thank you very much). The problem is, that once I click the 'Preview' button, somehow extra useless CSS codes pop out from nowhere and insert themselves into the text, thus disrupting the overall flow. And I kept on deleting those redundant codes but they're still there up till now. I've probably spent hours trying to solve this and I drifted by this thread and hope that someone can hopefully save me from drowning in despair. >_<

Here's the CSS.
Spoiler:


Voting will close on May 31st.
There are eight categories. Four where people can be voted for and four where roleplays can be voted for.
You must have posted more than once in the RP forum to be allowed to post a vote!

CATEGORIES


[BEST ROLEPLAYER] - For this you should nominate the person who, according to you, have been the best player this month. Maybe they have been incredibly creative with their posts? Maybe they have been in several RPs and managed to do well in all? Maybe they write very long and vivid posts that you just love to read?

[BEST GAME MASTER] - For this you should nominate the person who, according to you, have been the best GM this month. Maybe they made an extremely exciting RP? Maybe they always give answers and keeps things clear and understandable? Maybe they are dealing with members in a very mature and professional way?

[BEST SU-WRITER] - For this you should nominate the person who constantly writes the best SUs. Maybe their SUs are always very long and in-depth? Maybe their character(s) have very interesting personalit(ies) and histor(ies)? They have to have at least participated in more than one RP!

[FUNNIEST ROLEPLAYER] - For this you should nominate the person who never fails to tickle your funny bone while roleplaying. Maybe their character(s) always seem to get in ridiculous trouble or in a blunder? Maybe they have an unusual trait of purposefully-bad spelling? Maybe their character(s) are chief pranksters and nuisances?


[BEST ROOKIE RP] - For this you should nominate the RP that, according to you, have been the best RP created this month or last month, meaning it has to have been created in April or May 2011.


[BEST VETERAN RP] - For this you should nominate the RP that, according to you, have been the best RP created before this month or last month, meaning it has to have been created in April 2011 or earlier.

[BEST POKEMON RP #1] - For this you should nominate the RP that according to you, have been the best created from the previous RPA to the current one, meaning it has to have been created from March onwards. The RP has to be Pokemon-related.

[BEST OTHER RP #1]
- For this you should nominate the RP that according to you, have been the best created from the previous RPA to the current one, meaning it has to have been created from March onwards. The RP has to be Non-Pokemon-related.


RULES & REGULATIONS


Spoiler:
  • Once again, you must have posted more than once in the RP forum to be allowed to post a vote.
  • You don't need to motivate your votes. You are allowed to, but keep it brief in that case.
  • Don't post chit-chat in here. ONLY POST YOUR VOTING FORM.
  • You may freely edit your votes until the deadline- May 31st.
  • You don't have to be in a certain RP in order to vote for it.
  • You CAN'T nominate yourself or your own RP. This is important.
The winners of the Best ROOKIE RP, Best VETERAN RP, Best Pokemon RP #1 and Best Other RP #1 will get their titles changed to include this. The winners of Best Roleplayer, Best Game Master, Best SU-Writer and Funniest Roleplayer will get emblems! So, find out what your favorites in all four categories are (look closely at the dates they were created, for the RP categories) and post your Voting Form here! And maybe, shape up out there in the roleplays you are active in, and just maybe you will be the one who wins?

VOTING FORM


Best Roleplayer of May: (this person must have been a player in at least one RP!)

Best Game Master of May: (this person must have been the creator of at least one RP!)

Best SU Writer of May: (this person must have at least taken part in more than one RP!)

Funniest Roleplayer of May:
(this person must have at least taken part in more than one RP!)

Best Rookie RP of May: (this RP has have to been created in April or May 2011!)

Best Veteran RP of May: (this RP has to have been created before April 2011!)

Best Pokemon RP #1 May: (this RP has to have been created from March onwards!)

Best Other RP #1 May:
(this RP has to have been created from March onwards!)

Ask me if anything is unclear.
Have fun, and good luck!~
http://archives.bulbagarden.net/media/upload/e/e5/Spr_4p_471.png



Look it even has to spill out of the spoilers. I'm so pathetic at CSS. >_<

Impo May 15th, 2011 2:58 AM

Actually, that's a common problem. I have had it too.
I think the computer reads the beginning of the code, but gets confused and believes you forgot the ending, and tries to create one for you.

To remedy this try writing the code with the editor mode switched (top right button, the underlined A and the normal A.

seeker May 15th, 2011 3:23 AM

It happens when you use BB code on your CSS so if you have this for example

[css-div="color: black

It's going to mess up because your codes are mixed up in BB code. Refer to the post above mine for what to do.

Neptune Vasilias May 15th, 2011 5:56 AM

Quote:

Originally Posted by Impo (Post 6641991)
Actually, that's a common problem. I have had it too.
I think the computer reads the beginning of the code, but gets confused and believes you forgot the ending, and tries to create one for you.

To remedy this try writing the code with the editor mode switched (top right button, the underlined A and the normal A.

Quote:

Originally Posted by Abnegation (Post 6642005)
It happens when you use BB code on your CSS so if you have this for example

[css-div="color: black

It's going to mess up because your codes are mixed up in BB code. Refer to the post above mine for what to do.

Thanks to both of you. I switched to editor mode and cleaned up the messy codes and now it's A-Ok. :D

XOXO~

Neptune Vasilias May 15th, 2011 10:25 PM

Another question, does anyone know how to make text boxes in signatures rounded at the corners? The one I'm constructing now looks ugly with the sharp corners of the rectangle.

Skip Class May 15th, 2011 10:57 PM

I remember answering a question like that a while ago

Quote:

Originally Posted by zappyspiker (Post 6219669)
You add just change the roundness of a rectangle box:

-moz-border-radius: 12px; -webkit-border-radius: 12px;

Just change how many px to how rounded you wanted to be


Neptune Vasilias May 15th, 2011 11:01 PM

Quote:

Originally Posted by zappyspiker (Post 6643710)
I remember answering a question like that a while ago


So do I add together with the box code or place it separately?


All times are GMT -8. The time now is 11:04 PM.


Like our Facebook Page Follow us on Twitter © 2002 - 2018 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 - 2016 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.

Acknowledgements
Use of PokéCommunity Assets
vB Optimise by DragonByte Technologies Ltd © 2023.