- 175583 views
- 902 replies
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.
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
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('http://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 [url] tags around your link and be annoying.
- background-color: #FFFFFF;
This changes the colour of your background where you will be putting your images, text etc. on.
Text effect codes
text-decoration: line-through;
This is your example
text-decoration: underline;
This is your example
text-decoration: none;
This is your example
text-decoration: blink;
This is your example
Bunch Of Codes
background-color: (color name,hex);
background-image: url();
background-position: (any combo of top,bottom,center,right,left);
background-repeat: (repeat-x,repeat-y,no-repeat);
overflow: (visible,auto,hidden);
color: (color name,hex);
font-family: arial;
font-size: 12px;
font-weight: (normal,bold);
text-decoration: (none,underline,italic,strikethrough);
text-transform: (uppercase,lowercase,none);
letter-spacing: 1px;
word-spacing:4px;
line-height: 14px;
border-bottom-color: (color name,hex);
border-top-color: (color name,hex);
border-left-color: (color name,hex);
border-right-color: (color name,hex);
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-right-width: 4px;
position: (absolute,relative, static, fixed);
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
height: 200px;
max-height: 300px;
min-height: 100px;
width: 200px;
max-width: 300px;
min-width: 100px;
font-stretch: (normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded);
Age 33
Male
Brisbane, Australia
Seen September 29th, 2021
Posted May 16th, 2020
7,687
posts
15.7
Years
*stickies*
This thread shall be helpful to everyone who needs help.
This thread shall be helpful to everyone who needs help.
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:
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
How would you make a code of CSS like this? I tried like 5 times but I fail D:
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
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?
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
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?How would you make a code of CSS like this?
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
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
Age 33
Male
Brisbane, Australia
Seen September 29th, 2021
Posted May 16th, 2020
7,687
posts
15.7
Years
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:
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
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
How would you make a code of CSS like this? I tried like 5 times but I fail D:
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
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.
★ MyAnimeList
★ Spring Breeze
★ Spring Breeze
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
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
ohh nice thread.
i'm sure i'll be checking back to ask for help and to make suggestions (=
i'm sure i'll be checking back to ask for help and to make suggestions (=
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.
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.
Age 32
Male
'cause it get cold like Minnesota
Seen 3 Days Ago
Posted 1 Week Ago
22,514
posts
18.2
Years
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.
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.
whoops
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]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.
Which makes:
text to display
What Don said; it's actually BBCode. The above is an example on how to do it.
★ MyAnimeList
★ Spring Breeze
★ Spring Breeze
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~
Thanks a lot, I've been wondering for awhile how to do that~
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:
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
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.How would you make a code of CSS like this? I tried like 5 times but I fail D:
http://www.pokecommunity.com/showpost.php?p=5327257&postcount=47130
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('http://www.website.com/image.jpg')
Use the apostrophes, or untick the "Automatically parse links in text", or it will wrap [url] tags around your link and be annoying. This comes up way too often for me. >___<
[FONT=Georgia]
[css-span="border-bottom: 1px dotted; cursor: help;"]wordswords[/css-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.
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 likeThanks a lot, I've been wondering for awhile how to do that~
[css-span="border-bottom: 1px dotted; cursor: help;"]wordswords[/css-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('http://www.website.com/image.jpg')
Use the apostrophes, or untick the "Automatically parse links in text", or it will wrap [url] tags around your link and be annoying. This comes up way too often for me. >___<
I think I'll make up a list of codes such as this with a some explanation of what to do and how to use them, so your suggestion will be added. thanks Gary.
[/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('http://www.website.com/image.jpg')
Use the apostrophes, or untick the "Automatically parse links in text", or it will wrap [url] tags around your link and be annoying. This comes up way too often for me. >___<
The CSS code is something like
[css-span="border-bottom: 1px dotted; cursor: help;"]wordswords[/css-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][css-span="border-bottom: 1px dotted; cursor: help;"]wordswords[/css-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.
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>
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]
http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/
Would you please make that bbcode friendly?
Would you please make that bbcode friendly?
http://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.
Would you please make that bbcode friendly?
Friend Code: 2251-6505-9781
http://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.
Would you please make that bbcode friendly?
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
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 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>
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]
http://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.
Would you please make that bbcode friendly?
Fairy boy: Well done. You can read.
[jq]Basically this thread is for standard CSS coding issues, problems, questions and discussion.[/jq]
I wanted to have it publicly made.... and I know abnegation...
[jq]Basically this thread is for standard CSS coding issues, problems, questions and discussion.[/jq]
I wanted to have it publicly made.... and I know abnegation...
I have a question, and I'm pretty sure it belongs here:
How do I change link colour, decoration, etc. in my CSS?
Please and thank you. ^.^
I have a question, and I'm pretty sure it belongs here:
I have a few suggestions here, without using CSS you can change the colour of your links by simply highlighting the word, then choosing the colour from the drop down menu and whilst it is still highlighted use How do I change link colour, decoration, etc. in my CSS?
Please and thank you. ^.^
to link it. You can do this or you can do it from normal BB code, [URL][COLOR=""]Word[/COLOR][/URL] and that's the layout so that it does not go to the normal hyperlink colour of the current theme.As for decoration there are a few different codes
text-decoration: line-through;
This is your example
text-decoration: underline;
This is your example
text-decoration: none;
This is your example
text-decoration: blink;
This is your example
There are plenty more, just work with those and fiddle with the codes.
Oh, wait, I forgot to mention that it's for ID Links. The ones that use [alink id="Name"]Name[/alink id]. What'd it be then?
Oh, it stays the same. Nevermind.
Thanks!
Oh, it stays the same. Nevermind.
Thanks!
Assuming you already know what they are and how to do them I'll inform you, if you dont know how to do them, click the spoiler
All you need to do to change the colour is
[alink id=""][color="#666666"]Text[/color][/alink id]
Just put the color tag within the tags around the word.
Spoiler:
All you need to do to change the colour is
[alink id=""][color="#666666"]Text[/color][/alink id]
Just put the color tag within the tags around the word.