CSS Help & Discussion

[Impo]

tried both, and neither worked :?

I've got every code I've seen in this thread written down on a pad of paper next to me ,
it was there, but I only made the first one float

I've got every code I've seen in this thread written down on a pad of paper next to me ,
it was there, but I only made the first one float

[Alternative]

This isn't really a problem, but more of a query. Is there some sort of code which allows you to change text decoration? Like, I know that you can automatically make it bold and stuff, but is there something, like when you make something bold, it makes it a different colour as well.

[jigglyppuff8]

You can already do that with bbcode [color] and [b], right? I mean, >this is bolded and in a different color

Unless you're talking about something
like
this

Where the strikethrough has a color in the first word but not the second, because of the ordering of bbcode.


If this doesn't help, then would you mind elaborating? Your question's kind of vague in my view.

[donavannj]

In CSS, using color:#000000 gives you black text (or white text - I forget which color is which hex code). You can probably figure it out from there. It's separate from the text-decoration property.

For example:

[css-div="text-decoration:blink;color:#0000ff;"]Example text.[/css-div]

Gives you this:

Example text.

Also, you cannot use text-decoration to bold text. Just so you know.

[KingSnivy]

Can someone tell me how to do this:

[donavannj]

Originally Posted by KingSnivy

Can someone tell me how to do this:

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.]

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]

Originally Posted by Massacre.

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]

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.

[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]

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.

[KingSnivy]

Originally Posted by KingSnivy

Can someone tell me how to do this:

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]

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]

Originally Posted by donavannj

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]

Originally Posted by Xyrin

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]

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

[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]

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

[jigglyppuff8]

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

[Toujours]

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.

[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/62648270@N04/"][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]

Originally Posted by Toujours

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.

[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/62648270@N04/"][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?

[Toujours]

Originally Posted by Xyrin

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]

Current Goal

Progress

Flickr

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/62648270@N04/"][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.

[Toujours]

Originally Posted by jigglyppuff8

Current Goal

Progress

Flickr

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/62648270@N04/"][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

[Diamond1304]

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:

WELCOME TO THE RPA ★



RPA means Role-Player Awards/Role-Play Awards

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!~

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

[Impo]

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.

[Abnegation]

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.