• 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?".
  • 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

  • 10,674
    Posts
    15
    Years
    • Seen Sep 29, 2024

    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:


    [PokeCommunity.com] CSS Help & Resources

    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.

    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]
     
    Last edited by a moderator:
    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
     


    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.
     
    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
     
    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
     
    Last edited:
    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.
     
    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.
     
    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.
     
    Last edited:
    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 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. >___<
     
    • Like
    Reactions: Sun
    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]
     
    Last edited:
    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

    PHP:
    <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]
     
    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

    PHP:
    <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.


    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.
     
    Back
    Top