• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Forum moderator applications are now open! Click here for details.
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

CSS Help & Resources

5,256
Posts
16
Years
I've been doing some CSS emulation, so to speak.

Spoiler:

Spoiler:


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

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.
 
2,799
Posts
18
Years
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:
vqhaw7.png
2dakgts.png
1q00vb.png
2ezrabk.png

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.
 
4,294
Posts
14
Years
  • Age 31
  • Ohio
  • Seen Jun 6, 2017
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

Banned
7,597
Posts
21
Years
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.

ok i have to quote this first.... try this:
Spoiler:
adjusted the bottom txt thing's position by 30 px ie.. top: 212px;
 
2,319
Posts
16
Years
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.
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
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.



36041ac.gif


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

[img]https://i.ibb.co/4jfYrCT/tHdpHUB.png[/img]
2,568
Posts
14
Years
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??
 
2,956
Posts
18
Years
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:

Bannette.png

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.
 
Last edited:

Uecil

[img]https://i.ibb.co/4jfYrCT/tHdpHUB.png[/img]
2,568
Posts
14
Years
You don't need CSS for that if I think this is what you meant:

Bannette.png

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 ^^
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
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

»»───knee─►
1,523
Posts
14
Years
  • Age 32
  • NSFW
  • Seen Jun 18, 2019
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.
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
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.
 
5,814
Posts
16
Years
  • Age 30
  • Seen May 19, 2021
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.
 
Last edited:
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
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?
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023

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:



 
Last edited:
Back
Top