CSS Help & Resources

Spherical Ice · Dec 9, 2009

I've been doing some CSS emulation, so to speak.

Spoiler:

The colours the were the colours used in the "Let's Get This Party Startered." theme of PC.
---

ShinjisLover said:
Excuse me, but I need help regarding this post, please. =3

You'd want to make a box the dimensions you want (with width: #px; height: #px;), the type of border you'd want (with border-width: #px; border-style: solid; border-color: #;), and the text color and bg color (with background-color: #; color: #;) to make the big box, and then have smaller versions of that inside.

Gary the Magic Fairy · Dec 9, 2009

ShinjisLover said:
Excuse me, but I need help regarding this post, please. =3

Actually, you can indeed use a "sprite sheet."
[jq]In addition, sprite sheets (an image containing different sprite frames), count as a single sprite, so just keep that in mind."[/jq]As long as it isn't the same sprite but facing left, right, up, down, etc., you should be fine. That would be ridiculous to arbitrarily close threads just because all the sprites are in a single image, when it's exactly the same sprites.

As for your question, I'm not 100% sure it's possible with pure CSS. I tried to do something very similar to this a few months back, and this was the best I could do:

But having just a simple box that you can tile horizontally, and then putting the names in the individual sprite images would be easier.

I can't find any way to have two or more CSS Divisions next to each other, so that's why I couldn't get it to work like you're asking.

Spherical Ice · Dec 9, 2009

@ Gary: Yeah, that was the problem; they only seem to go together vertically, not horizontally. :/

jigglyppuff8 · Dec 9, 2009

Gary said:
I can't find any way to have two or more CSS Divisions next to each other, so that's why I couldn't get it to work like you're asking.

display:inline property.

This is div 1

This is div 2

Gary the Magic Fairy · Dec 9, 2009

jigglyppuff8 said:
display:inline property.

This is div 1

This is div 2

Well crap. I wish I knew that a lot sooner.

Thanks. XD

.little monster · Dec 22, 2009

Spoiler:

I can't figure out why the bottom bar wont stay at the bottom of the image (but over-laying the image), and why the top bar wont stay directly at the top (but over-laying the image.)

Can anyone help? ;-;

You'll have to quote to get the code.

Rukario · Dec 22, 2009

t.A.T.u said:
Spoiler:

We're gonna run, nothing can stop us!
Extended Signature

I can't figure out why the bottom bar wont stay at the bottom of the image (but over-laying the image), and why the top bar wont stay directly at the top (but over-laying the image.)

Can anyone help? ;-;

You'll have to quote to get the code.

ok i have to quote this first.... try this:

Spoiler:

adjusted the bottom txt thing's position by 30 px ie.. top: 212px;

jigglyppuff8 · Dec 22, 2009

t.A.T.u said:
I can't figure out why the bottom bar wont stay at the bottom of the image (but over-laying the image), and why the top bar wont stay directly at the top (but over-laying the image.)

Can anyone help? ;-;

You'll have to quote to get the code.

Well, with the top bar, you had an extra line break which pushed the box down, along with an unnecessary " position: relative; top: -12px;", which pushed the box upward. The bottom bar just needed a few adjustments in the "position: relative; top" afterwards.

Spoiler:

The code looks less organized without the line breaks, but sacrifices. ;;
Hopefully, this is the result you wanted.

abnegation · Dec 30, 2009

The CSS Signature Resource

All you need to know for using CSS in your signature.

Top Tip: Tired of always typing out those Css-div's? Are they getting in the way of the max character limit? Well, just try these;

You don't need to insert "'s either!

100% Width Signatures

So, where to begin. How about the fad in which had many people baffled once upon a time? The 100% width signature. If you don't know what I mean, well it was something a little like this.

Spoiler:

So that's a pretty basic example of what you can do with a 100% signature. Now I will run down through each code I used in the actual sig.

background-color: #000000; - The actual background in which everything goes over
background-image:url('http://cbimg6.com/graphics/07/09/26/38888b.jpg'); - The little decoration in the corner, any background you want to go behind your text etc. such as this or a gradient, should be put in as such followed by a few other things

background-position: bottom right; - This is where you want to position that background. You could also say; bottom-left; or Top Right; or Top; etc.
width:100%; height:300px; - This is the size of the image. BUT, the width MUST be set at 100% so that the black background goes that 100%, to prevent the image we used in the corner from repeating itself and stretching across the image we do the next step.
background-repeat:no-repeat; - This applies to the image we used, it will prevent the image from repeating. If you want an image torepeat itself in both directions dont enter this code, but if you want to make it repeat in only one enter this; Background-repeat: repeat-x; (this makes it repeat itself but only from left to right tofill the width where as; background-repeat:y will make it repeat from the top down. This happens when the background such as the black one I have is too big and the image needs to repeat itse;f to fill out.

This next part was the pretty ugly looking text I made.

color:#ffffff; - This relates to the colour of the text.
text-shadow: 0.2em 0.2em 0.4em; - This is the shadow behind the image. Each size represents a different part of the shadow, try playing with the numbers to see how it works.
font-size: 2em; - This is the size of the font.
font-weight:bold; - The font's "Weight" either bold, italic etc.
text-align:center; Where the text is aligned on the image.
font-family:Cambria; - This is the font I used. You can edit the text normally using BB code but some times it can mess up and make things awkward. I just use this to be safe.

And that is the 100% signature. If you have any more questions on it feel free to ask. I have some more codes to explain, nincluding the ones above in more depth.

All You need To Know About Text

Okay, so you've all seen some pretty text around the forum and wondered how it was done. Well there's many ways to make it look impressive. I'll start with the text currently in my signature and how I did it shall I?
Example:

Why So Serious?

let's put a smile on that face

How it's done.
font-size:20pt; - Again just the font size, pt is just another way of sizing text
font-family:georgia; - The font used
letter-spacing:-1pt; - This is new, this is how the letters are spaced out. You can do this in other ways, you can make letters further away as well as closer together. Just put a "-" before the number tomake them closer together and none before the number to make them more spaced. The bigger the number the closer/further away the characters will be. Neat huh?
line-height:100%; - This sets how close two words will be when one is placed next to it. It will automatically pu the other word below so long as the other word has a line height code before it also. 100% means the word is at its normal height, the more you change the % the more it will move. As this is for the top words I left it normal.
color: #AC2239; - The colour of the text again.

That was for the words "WhySo Serious" The next part is for "Let's put a smile on that face"

font-size:6pt; - Made the text considerably smaller to look more presentable
font-family:georgia; Same font as above
letter-spacing: 2pt; - I moved the letters further away from eachother for this
line-height:100%; When you insert line height it automatically makes the words overlap, so setting both lines to be at 100% has very little overlapping. if you were to decrease the number they would come closer together, if you increased it they would move further away. Play around with it a bit
color: #000000 - Once again, just colour.

Title tags with no dots underneath.
Quick and easy one, but very handy when making your signature look well!

Eample:

Hover Over Me

Solution:
[title=Tah Dah][div=text-decoration:none;]Hover Over Me[/div][/title]

Text Color
The color property is used to set the color of the text. The color can be specified by:

name - a color name, like "red"
RGB - an RGB value, like "rgb(255,0,0)"
Hex - a hex value, like "#ff0000"

Example of a code using these:

color:red;
color: rgb(255,0,0);
color: #ff0000

Text alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Eamples of codes:

Text-align: Center
Text-align: right;
text-aling: justify;

Text Decoration:
Like I showed ablve with the title tag, text decoration can be used to take decoration from text, but it can also add decoration.

Examples of codes:

Text-decoration: none;
Text-decoration: blink;
Text- decoration: underline;
Text-decoration: line-through;
Text-decoration: Overline;
You can see those in action on the main post.

Text Transform:
This is used to transform text into different cases text-transform:uppercase;
text-transform:lowercase;
text-transform:capitalize;

Misc Codes That will really help!

Float: Float is aligning someting to the side of the screen while text will surround it without spilling into it. I will make a CSS box and float it to the right and put text around it as an example and then, tell you the code.

Here is your little box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Solution: Just put in

before whatever it is you want to float. You can also float things left :p

Overflow/Scrolling boxs:
These nare used when there is too much text which will not fit in one space. So I will make a background and have a lot of text with in it so that the scrolling box will appear, then explain the code.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

You can add anything you wish to there of course, just add in other codes. If you've got too much text or images in one space just use this:
Solution:
Overflow:auto;

So that's it for now, I'll add on more as I think of it, but what you see above should be what you need for making a neat signature. Just apply the codes and follow the rules of CSS. Most of all DO NOT STEAL CODES, I'd much prefer if you learned them yourself, that's why examples are there. I'll add on to all this when I get the time, and tweak it but now Suggestions and questions go go go.

Uecil · Jan 23, 2010

can i just ask i've been trying to get this CSS code thing to work for almost a week now and there's no luck for me. i'm trying to get the hover text in my banner how can i do that??

Jordan · Jan 23, 2010

sspokemon said:
can i just ask i've been trying to get this CSS code thing to work for almost a week now and there's no luck for me. i'm trying to get the hover text in my banner how can i do that??

You don't need CSS for that if I think this is what you meant:

Or if you meant text in the banner, then:

[cd= height: 240px; width: 390px; border: 1px solid; background-image: url("http://i20.photobucket.com/albums/b232/Birdmandata/Garyok.png"); padding: 5px 2px 2px 5px;][title="Hover text here"]Text and stuff[/title][/cd]

Which makes:

Text and stuff

Of course, the height and width should match whatever the properties of your banner are. Padding makes the text move in towards the center of the banner.

Uecil · Jan 23, 2010

Miniryu said:
You don't need CSS for that if I think this is what you meant:

Or if you meant text in the banner, then:

[cd= height: 240px; width: 390px; border: 1px solid; background-image: url("http://i20.photobucket.com/albums/b232/Birdmandata/Shirles.png"); padding: 5px 2px 2px 5px;][title="Hover text here"]Text and stuff[/title][/cd]

Which makes:

Text and stuff

Of course, the height and width should match whatever the properties of your banner are. Padding makes the text move in towards the center of the banner.

awesome thank you very much ^^

Giga Universe · Feb 13, 2010

Is it possible to build something like this?
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_sprites_hover_nav
Apparently, it uses a gif animation, but I can't seem to port it to BB-Code, if it's possible at all.
Here is where I found the link:
http://www.w3schools.com/CSS/css_image_sprites.asp
It's called 'Image Sprites - Hover Effect'.

abnegation · Feb 14, 2010

Giga Universe said:
Is it possible to build something like this?
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_sprites_hover_nav
Apparently, it uses a gif animation, but I can't seem to port it to BB-Code, if it's possible at all.
Here is where I found the link:
http://www.w3schools.com/CSS/css_image_sprites.asp
It's called 'Image Sprites - Hover Effect'.

Not possible on a forum such as PC, requires a simple HTML script however, written to ensure that when you hover over certain linked images they will revert to another image such as you displayed.
"#home" activates a pre written HTML script within the initial head as does "#prev" "#navlist" etc.

If you want to see what exactly they activate click the spoiler

Spoiler:

--------------------------------------------------
Tips & Tricks #1

Want to make a "title tag" without the dots underneath? Insert this code inside!

HTML:

[title=Example up][cd=text-decoration:none;]Example normal[/cd][/title]

To get

Example normal

Note:
Also works with images etc.

.Gamer · Feb 16, 2010

K, so I have the title things around my signature, but I want to get them in. My question is, how?

Please and thank you. Or, if its harder to do titles inside the signature, how can I put text in there without redoing the picture and adding another textbox.

abnegation · Feb 16, 2010

In other words you want a background image to put text on.
Well there's a number of tutorials you could have just read -_-
Seems you're just asking for someone to do it for you rather than actually learning it yourself. In any case it's simple.

Stick your text in here as you would normally.

HTML:

[cd="background-image:url('http://www.pokecommunity.com/signaturepics/sigpic186143_10.gif');background-repeat:no-repeat; height:152px;width:352px;padding:10px;"]
Stick your text in here as you would normally.
[/cd]

I'm sure you can manage the rest with ease.

Tyrantrum · Feb 17, 2010

~~The link under "Tips & Tricks" isn't working. Which post does that link take you to?~~

Never mind that, but I have a question.

I've seen people with text placed right to left, while still being centered. An example is Lightning's signature. How do you do this?

I don't think it has anything to do with indenting it, either, because if you indented each line individually, there would be a space in between each line.

Also, sorry if I'm not being very clear on what I'm trying to ask.

abnegation · Feb 18, 2010

Eeveon said:
~~The link under "Tips & Tricks" isn't working. Which post does that link take you to?~~

Never mind that, but I have a question.

I've seen people with text placed right to left, while still being centered. An example is Lightning's signature. How do you do this?

I don't think it has anything to do with indenting it, either, because if you indented each line individually, there would be a space in between each line.

Also, sorry if I'm not being very clear on what I'm trying to ask.

There hasn't been any CSS involved to align the text persay. She's just aligned the text "right" with BB code. However there is CSS at the beginning, she uses: width: 400px; and that sets the maximum width of the entire sig therefore aligning the text to the right would only go a certain distance.

Alternitively, you could just use padding with your text to make it go further to the right like Lightning does.

Here's an example.

This is normal text without CSS

This is text wrapped with CSS, just using padding

See how it works?

Tyrantrum · Feb 20, 2010

Yes, I understand now. Thank you. :D

abnegation · Mar 1, 2010

CSS Tutoring

Introduction to CSS tutoring:

So, there's plenty people who learn better when they have someone to show them the ropes, rather than just mindlessly studying tutorials. So, I've come up with the idea of CSS Tutoring, this meaning that Tutors will offer to help those who want to learn CSS by taking on a certain number of Students. How you will teach the person is up to the teacher and the student.
So without further ado, I shall reveal the forms for those who wish to sign up. Feed back is welcome.

Application Forms:

Tutors

Those who wish to pass on their skills

CSS Knowledge: Intermediate or Advanced
How Many Students You Are Willing To Take On: 1-?

Preffered Teaching Method:MSN/AIM/VM's etc.
Time Zone: GMT+?
Name/Nickname/What we can call you:

Note: Lessons will work best in 1 on 1 tuitions.

Students

Those who are eager to learn

CSS Knowledge: None, Beginner or Advanced

Preffered Teaching Method:MSN/AIM/VM's etc.
Why you want to learn/how much you wish to know:
Time Zone: GMT+?
Name/Nickname/What we can call you:

Note: Lessons will work best in 1 on 1 tuitions.

Signed Up Tutors & Students

Tutors

Abnegation

Spoiler:

Jordan

Spoiler:

Serene Grace

Spoiler:

solovino

Spoiler:

Faltzer

Spoiler:

Students

Eeveon

Spoiler:

donavannj

Spoiler:

Fuyuhiko

Spoiler:

WonderGirl

Spoiler:

Gerri Shin

Spoiler:

Jesus oƒ Suburbia

Spoiler:

~Hot n' Cold~

Spoiler:

CSS Help & Resources

More options

Spherical Ice

Gary the Magic Fairy

Banned

Spherical Ice

jigglyppuff8

⑧

Gary the Magic Fairy

Banned

.little monster

Rukario

Banned

jigglyppuff8

⑧

abnegation

Uecil

[img]https://i.ibb.co/4jfYrCT/tHdpHUB.png[/img]

Jordan

Uecil

[img]https://i.ibb.co/4jfYrCT/tHdpHUB.png[/img]

Giga Universe

Working on a tool.

abnegation

.Gamer

»»───knee─►

abnegation

Tyrantrum

abnegation

Tyrantrum

abnegation

CSS Tutoring

Signed Up Tutors & Students