CSS Help & Resources

[Abnegation]

What this thread is for?

Basically this thread is for standard CSS coding issues, problems, questions and discussion. While PC offers a watered down version of CSS as such, there is still a lot of things you can do. A quick example of CSS capabilities would be something like this:

This box has been created using CSS coding.

This thread is for simple questions regarding CSS and how to use it efficiently or if you are seeking some answers on coding issues. There has been threads made in the past looking for help with CSS. So instead of a member posting a new thread with a question regarding CSS issues, they can post here instead and get help from other members in the know.
Thread can be used for:

• Simple questions regarding signature, thread or post coding issues within PC.
• Asking for a code, for example "What is the code to display a background?"
• General discussion on what works best on PC and other discussion like the best universal codes used on different browsers.

Just use common sense really, anything regarding CSS on PC can go in here.

Notice Board
​

Past Topics


100% width signatures Ex.1
100% width signatures Ex. 2

Text Decoration

Anchor link explanation

Floating explanation

Fixed CSS at the top of a screen

Padding

Putting text on an image

Line height explanation
(Not in depth)

CSS Basics

Signature Resource Post

CSS Tutoring
No longer in service.

CSS Custom Cursors

Tips & Tricks

#1
​

Guidelines

• Usual Computers & Technology's rules apply
• This is not for requests. So please refrain from asking others to make your signature.
• Just keep things relaxed, there's no need for argument "my codes is better than yours!1"
• Don't know the answer to a question at hand? Let someone else answer.
• Respect other members and their answers, if you feel they might be wrong or they could have elaborated, kindly point it out and offer your suggestion.

List of tutorials and resources

External links

CSS Signature Templates + Guide | PPN Studio - Not my favourite tutorial but for basic CSS needs such as signatures is does the job just fine. If you're looking to eventually get into web site design or intermediate to advanced CSS it's not the best place to start. Basic needs.

CSS Tutorial at w3schools - Probably my more favoured choice, but it's all taught in Cascading Style Sheets where as PC has CSS as one block. If you're looking to get into web design or anything along those lines, there's probably not many better places to start. I would recommend learning the basics on the tutorial above then fine tune your skills with this one. More in depth, getting into web design.

CSS Tutorial at csstutorial.net - Quite in depth, not something you'd need to look at if you're just using CSS for PC, it gets into detail mainly on web design. Very descriptive, not needed for PC but good for learning purposes.

The PokéCommunity Forums - BB Code List - One of your best friends, make sure what you're looking for isn't already on this list before getting worried about having to learn CSS.

Downloads

FireFox- The best known browser for CSS and coding, almost everything works well with it as well as the fact that it's quite advanced browser. Highly recommended for any user.
Firebug - One of the most useful addons for FireFox I've downloaded. What this does is, basically lets you edit a web pages coding (not for good only for demonstration purposes) and see your edits right before your eyes as you type. It's a great way to see what way a web site is built up as well as check codes to see how things are done.

Something to donate to the list? Any suggestions? PM Myself or Zet
Additional Questions PM Me and I'd be happy to help.

Simple CSS Code List

- background:url('https://www.website.com/image.jpg')
This displays the background of an image. Use the apostrophes, or untick the "Automatically parse links in text", or it will wrap tags around your link and be annoy...Verdana] [/FONT][/div][FONT=Verdana] [/FONT]

 

[Zet]

*stickies*

This thread shall be helpful to everyone who needs help.

 

[Charizard★]

Ok, I suck at trying to make CSS. But can someone help me get the code to this CSS? And how to change the color, picture and text? Thanks

How would you make a code of CSS like this? I tried like 5 times but I fail D:

https://www.pokecommunity.com/posts/5327257/

 

[Abnegation]

Ok, I suck at trying to make CSS. But can someone help me get the code to this CSS? And how to change the color, picture and text? Thanks

How would you make a code of CSS like this?

https://www.pokecommunity.com/posts/5327257/

My best recommendation for you now would be to take a tutorial from the list above, the very first one, as you should learn the basics first rather than asking for a code direct you know?
It's not too hard, as I say learn the basics. It's a background colour at 100% with an image centered, not too hard, so it's all in the basics ;3

 

[Charizard★]

My best recommendation for you now would be to take a tutorial from the list above, the very first one, as you should learn the basics first rather than asking for a code direct you know?
It's not too hard, as I say learn the basics. It's a background colour at 100% with an image centered, not too hard, so it's all in the basics ;3

Yea lol, still I read that like 100 times before D: and it still hasn't helped me that much. I just know how to make small versions of it.

 

[Zet]

Ok, I suck at trying to make CSS. But can someone help me get the code to this CSS? And how to change the color, picture and text? Thanks

How would you make a code of CSS like this? I tried like 5 times but I fail D:

https://www.pokecommunity.com/posts/5327257/

can firebug find the coding? if not, 'right click > view page source' and look for the sig and you should be able to find the coding

 

[Jordan]

Yea lol, still I read that like 100 times before D: and it still hasn't helped me that much. I just know how to make small versions of it.

Set the width to 100% instead of a specific pixel length is the trick, I believe.

 

[Abnegation]

Well basically I've seen the coding with Firebug, and it's nothing too hard. So if you want the code ask Pokejungle as it's not mine nor Zet's place to give out someone else's code. It's always more fufilling to do it yourself, but at the moment, doing a whole code defeats the purpose of the thread.
But yes, it's to do with 100% width and then floating the image over. There's lots of ways tp do it, just set the width to 100% rather than a certain amount of pixels and then the rest. Easy stuff :D

 

[Kotone]

ohh nice thread.
i'm sure i'll be checking back to ask for help and to make suggestions (=

 

[Vampire://Krimm]

Awesome idea you guys :D I'm a total nub with CSS but basically I've been self-teaching for the past couple of months, and I feel I have the basics down.

However in posting here, I also have a question! The hover-over captions; what exactly do I need to add to make them show up? Is it a css-span or what? XD Sorry if it's a totally obvious question.

 

[donavannj]

Awesome idea you guys :D I'm a total nub with CSS but basically I've been self-teaching for the past couple of months, and I feel I have the basics down.

However in posting here, I also have a question! The hover-over captions; what exactly do I need to add to make them show up? Is it a css-span or what? XD Sorry if it's a totally obvious question.

Those are called "Title" tags. They're a VB feature.

 

[Jordan]

Awesome idea you guys :D I'm a total nub with CSS but basically I've been self-teaching for the past couple of months, and I feel I have the basics down.

However in posting here, I also have a question! The hover-over captions; what exactly do I need to add to make them show up? Is it a css-span or what? XD Sorry if it's a totally obvious question.

[title="text to hover"]text to display[/title]

Which makes:

text to display

What Don said; it's actually BBCode. The above is an example on how to do it.

 

[Vampire://Krimm]

I see, I see o-x" Didn't think of that xD"

Thanks a lot, I've been wondering for awhile how to do that~

 

[Gary the Magic Fairy]

Ok, I suck at trying to make CSS. But can someone help me get the code to this CSS? And how to change the color, picture and text? Thanks

How would you make a code of CSS like this? I tried like 5 times but I fail D:

https://www.pokecommunity.com/posts/5327257/

This is a simple code similar to what my old signature was. That is, a box with the image and some text inside, with a repeating background.

Spoiler:

I will be putting this image on a black background, to give the illusion of it all being a single image:

Some text can go here.

More text/links here, etc.​

[PLAIN][cd="background:black;color:white;width:100%;padding:20px"][CENTER]Some text can go here.
[IMG]https://i36.tinypic.com/11haz2p.png[/IMG]
More text/links here, etc.[/CENTER][/cd][/PLAIN]

[cd="background:black;color:white;width:100%;padding:20px"][CENTER]Some text can go here.
[IMG]https://i36.tinypic.com/11haz2p.png[/IMG]
More text/links here, etc.[/CENTER][/cd]

• This part is the background color. It's probably not good to get in the habit of using color names rather than codes such as #000000, but this is only for example purposes.
• color:_____ sets your font color. Black background, so white text would be the obvious choice. Again, you're probably better off using codes rather than words, but it works ok here.
• This is the part that sets the width. Percents let you give a size relative to the window, which is better for compatibility. It will fill up the space and look about the same, no matter if I'm viewing it on my tiny netbook screen, or my 32" TV. This only works well when your background is a tiled image that repeats infinitely, or is a solid color.
• Padding sets the space between the content and the edges of the box. If you leave it off, your text will start on the the very top edge and touch the bottom, which usually looks crappy.
• In this image, as you can see, I've made the edges the same color as the background. This usually works better as transparency, especially if the background is an image rather than a color.
• The rest, you can just do what you would normally do. Bold, italics, underline, strikeout, etc. Use the normal BB codes: [B][I][U][S], etc.

I really recommend you recreate this code rather than copy/paste and replace your desired images and colors. It's a better learning experience. XD

Oh, and another helpful tip I think should be added somewhere in the first post, because it's a huge pain when you're doing something image-heavy:

background:url('https://www.website.com/image.jpg')

Use the apostrophes, or untick the "Automatically parse links in text", or it will wrap tags around your link and be annoying. This comes up way too often for me. >___<

 

[Abnegation]

I see, I see o-x" Didn't think of that xD"

Thanks a lot, I've been wondering for awhile how to do that~

The CSS code is something like
[span="border-bottom: 1px dotted; cursor: help;"]wordswords[/span]
Wordswords
However I'm not so sure about how the box pops up, dont think it can be done with normal CSS in posts. But I degress, all you need is title tags as stated.

This is a simple code similar to what my old signature was. That is, a box with the image and some text inside, with a repeating background.

[/SPOILER]
Oh, and another helpful tip I think should be added somewhere in the first post, because it's a huge pain when you're doing something image-heavy:

background:url('https://www.website.com/image.jpg')

Use the apostrophes, or untick the "Automatically parse links in text", or it will wrap tags around your link and be annoy...suggestion will be added. thanks Gary.[/FONT]

 

[Gary the Magic Fairy]

The CSS code is something like
[span="border-bottom: 1px dotted; cursor: help;"]wordswords[/span]
Wordswords
However I'm not so sure about how the box pops up, dont think it can be done with normal CSS in posts. But I degress, all you need is title tags as stated.

Blank title tags work as well, if you just want text underlined that way. You just need to put [title=""] and not just [title]

I don't believe the pop-up text can be replicated with css-span/div tags. span automatically puts title="whatever" inside of style="whatever", so it doesn't work the same.

testing
testing

<span title="test" style="border-bottom: 1px dotted; cursor: help;">testing</span>
<span style="title:'test';border-bottom: 1px dotted; cursor: help;">testing</span>

So, the title tag automatically fills in the title="whatever" part with the text you put in the quotes, and fills in the rest automatically with the dotted line & cursor. css-span tags put everything in the style="whatever" part.

Oh well, title tags are easier anyways. Though being able to have text show when you move your mouse over an image, without having that dotted line would be nice.

[EDIT] lol, I just noticed this. [ntitle="I wonder how long this has existed. I look at the BB code list all the time and I've never noticed this."]Testing.[/ntitle]

 

[THIRTY-SIX]

https://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/

Would you please make that bbcode friendly?

 

[Serene Grace]

https://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/

Would you please make that bbcode friendly?

You'll probably have to ask Audy. It seems that he'll need to add a new div BBcode for this certain code.

 

[Gary the Magic Fairy]

https://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/

Would you please make that bbcode friendly?

Pretty sure that can't be used here. It says right there in the description that it's javascript and CSS.

 

[Abnegation]

Blank title tags work as well, if you just want text underlined that way. You just need to put [title=""] and not just [title]

I don't believe the pop-up text can be replicated with css-span/div tags. span automatically puts title="whatever" inside of style="whatever", so it doesn't work the same.

testing
testing

<span title="test" style="border-bottom: 1px dotted; cursor: help;">testing</span>
<span style="title:'test';border-bottom: 1px dotted; cursor: help;">testing</span>

So, the title tag automatically fills in the title="whatever" part with the text you put in the quotes, and fills in the rest automatically with the dotted line & cursor. css-span tags put everything in the style="whatever" part.

Oh well, title tags are easier anyways. Though being able to have text show when you move your mouse over an image, without having that dotted line would be nice.

[EDIT] lol, I just noticed this. [ntitle="I wonder how long this has existed. I look at the BB code list all the time and I've never noticed this."]Testing.[/ntitle]

Yeah I see what you mean, but there's no real need to know how to do it anyhow, seeing as in the title tags do it for you. I did check the source code at one point to check and it had what you mentioned.

https://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/

Would you please make that bbcode friendly?

I've tested that but as PC has a watered down version of CSS it cant be used, we're limited to certain things as you well know.