The PokéCommunity Forums  

Go Back   The PokéCommunity Forums > Entertainment & Hobbies > Computers & Technology
Sign Up Rules/FAQ Live Battle Blogs Mark Forums Read

Notices

Computers & Technology The place to go for all things tech and internet. Share a funny YouTube video or meme, discover the latest useful apps, or just get some free tech support.

Reply
Click here to go to the first staff post in this thread.  
Thread Tools
  #1    
Old November 16th, 2009, 05:38 PM
stranger's Avatar
stranger
lost in las vegas
Community Supporter
 
Join Date: Apr 2009
Age: 21

What this thread if 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.

Guidelines



  • Usual Webmaster Discussion'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);




__________________



every moment with you is an adventure

Last edited by Tsutarja; April 6th, 2014 at 06:34 AM.
Reply With Quote
  #2    
Old November 16th, 2009, 05:43 PM
Zet's Avatar
Zet
Community Supporter
 
Join Date: Sep 2007
Location: Brisbane, Australia
Age: 24
Gender: Male
Nature: Jolly
*stickies*

This thread shall be helpful to everyone who needs help.
Reply With Quote
  #3    
Old November 16th, 2009, 05:43 PM
Venusaur♣'s Avatar
Venusaur♣
Omoshiroku-nai
Community Supporter
 
Join Date: Jul 2009
Age: 19
Gender: Female
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/showpos...ostcount=47130
__________________
Reply With Quote
  #4    
Old November 16th, 2009, 05:47 PM
stranger's Avatar
stranger
lost in las vegas
Community Supporter
 
Join Date: Apr 2009
Age: 21
Quote:
Originally Posted by Charizard★ View Post
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/showpos...ostcount=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?
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
__________________



every moment with you is an adventure
Reply With Quote
  #5    
Old November 16th, 2009, 05:48 PM
Venusaur♣'s Avatar
Venusaur♣
Omoshiroku-nai
Community Supporter
 
Join Date: Jul 2009
Age: 19
Gender: Female
Quote:
Originally Posted by Abnegation View Post


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.
__________________
Reply With Quote
  #6    
Old November 16th, 2009, 05:50 PM
Zet's Avatar
Zet
Community Supporter
 
Join Date: Sep 2007
Location: Brisbane, Australia
Age: 24
Gender: Male
Nature: Jolly
Quote:
Originally Posted by Charizard★ View Post
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/showpos...ostcount=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
Reply With Quote
  #7    
Old November 16th, 2009, 05:53 PM
Jordan's Avatar
Jordan
[:: Love Is War ★]
 
Join Date: Jun 2005
Location: Désordre, Empire of Canada
Gender: Male
Send a message via Windows Live Messenger to Jordan
Quote:
Originally Posted by Charizard★ View Post
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.
__________________
Formspring
MyAnimeList
Spring Breeze
Reply With Quote
  #8    
Old November 16th, 2009, 05:54 PM
stranger's Avatar
stranger
lost in las vegas
Community Supporter
 
Join Date: Apr 2009
Age: 21
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
__________________



every moment with you is an adventure

Last edited by stranger; November 16th, 2009 at 06:07 PM.
Reply With Quote
  #9    
Old November 16th, 2009, 06:19 PM
xxkaylabby's Avatar
xxkaylabby
cake the cat
Community Supporter
 
Join Date: Apr 2009
Location: somewhere ;]
Gender: Female
Nature: Sassy
ohh nice thread.
i'm sure i'll be checking back to ask for help and to make suggestions (=
__________________




|Theme|
|My Gallery|
|Friend Code|
|Trade Thread|







Reply With Quote
  #10    
Old November 16th, 2009, 06:29 PM
Vampire://Krimm's Avatar
Vampire://Krimm
→ clocks everywhere →
Community Supporter
 
Join Date: Jul 2006
Location: Something Witty
Nature: Calm
Send a message via Windows Live Messenger to 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.
Reply With Quote
  #11    
Old November 16th, 2009, 06:31 PM
donavannj's Avatar
donavannj
The Melody Pokémon
 
Join Date: Mar 2005
Location: Minny, Minny, USA
Age: 24
Quote:
Originally Posted by Vampire://Krimm View Post
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.
__________________
Reply With Quote
  #12    
Old November 16th, 2009, 06:36 PM
Jordan's Avatar
Jordan
[:: Love Is War ★]
 
Join Date: Jun 2005
Location: Désordre, Empire of Canada
Gender: Male
Send a message via Windows Live Messenger to Jordan
Quote:
Originally Posted by Vampire://Krimm View Post
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.
__________________
Formspring
MyAnimeList
Spring Breeze

Last edited by Jordan; November 16th, 2009 at 06:48 PM.
Reply With Quote
  #13    
Old November 16th, 2009, 06:45 PM
Vampire://Krimm's Avatar
Vampire://Krimm
→ clocks everywhere →
Community Supporter
 
Join Date: Jul 2006
Location: Something Witty
Nature: Calm
Send a message via Windows Live Messenger to 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~
Reply With Quote
  #14    
Old November 16th, 2009, 09:14 PM
Gary, the Magic Fairy's Avatar
Gary, the Magic Fairy
Booted out - don't be like me!
 
Join Date: Feb 2006
Location: Your Mother
Age: 22
Gender: Male
Nature: Naughty
Quote:
Originally Posted by Charizard★ View Post
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/showpos...ostcount=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.

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.


Code:
[cd="background:black;color:white;width:100%;padding:20px"][CENTER]Some text can go here.
[IMG]http://i36.tinypic.com/11haz2p.png[/IMG]
More text/links here, etc.[/CENTER][/cd]
[cd="background:black;color:white;width:100%;padding:20px"][CENTER]Some text can go here.
[IMG]http://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('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. >___<
Reply With Quote
  #15    
Old November 17th, 2009, 08:03 AM
stranger's Avatar
stranger
lost in las vegas
Community Supporter
 
Join Date: Apr 2009
Age: 21
[FONT=Georgia]
Quote:
Originally Posted by Vampire://Krimm View Post
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
[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.
Quote:
Originally Posted by Gary, the Magic Fairy View Post
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.
__________________



every moment with you is an adventure

Last edited by stranger; November 17th, 2009 at 08:09 AM.
Reply With Quote
  #16    
Old November 17th, 2009, 11:01 AM
Gary, the Magic Fairy's Avatar
Gary, the Magic Fairy
Booted out - don't be like me!
 
Join Date: Feb 2006
Location: Your Mother
Age: 22
Gender: Male
Nature: Naughty
Quote:
Originally Posted by Abnegation View Post
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]

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 Code:
<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]
Reply With Quote
  #17    
Old November 17th, 2009, 11:06 AM
THIRTY-SIX's Avatar
THIRTY-SIX
Booted out - don't be like me!
 
Join Date: Oct 2004
http://www.pat-burt.com/web-developm...-a-new-window/

Would you please make that bbcode friendly?
Reply With Quote
  #18    
Old November 17th, 2009, 11:11 AM
Serene Grace's Avatar
Serene Grace
ニャース
 
Join Date: Apr 2009
Location: United Kingdom
Age: 20
Gender: Male
Nature: Relaxed
Quote:
Originally Posted by ahahahahahahahaha View Post
http://www.pat-burt.com/web-developm...-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.
__________________
Twitter [x], Icon Credit [x]
Reply With Quote
  #19    
Old November 17th, 2009, 11:12 AM
Gary, the Magic Fairy's Avatar
Gary, the Magic Fairy
Booted out - don't be like me!
 
Join Date: Feb 2006
Location: Your Mother
Age: 22
Gender: Male
Nature: Naughty
Quote:
Originally Posted by ahahahahahahahaha View Post
http://www.pat-burt.com/web-developm...-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.
Reply With Quote
  #20    
Old November 17th, 2009, 11:16 AM
stranger's Avatar
stranger
lost in las vegas
Community Supporter
 
Join Date: Apr 2009
Age: 21
Quote:
Originally Posted by Gary, the Magic Fairy View Post
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 Code:
<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.

Quote:
Originally Posted by ahahahahahahahaha View Post
http://www.pat-burt.com/web-developm...-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.
__________________



every moment with you is an adventure
Reply With Quote
  #21    
Old November 17th, 2009, 11:22 AM
THIRTY-SIX's Avatar
THIRTY-SIX
Booted out - don't be like me!
 
Join Date: Oct 2004
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...
Reply With Quote
  #22    
Old November 17th, 2009, 11:30 AM
Spherical Ice's Avatar
Spherical Ice
 
Join Date: Nov 2007
Location: UK
Send a message via Skype™ to Spherical Ice
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. ^.^
__________________
Reply With Quote
  #23    
Old November 17th, 2009, 11:48 AM
stranger's Avatar
stranger
lost in las vegas
Community Supporter
 
Join Date: Apr 2009
Age: 21
Quote:
Originally Posted by Spherical Ice View Post
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 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 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.
__________________



every moment with you is an adventure

Last edited by stranger; November 17th, 2009 at 11:57 AM.
Reply With Quote
  #24    
Old November 17th, 2009, 11:53 AM
Spherical Ice's Avatar
Spherical Ice
 
Join Date: Nov 2007
Location: UK
Send a message via Skype™ to Spherical Ice
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!
__________________

Last edited by Spherical Ice; November 17th, 2009 at 12:15 PM.
Reply With Quote
  #25    
Old November 17th, 2009, 12:22 PM
stranger's Avatar
stranger
lost in las vegas
Community Supporter
 
Join Date: Apr 2009
Age: 21
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
Spoiler:
ID links are for specific thread areas. So if I could give an example using this, the celebrity claim thread, it uses ID link tags, when you click the letters it jumps to a certain area in a thread. I've seen you use them in bB actually.

So let me show you how it's done.

Say I want to link to the top of this post, I'll put ID link tags in.

So basically what you need to do is:

[a id]This must match[/a id]




[alink id=This must match]Click this to jump[/alink id]

And that becomes

Click this to jump below




To here


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.
__________________



every moment with you is an adventure
Reply With Quote
Reply
Quick Reply

Sponsored Links
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Minimum Characters Per Post: 25



All times are UTC -8. The time now is 10:28 PM.


Style by Nymphadora, artwork by Sa-Dui.
Like our Facebook Page Follow us on Twitter © 2002 - 2014 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2014 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.