CSS Help & Resources

[Wobbu]

Just wonderin' how I can make my text with out opacity.... it looks really weird....

Additionally, you can use the command rgba (0, 0, 0, 0.6) for the color of your box. The a determines the opacity of the background rather than the text and the rgb determines the color of your box.

 

[acatfrommars]

Is tutoring still a thing? Because I've always wanted to learn CSS, and to eventually make a skin for VB CS3 an CS4

 

[abnegation]

Is tutoring still a thing? Because I've always wanted to learn CSS, and to eventually make a skin for VB CS3 an CS4

It died down some time ago since it was quite hard to keep a track of, not sure if anyone set it up again, or wants to. Though if you ever run into any problems or want to ask ant questions (no matter how silly they sound), you should feel free to post here in this thread. You have nothing to be afraid of. CSS isn't easy in the beginning, I know that all too well!

 

[Tsutarja]

Does anyone remember the alt code that makes usertitles disappear like I have mine right now? I set it a long time back and I can't find it anymore.

If anyone finds this, let me know as well please.

 

[Tsutarja]

Can anyone help me with why my signature doubled up like that?

What exactly do you mean by "doubled up"?

 

[donavannj]

http://www.pokecommunity.com/showthread.php?t=316697

Anyone got time to work with me on making the colossal box I made at the top right corner into a collapsible box that'll work in all browsers? So far, the only means I'm seeing is to make it into another CSS-DIV and using some elements and properties that apparently don't render properly in Chrome or Safari. Anyone got any ideas?

Code of the box for reference:

[PLAIN][div="width: 180px;height: 310px;overflow: hidden;position: fixed;top: 11px;right: 11px;"][div="font: bold 15px arial, sans-serif;color: #6495ED;text-align: center;position: relative; padding: 7px 0; left: 1px;top: 23px;width: 170px; background-color: #F8F8FF;border:3px solid #6495ED;"][h3]Quick Links[/h3]
[aurl="top"]Back to Top[/aurl]

[aurl="terms"]Glossary of Terms[/aurl]

[aurl="start"]Getting Started[/aurl]*

[aurl="spotfakes"]How to Spot Fakes[/aurl]

[aurl="earn"]Learn to Play[/aurl]

*Coming soon!
[/div][/div][/PLAIN]

 

[Wobbu]

http://www.pokecommunity.com/showthread.php?t=316697

Anyone got time to work with me on making the colossal box I made at the top right corner into a collapsible box that'll work in all browsers? So far, the only means I'm seeing is to make it into another CSS-DIV and using some elements and properties that apparently don't render properly in Chrome or Safari. Anyone got any ideas?

Do you mean something like this?

Spoiler:

Quick Links

Back to Top

Click to expand

Click to expand
Glossary of Terms

Getting Started*

How to Spot Fakes

Learn to Play

*Coming soon!

[PLAIN][div="width: 180px;height: 100%;overflow: hidden;position: fixed;top: 11px;right: 11px;"][div="font: bold 15px arial, sans-serif;color: #6495ED;text-align: center; width: 170px; background-color: #F8F8FF;border:3px solid #6495ED;"][h3]Quick Links[/h3]
[aurl="top"]Back to Top[/aurl]

[textcollapse="Click to expand"][aurl="terms"]Glossary of Terms[/aurl]

[aurl="start"]Getting Started[/aurl]*

[aurl="spotfakes"]How to Spot Fakes[/aurl]

[aurl="earn"]Learn to Play[/aurl]

*Coming soon![/textcollapse]
[/div][/div][/PLAIN]

If it's not in the spoiler tags then my signature is moved directly under the division...

 

[donavannj]

Do you mean something like this?

Spoiler:

Quick Links

Back to Top

Click to expand

Click to expand
Glossary of Terms

Getting Started*

How to Spot Fakes

Learn to Play

*Coming soon!

[PLAIN][div="width: 180px;height: 100%;overflow: hidden;position: fixed;top: 11px;right: 11px;"][div="font: bold 15px arial, sans-serif;color: #6495ED;text-align: center; width: 170px; background-color: #F8F8FF;border:3px solid #6495ED;"][h3]Quick Links[/h3]
[aurl="top"]Back to Top[/aurl]

[textcollapse="Click to expand"][aurl="terms"]Glossary of Terms[/aurl]

[aurl="start"]Getting Started[/aurl]*

[aurl="spotfakes"]How to Spot Fakes[/aurl]

[aurl="earn"]Learn to Play[/aurl]

*Coming soon![/textcollapse]
[/div][/div][/PLAIN]

If it's not in the spoiler tags then my signature is moved directly under the division...

Sort of, but not quite. What I'm looking to do is beyond the capabilities of the text-collapse tag.

Maybe it'd be simpler if I just made a drop down menu from it... I'll probably look into it some tomorrow.

 

[droomph]

Does anyone remember the alt code that makes usertitles disappear like I have mine right now? I set it a long time back and I can't find it anymore.

It was &32; or something but i furgot :(

 

[donavannj]

Its usage has been blocked for reasons unrelated to usertitles.

 

[Tsutarja]

Its usage has been blocked for reasons unrelated to usertitles.

Indeed. The "&32;" usage trick stopped working though when PC was upgraded to vBulletin 3.8.8 some time ago, though. So I wonder if that has anything to do with it.

 

[TheMarkCrafter]

Anyone knows how to make Gradient text?

If anybody knows the thing I mean.

I want it to be like

Snivy

But the color scheme thing links between the other colors.

Just like when you gradient in Photoshop, but horizontal.

Thank you ;)

 

[Tsutarja]

Anyone knows how to make Gradient text?

If anybody knows the thing I mean.

I want it to be like

Snivy

But the color scheme thing links between the other colors.

Just like when you gradient in Photoshop, but horizontal.

Thank you ;)

Here's something I found:

Snivy

[PLAIN][div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/div][/PLAIN]

You may or may not be able to see it, but if you have Chrome, it should appear fine. Also, you may need to adjust the percentage of the gradient as well depending on where you're putting it.

Hope this helps! :)

 

[TheMarkCrafter]

Here's something I found:

Snivy

[PLAIN][div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/div][/PLAIN]

You may or may not be able to see it, but if you have Chrome, it should appear fine. Also, you may need to adjust the percentage of the gradient as well depending on where you're putting it.

Hope this helps! :)

Thanks :) But when I add it to the center and give it the size 5, that's how it shows.

Snivy

And for the code, here:

Spoiler:

[CENTER][S IZE="5"][css-d iv="background-image: -webkit-gradien t(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/c ss-div][/S IZE][/CENTER]

And I meant to add the spaces, because the code won't show.

And thank you for helping :)

 

[Tsutarja]

Thanks :) But when I add it to the center and give it the size 5, that's how it shows.

Snivy

And for the code, here:

Spoiler:

[CENTER][S IZE="5"][css-d iv="background-image: -webkit-gradien t(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/c ss-div][/S IZE][/CENTER]

And I meant to add the spaces, because the code won't show.

And thank you for helping :)

You'll have to play around with the percentage there. Here's the code again, with the updated text:

[PLAIN][CENTER][SIZE="5"][div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(80%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/div][/SIZE][/CENTER][/PLAIN]

And here's the part where you would need to play around with (using a number between 1 and 100), as highlighted below:

-webkit-gradient(linear, left center, right center, from(#006400), color-stop([S-HIGHLIGHT]60%[/S-HIGHLIGHT], #98FB98))

 

[TheMarkCrafter]

You'll have to play around with the percentage there. Here's the code again, with the updated text:

[PLAIN][CENTER][SIZE="5"][div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(80%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/div][/SIZE][/CENTER][/PLAIN]

And here's the part where you would need to play around with (using a number between 1 and 100), as highlighted below:

-webkit-gradient(linear, left center, right center, from(#006400), color-stop([S-HIGHLIGHT]60%[/S-HIGHLIGHT], #98FB98))

Oh well, I thought there would be some percentage playing but no.

I must thank the body part called brain for ignoring it..

Anyways thank you!

 

[Legendary Silke]

I wonder whether this place can be used for a "rate my CSS-based signature" post. If yes, what do you think of my signature? I'm also thinking of going from hard-coded background colours to a base background colour, gradients, and the text background colours to be actually semi-transparent. (no need to show me the code since I know what I need to do already - just chime in on the idea)

Either way, sometimes, don't you wish everyone supported everything equally well? Pretty much every major browser engine have their strengths (think Webkit/Blink and effects in general, Trident and text and just rendering things as fast and as correctly as possible, off the top of my head in my actual use) that makes it a bit hard to target something specific. I prefer to just... well, seeing as my siggy looks fine in IE8 of all things...

I just make sure that nothing looks obviously wrong in kind-of-old browsers.

 

[acatfrommars]

Could someone show me how to get my sound bar and text at the bottom of my tag?
#nubstatus

 

[Ghost Lunis]

Hello I'm back again with another question.
I tried posting an image in a thread but the image wouldn't show up. Here is how I wrote it.
[IMG]https://www.dropbox.com/s/g7jl5hnzg0dhgsq/20140120_203141.jpg[/IMG]
I haven't used dropbox really before and I tried doing this on my phone. I don't have a clue what could be going wrong. Any help would be greatly appreciated as I would like to post more pictures in the future as well . Thanks a bunch:)

 

[Tsutarja]

Hello I'm back again with another question.
I tried posting an image in a thread but the image wouldn't show up. Here is how I wrote it.
[IMG]https://www.dropbox.com/s/g7jl5hnzg0dhgsq/20140120_203141.jpg[/IMG]
I haven't used dropbox really before and I tried doing this on my phone. I don't have a clue what could be going wrong. Any help would be greatly appreciated as I would like to post more pictures in the future as well . Thanks a bunch:)

The reason that your link isn't coming out as an image is because it's not a direct link to the image. AFAIK, with Dropbox, only images in the public folder can be directly linked, so you may want to move it over there.