The PokéCommunity Forums

The PokéCommunity Forums (https://www.pokecommunity.com/index.php)
-   Internet & Technology (https://www.pokecommunity.com/forumdisplay.php?f=57)
-   -   CSS Help & Resources (https://www.pokecommunity.com/showthread.php?t=200899)

seeker November 16th, 2009 5:38 PM

CSS Help & Resources
 

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.

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);





Zet November 16th, 2009 5:43 PM

*stickies*

This thread shall be helpful to everyone who needs help.

Charizard★ November 16th, 2009 5:43 PM

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

seeker November 16th, 2009 5:47 PM

Quote:

Originally Posted by Charizard★ (Post 5327346)
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?
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★ November 16th, 2009 5:48 PM

Quote:

Originally Posted by Abnegation (Post 5327369)


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 November 16th, 2009 5:50 PM

Quote:

Originally Posted by Charizard★ (Post 5327346)
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

Jordan November 16th, 2009 5:53 PM

Quote:

Originally Posted by Charizard★ (Post 5327372)
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.

seeker November 16th, 2009 5:54 PM

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 November 16th, 2009 6:19 PM

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

Vampire://Krimm November 16th, 2009 6:29 PM

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 November 16th, 2009 6:31 PM

Quote:

Originally Posted by Vampire://Krimm (Post 5327516)
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 November 16th, 2009 6:36 PM

Quote:

Originally Posted by Vampire://Krimm (Post 5327516)
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 November 16th, 2009 6:45 PM

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 November 16th, 2009 9:14 PM

Quote:

Originally Posted by Charizard★ (Post 5327346)
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.

Spoiler:
I will be putting this image on a black background, to give the illusion of it all being a single image:
http://i36.*.com/11haz2p.png

Some text can go here.
http://i36.*.com/11haz2p.png
More text/links here, etc.


Code:

[cd="background:black;color:white;width:100%;padding:20px"][CENTER]Some text can go here.
[IMG]http://i36.*.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.*.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. >___<

seeker November 17th, 2009 8:03 AM

[FONT=Georgia]
Quote:

Originally Posted by Vampire://Krimm (Post 5327584)
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 (Post 5327991)
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.

Gary, the Magic Fairy November 17th, 2009 11:01 AM

Quote:

Originally Posted by Abnegation (Post 5328549)
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]

THIRTY-SIX November 17th, 2009 11:06 AM

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?

Serene Grace November 17th, 2009 11:11 AM

Quote:

Originally Posted by ahahahahahahahaha (Post 5328855)

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 November 17th, 2009 11:12 AM

Quote:

Originally Posted by ahahahahahahahaha (Post 5328855)

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

seeker November 17th, 2009 11:16 AM

Quote:

Originally Posted by Gary, the Magic Fairy (Post 5328848)
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 (Post 5328855)

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.

THIRTY-SIX November 17th, 2009 11:22 AM

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

Spherical Ice November 17th, 2009 11:30 AM

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

seeker November 17th, 2009 11:48 AM

Quote:

Originally Posted by Spherical Ice (Post 5328914)
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 http://www.pokecommunity.com/images/editor/createlink.gif 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.

Spherical Ice November 17th, 2009 11:53 AM

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!

seeker November 17th, 2009 12:22 PM

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.

Spherical Ice November 17th, 2009 12:44 PM

One more question:

How would I go about making something stay at the side of the page while I scroll down, but disappear at the end of my post.

This is kind of hard to word.

Basically, if we have a post:

START OF CSS
a>>>>>b
a>>>>>b
a>>>>>b
x
x
x
END OF CSS


Who would I make it that when I'm scrolling down and reach X b is still in the same position that it was in when I was viewing a, but when the CSS ends, so does b?

Hard to explain. -.-

seeker November 17th, 2009 12:59 PM



That is called float. At least I believe that is what you are looking for.
So If you wanted to float an image to the right while text goes around it you would use [css-div="Float:right;"] then post the image[/css-div]

So like this:

Spoiler:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text



Something like that?
If not, show me an example and I'll help what way I can.

THIRTY-SIX November 17th, 2009 1:05 PM

He's talking about position:absolute;
Kinda like with Counterfeit's showcase.

seeker November 17th, 2009 1:11 PM

Ah, my mistake. Thanks Munna, well as stated it's using image;absolute. Though it isn't allowed in some sections a code template is this:

[css-div="position: absolute; top: 0; left: 0; text-align: center; height: 25px; width: 100%;background-color: #000000;"][COLOR=White]Text here[/COLOR][/css-div]

Gary, the Magic Fairy November 17th, 2009 1:13 PM

But wait...

"Who would I make it that when I'm scrolling down and reach X b is still in the same position that it was in when I was viewing a, but when the CSS ends, so does b?"

Does it stop whenever the css-div ends?

THIRTY-SIX November 17th, 2009 1:17 PM

Nope it doesn't. Needs java element, I believe.

Syrex November 17th, 2009 2:23 PM

I'm currently workin' on my signature, and I'm curious to as if how I can use spacing with css?

I'm tryin' to add the Facebook Icon and the LJ icon but It'll align all the way to the left again the edge of the image. How can I space it over to the right more so it isn't right against the edge?
I want it on the left side but not all the way against the edge of the image.

seeker November 17th, 2009 2:44 PM

Have you tried using padding?
Padding is really hady for placement of things such as text and images.
[css-div="padding-left:50px;"]Your icon[/css-div]

Your icon


Se the way my text has been pushed out a little? use padding to align your images whatever way you want. Padding works with padding-left, padding-right, padding-top, padding-bottom and any combonation by saying for example padding-top left

Syrex November 17th, 2009 2:45 PM

Ah, That will do the trick!
Thanks so much ^_^

Edit:
Just have to locate the Facebook Icon and the LiveJournal icon -_-

Charizard★ November 17th, 2009 3:06 PM

I've been messing around with the CSS but can't make the height visible. I tried using this:

---Signature Here---


HTML Code:

[css-div="width: 100%px; height: 100px;"][css-div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div][/css-div]


But I can't make it heighten more Can someone please help me which part to put into the code so I can fix it?

Syrex November 17th, 2009 3:11 PM

Take out the "%" symbols on width.

Mm. Syrex is boss

Jordan November 17th, 2009 3:12 PM

Quote:

Originally Posted by Charizard★ (Post 5329679)
I've been messing around with the CSS but can't make the height visible. I tried using this:

---Signature Here---


HTML Code:

[css-div="width: 100%px; height: 100px;"][css-div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div][/css-div]


But I can't make it heighten more Can someone please help me which part to put into the code so I can fix it?

There's no need to make 2 separate CSS. This will suffice:
HTML Code:

[css-div="width: 100%px; height: 100px; padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div]


Which makes:
---Signature Here---

seeker November 17th, 2009 3:15 PM

Quote:

Originally Posted by Charizard★ (Post 5329679)
I've been messing around with the CSS but can't make the height visible. I tried using this:

---Signature Here---


HTML Code:

[css-div="width: 100%px; height: 100px;"][css-div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div][/css-div]


But I can't make it heighten more Can someone please help me which part to put into the code so I can fix it?


Try not to rip codes straight from the tutorials also. You'll learn nothing by doing that XD

Gary, the Magic Fairy November 17th, 2009 3:17 PM

Quote:

Originally Posted by Abnegation (Post 5329570)
Have you tried using padding?
Padding is really hady for placement of things such as text and images.
[css-div="padding-left:50px;"]Your icon[/css-div]

Your icon


Se the way my text has been pushed out a little? use padding to align your images whatever way you want. Padding works with padding-left, padding-right, padding-top, padding-bottom and any combonation by saying for example padding-top left

This can also be done with the shorthand property padding:____. If you want all 4 sides padded equally, you can do padding:10px, or to set each side, use 4 values, going clockwise.
Spoiler:

Example:
padding:20px 40px 60px 80px
20 would be for the top, 40 for the right side, 60 for the bottom, and 80 for the left.
Example:
padding:20px 40px 60px
if you only have 3, the middle value will be used for the sides, and the first & last will be used for the top & bottom, respectively.
Example:
padding:20px 40px
and with only two, the first sets the top & bottom, and the second sets the sides.


Also, @Charizard★: it's just 100%, not 100%px. Px is pixels. XD

Syrex November 17th, 2009 3:24 PM

Last question:

How about linking images?
This is an example of the code I used
HTML Code:

[URL="http://www.google.com/"][img]http://www.google.com/intl/en_ALL/images/logo.gif[/URL][/img]


But the image will not show up and it'll make all my pictures and text link to the said website.

Fix?

Jordan November 17th, 2009 3:26 PM

Quote:

Originally Posted by Syrex (Post 5329748)
Last question:

How about linking images?
This is an example of the code I used
HTML Code:

[URL="http://www.google.com/"][img][/B]http://www.google.com/intl/en_ALL/images/logo.gif[/URL][/img]


But the image will not show up and it'll make all my pictures and text link to the said website.

Fix?

Place the [/url] after the [/img]. This is BBCode too, by the way.


Edit: I think you didn't upload the picture correctly. Try Photobucket or imageshack, then copy + paste the [img] tag they gave you.

THIRTY-SIX November 17th, 2009 3:27 PM

It should be [/img][/url]. No css involved. oo

The [/b] is the problem

Syrex November 17th, 2009 3:30 PM

oops -_-
My bad on that one. I knew it wasn't css but I ended up posting it here anyway.
Sorry, sorry, sorry.

Charizard★ November 17th, 2009 3:32 PM

Quote:

Originally Posted by Abnegation (Post 5329719)



Try not to rip codes straight from the tutorials also. You'll learn nothing by doing that XD

Yea I'll try not to xD. Its just too hard and too complicated for me to do it on my own right not xD.

Syrex November 17th, 2009 3:46 PM

I just wanted to say Thanks to Abnegation and everyone else that helped me.

I finished coding my signature following this thread.
This was the outcome :) Check Signature, Of course.

seeker November 17th, 2009 3:52 PM

Quote:

Originally Posted by Charizard★ (Post 5329781)
Yea I'll try not to xD. Its just too hard and too complicated for me to do it on my own right not xD.

It's not too hard, just code a lot and you learn them. Or make flash cards or something XD

Quote:

Originally Posted by Syrex (Post 5329844)
I just wanted to say Thanks to Abnegation and everyone else that helped me.

I finished coding my signature following this thread.
This was the outcome :) Check Signature, Of course.

You're welcome, looks very good I do admit!

cyan. November 19th, 2009 4:29 PM

Does anyone know how to make text go on the image?
Like your signature, Abnegation

seeker November 19th, 2009 4:35 PM

Quote:

Originally Posted by Sinnoh Champ Cynthia. (Post 5334732)
Does anyone know how to make text go on the image?
Like your signature, Abnegation

Yes, it is in the tutorials. Anyhow, the code.

[css-div="background-image:url('www.urlhere.com');width: px; height: px;"]
Text etc here
[/css-div]

If that doesn't make sense have a read of this tut.
CSS Signature Templates + Guide | PPN Studio

cyan. November 21st, 2009 7:32 AM

Thanks ^^

Just wondering to more things:

1) How do you get the crosshair cursor when someone goes over your signature?

2) How do you add a music player on your signature?


Sorry I'm asking so much.:nervous:


seeker November 21st, 2009 7:38 AM


Quote:

1) How do you get the crosshair cursor when someone goes over your signature?
cursor:crosshair;
Put it in the code.

Quote:

2) How do you add a music player on your signature?
With sound tags.

[sound"Song title here/words"]song url here[/sound]

No problem.

Jordan November 21st, 2009 7:39 AM

Quote:

Originally Posted by Sinnoh Champ Cynthia. (Post 5338381)

Thanks ^^

Just wondering to more things:

1) How do you get the crosshair cursor when someone goes over your signature?

2) How do you add a music player on your signature?


Sorry I'm asking so much.:nervous:


Crosshair (last code):

[css-div=" width: 100px; height: 100px; background-color: white; cursor: crosshair"][/css-div]


Music player:

Link.

Edit: Curse you, Gavin xD;

cyan. November 21st, 2009 7:41 AM

Lol.

Thanks to both of you, rep given ^^.


_Dean_ November 23rd, 2009 9:29 PM

Hey, maybe somebody here can help me! :D
I need to add a some texts in a link into my banner, here's the code.
Code:

Give until there's nothing left...

I'd like to add a link in the next break, then one more break for some more text, and that's all. So three lines total. I just can't figure out how to add breaks and a link into it all. D:

THIRTY-SIX November 24th, 2009 12:47 AM

[css-div=color: red; cursor: crosshair; background-image:url("http://img689.imageshack.us/img689/8531/1259014078232z.jpg");width:320px; height: 241px; font-size: 11px; text-align: left;]Give until there is nothing left...
[url=http://www.pokecommunity.com/showthread.php?t=201075]I've seen the future and I need to stop it.[/url]
This would be the third line.[/css-div]

You needed quotes in the background image.

Give until there is nothing left...
I've seen the future and I need to stop it.
This would be the third line.


Of course put color tags inside the link tags to change colour.

Jordan November 30th, 2009 5:24 PM

Blech, can someone explain to me how to form the line-height CSS in BBCode? xD;

~Teh Panda~ December 1st, 2009 12:06 AM

Ugh I wrote up a mini basics thingy...

CSS Document
CSS = Cascading style sheet

Example of CSS


This is a crappy CSS example :)



Why is CSS used?

To enhance a posts design.

What is its format?

It is used as a BBCode. Here is the code for that 'crappy example'

HTML Code:

[css-div=" background-color: lightgrey; border-color: grey; border-style:solid;"]
[CENTER]This is a crappy CSS example :)[/CENTER]
[/css-div]


Disregard the text which you see in the css and focus on the coding.

__________________________________________________________________________________________

Ok so now you now what a basic CSS code looks like I will present to you the basic code which is needed.
[css-div], from here you can almost code any design into it. I myself have even only touched the surface of some of these commands.

The most basics are parameter commands.
Believe it or not this is in CSS now, what you are reading is a simple width parameter edit, I chose 180px.

Height would just edit how much height the CSS takes up regardlss of how much text you have. It is advised not to use the height parameter when doing complex CSS designs.

More on usage...
Since our main code is [css-div], we must add things to it to make it stylized. Just using this BBCode will not do anything. Here is a table of some basic commands.
Code:

Width - explained above.
Height - explained above
Border-style - solid, etc. (solid is preferred)
Border-color - in hexadecimal place the color.
Border-width - in pixels how wide you want your border.
Background-color - in hexadecimal place the color.
background-image:url(" ") - then place the url in quotes.
for more look through more CSS code...


Finally here is how you put the codes in the CSS-Div.

After you place the main [css-div], change it to [css-div=" "].
Now in the quotes you will add your parameters of CSS.
Here try to make your first CSS with a 400px wide, 2px black border, and white background.
So place your CSS-Div, now add the new parameters.

Here is the code you should have gotten, or something like it...

HTML Code:

[css-div="background-color: #FFFFFF; width: 400px; Border-color: #000000; border-width: 2px; Border-style:Solid;"][/css-div]


Yep, should be like this.


Basics tutorial over :)

THIRTY-SIX December 1st, 2009 6:08 AM

Quote:

Originally Posted by Jordan (Post 5364114)
Blech, can someone explain to me how to form the line-height CSS in BBCode? xD;

It's best if you leave line height as normal... especially if you are just going to leave the text the way yours is set and not do it typographical. It just seems as if you have an extra break and two div/span tags for each line, which is unnecessary. If you want an extra space like that without two tags line-height:200%;

Oh wait... you are using span and div wrong there me thinks.

Jordan December 1st, 2009 1:15 PM

Quote:

Originally Posted by ahahahahahahahaha (Post 5364939)
It's best if you leave line height as normal... especially if you are just going to leave the text the way yours is set and not do it typographical. It just seems as if you have an extra break and two div/span tags for each line, which is unnecessary. If you want an extra space like that without two tags line-height:200%;

Oh wait... you are using span and div wrong there me thinks.

I just wanted the space between the two lines to not be so far apart. I got it to work, though. Thanks!

ShinjisLover December 3rd, 2009 12:30 AM

Excuse me, but I need help regarding this post, please. =3

Morkula December 7th, 2009 5:08 PM

Going to shoot this over to Webmasters Discussion where it belonged to begin with~
*Moved*

Spherical Ice December 9th, 2009 9:43 AM

I've been doing some CSS emulation, so to speak.

Spoiler:
CSS:
Quote:
Originally Posted in vB Code.
Hi CSS.


vB Code:
Quote:

Originally Posted by Random Dude #2
Hi vB.



Spoiler:
CSS:
spoiler warning
The proceeding text contains a spoiler.
Plot and/or ending details follow containing information made in CSS.

Hi


vB Code:
[simple-spoil="Hi"]Hi[/simple-spoil]


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

Quote:

Originally Posted by ShinjisLover (Post 5369062)
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.

Gary, the Magic Fairy December 9th, 2009 10:32 AM

Quote:

Originally Posted by ShinjisLover (Post 5369062)
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:

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.

Spherical Ice December 9th, 2009 11:56 AM

@ Gary: Yeah, that was the problem; they only seem to go together vertically, not horizontally. :/

jigglyppuff8 December 9th, 2009 12:44 PM

Quote:

Originally Posted by Gary, the Magic Fairy (Post 5384264)
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.

display:inline property.

This is div 1
This is div 2

Gary, the Magic Fairy December 9th, 2009 1:14 PM

Quote:

Originally Posted by jigglyppuff8 (Post 5384436)
display:inline property.

This is div 1
This is div 2

Well crap. I wish I knew that a lot sooner.

Thanks. XD

.little monster December 22nd, 2009 12:25 PM

Spoiler:

We're gonna run, nothing can stop us!



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 December 22nd, 2009 12:53 PM

Quote:

Originally Posted by t.A.T.u (Post 5412812)
Spoiler:

We're gonna run, nothing can stop us!



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:

We're gonna run, nothing can stop us!


adjusted the bottom txt thing's position by 30 px ie.. top: 212px;

jigglyppuff8 December 22nd, 2009 12:56 PM

Quote:

Originally Posted by t.A.T.u (Post 5412812)
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:
We're gonna run, nothing can stop us!


The code looks less organized without the line breaks, but sacrifices. ;;
Hopefully, this is the result you wanted.

seeker December 30th, 2009 9:50 AM

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;
[cd=css here;]
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:

And here we have text
http://ds.rothion.com/images/dp/houndoom-f.png
and here we have an image


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][css-div=text-decoration:none;]Hover Over Me[/css-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.



http://cbimg6.com/layouts/09/12/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 [cd=float:right;] 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 January 23rd, 2010 11:08 AM

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??

Jordan January 23rd, 2010 11:15 AM

Quote:

Originally Posted by sspokemon (Post 5494300)
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:

http://i20.photobucket.com/albums/b232/Birdmandata/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.

Uecil January 23rd, 2010 12:42 PM

Quote:

Originally Posted by Miniryu (Post 5494307)
You don't need CSS for that if I think this is what you meant:

http://i20.photobucket.com/albums/b232/Birdmandata/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 ^^

Giga Universe February 13th, 2010 6:46 AM

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

seeker February 14th, 2010 8:22 AM

Quote:

Originally Posted by Giga Universe (Post 5547144)
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:

The "navlist" activates {position:relative;] - position is set to relative to allow absolute positioning inside it
#navlist li activates {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding is set to 0, list-style is removed, and all list items are absolute positioned
#navlist li, #navlist a activates{height:44px;display:block;} - the height of all the images are 44px
Next few will be split up for easier explanation
#home activates {left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px
#home activates {background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
#prev activates {left:63px;width:43px;} - Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px.
#prev activates {background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px line divider)
#next activates {left:129px;width:43px;}- Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px.
#next activates {background:url('img_navsprites.gif') no-repeat -91px 0;} - Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )



--------------------------------------------------

Tips & Tricks #1

Want to make a "title tag" without the dots underneath? Insert this code inside!
HTML Code:

[title=Example up][cd=text-decoration:none;]Example normal[/cd][/title]


To get

Example normal


Note:
Also works with images etc.

.Gamer February 16th, 2010 11:08 AM

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.

seeker February 16th, 2010 11:14 AM

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 Code:

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

Tyrantrum February 17th, 2010 6:17 PM

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.

seeker February 18th, 2010 4:13 AM

Quote:

Originally Posted by Eeveon (Post 5561305)
The link under &quot;Tips & Tricks&quot; 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 &quot;right&quot; 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?

Tyrantrum February 20th, 2010 1:52 PM

Yes, I understand now. Thank you. :D

seeker March 1st, 2010 9:19 AM

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:

CSS Knowlage: Advanced
How Many Students You Are Willing To Take On: 4
Preffered Teaching Method: MSN/VM's/PM's/Skype(occasionally)
Time Zone: GMT+0
Name/Nickname/What we can call you: Gavin shall do fine


Jordan
Spoiler:

CSS Knowledge: Intermediate
How Many Students You Are Willing To Take On: 1
Preffered Teaching Method: VMs/PMs
Time Zone: GMT-5 (Eastern Time Zone, US & Canada)
Name/Nickname/What we can call you: Jordan


Serene Grace
Spoiler:

CSS Knowledge: Intermediate
How Many Students You Are Willing To Take On: 1-3
Preffered Teaching Method: MSN, Skype & PM's
Time Zone: GMT+0
Name/Nickname/What we can call you: Serene Grace


solovino
Spoiler:

CSS Knowledge: 3/5ths between Intermediate and Advanced; including CSS3 recommendations & drafts.
How Many Students You Are Willing To Take On: 1
Preferred Teaching Method: VMs and PMs, can work out to e-mail from there
Time Zone: GMT-4 DST
Name/Nickname/What we can call you: Solovino


Faltzer
Spoiler:

CSS Knowledge: Intermediate/Advanced
How Many Students You Are Willing To Take On: 5
Preferred Teaching Method: Instant Messaging works best, but I'm very flexible. AIM, MSN, Yahoo, ICQ, Skype
Time Zone: GMT -5
Name/Nickname/What we can call you: Faltzer/Polly




Students


Eeveon
Spoiler:
CSS Knowledge: Sort of a beginner. I guess you could say my knowledge is in between beginner and intermediate.
Preffered Teaching Method: MSN, Skype, or PMs all work fine for me.
Why you want to learn/how much you wish to know: I want to be able to know these codes without having to pester people all the time. I want to try to reach advanced CSS.
Time Zone: (UTC -7:00) Mountain Time (US & Canada)
Name/Nickname/What we can call you: You can call me Michael, if you want.


donavannj
Spoiler:
CSS Knowledge: Well... somewhat above beginner, but not by a whole lot, in my opinion.
Preffered Teaching Method:PMs - much more passive, and fit in my busy schedule quite well.
Why you want to learn/how much you wish to know: Just to pick up on some more stuff for CSS.
Time Zone: GMT -6 (Central Time Zone - US & Canada)
Name/Nickname/What we can call you: Donavann, or some variant of it will work plenty well.


Fuyuhiko
Spoiler:
CSS Knowledge: Beginner
Preferred Teaching Method: PMS,MSN all works for me :)
Why you want to learn/how much you wish to know: I'd like to know more of css.
I got some basics down but that's just about it.
Time Zone:
(UTC:8:00 Pacific Time)
Name/Nickname/What we can call you: Fernando


WonderGirl
Spoiler:

CSS Knowledge: Beginner
Preffered Teaching Method: Any and all ;)
Why you want to learn/how much you wish to know: I want to learn quite a few things because I have a forum and I'd like to make cool stuff for my signatures.
Time Zone: GMT+2
Name/Nickname/What we can call you: WG


Gerri Shin
Spoiler:
CSS Knowledge: somewhere between beginner and intermediate
Preferred Teaching Method: PM preferably, this way I can look back at what we cover and I'm not constrained to specific times to learn.
Why you want to learn/how much you wish to know: I'd like to know enough that I can sufficiently create new code from scratch instead of relying on pre-made templates and just editing here and there.
Time Zone: GMT-8
Name/Nickname/What we can call you: Gerri


Jesus oƒ Suburbia
Spoiler:
CSS Knowledge: Intermediate.
Preferred Teaching Method: Private messages, so I'm able to look at all the coding done.
Why you want to learn/how much you wish to know: To an extent where I can predict the result of my coding before hitting the preview button.
Time Zone: GMT+5
Name/Nickname/What we can call you: Jesus.


~Hot n' Cold~
Spoiler:

CSS Knowledge: Absolutely positively nothing.
Preffered Teaching Method: VM or PM - what's easier?
Why you want to learn/how much you wish to know: ROM Hacking, hoping to make attractive threads.
Time Zone: EST, or GMT + 8 hours
Name/Nickname/What we can call you: My name is ~Hot n' Cold~, but please call me Katie!




Tyrantrum March 1st, 2010 4:48 PM

Student

CSS Knowlage: Sort of a beginner. I guess you could say my knowledge is in between beginner and intermediate.
Preffered Teaching Method: MSN, Skype, or PMs all work fine for me.
Why you want to learn/how much you wish to know: I want to be able to know these codes without having to pester people all the time. I want to try to reach advanced CSS.
Time Zone: (UTC -7:00) Mountain Time (US & Canada)
Name/Nickname/What we can call you: You can call me Michael, if you want.

donavannj March 1st, 2010 7:29 PM

CSS Knowlage: Well... somewhat above beginner, but not by a whole lot, in my opinion.
Preffered Teaching Method: PMs - much more passive, and fit in my busy schedule quite well.
Why you want to learn/how much you wish to know: Just to pick up on some more stuff for CSS.
Time Zone: GMT -6 (Central Time Zone - US & Canada)
Name/Nickname/What we can call you: Donavann, or some variant of it will work plenty well.

Jordan March 2nd, 2010 3:03 PM

CSS Knowledge: Intermediate
How Many Students You Are Willing To Take On: 1
Preffered Teaching Method: VMs/PMs
Time Zone: GMT-5 (Eastern Time Zone, US & Canada)
Name/Nickname/What we can call you: Jordan

I'm not as knowledgeable with CSS as many here, though I can help with someone who's just getting started.

Belinda March 2nd, 2010 3:36 PM

Student

CSS Knowlage: Beginner
PreferredTeaching Method: PMS,MSN all works for me :)
Why you want to learn/how much you wish to know: I'd like to know more of css.
I got some basics down but that's just about it.
Time Zone:
(UTC:8:00 Pacific Time)
Name/Nickname/What we can call you: Fernando


seeker March 3rd, 2010 8:32 AM

Eeveon: Application Accepted. You are officially a Student.
donavannj: Application Accepted. You are officially a Student.
Jordan: Application Accepted. You are officially a Tutor.
Fuyuhiko: Application Accepted. You are officially a Student.

Abnegation's Students → Eeveon & Fuyuhiko (2 Spaces left)
Jordan's Students → donavannj (Spaces Full)

Please contact your tutor as soon as you are ready to proceed with tuition.

WonderGirl March 3rd, 2010 8:45 AM

there are some spelling mistakes in the form xD i corrected them in mine:

CSS Knowledge: Beginner
Preffered Teaching Method: Any and all ;)
Why you want to learn/how much you wish to know: I want to learn quite a few things because I have a forum and I'd like to make cool stuff for my signatures.
Time Zone: GMT+2
Name/Nickname/What we can call you: WG

Gerri Shin March 3rd, 2010 8:50 AM

CSS Knowledge: somewhere between beginner and intermediate
Preferred Teaching Method: PM preferably, this way I can look back at what we cover and I'm not constrained to specific times to learn.
Why you want to learn/how much you wish to know: I'd like to know enough that I can sufficiently create new code from scratch instead of relying on pre-made templates and just editing here and there.
Time Zone: GMT-8
Name/Nickname/What we can call you: Gerri

seeker March 3rd, 2010 8:51 AM

Ah, so there is, this is what you get for rushing XD;

WonderGirl: Application Accepted. You are officially a Student.

Gerri Shin: Application Accepted. You are officially a Student.

I will allocate you both to a tutor soon, I'm just going to wait and see whether more sign up to offer tuition, if not, I'll take you guys on myself. :D

WonderGirl March 3rd, 2010 8:52 AM

Ok, thanks dude ur so kind ^_^

Serene Grace March 8th, 2010 1:40 PM

Tutor
CSS Knowledge: Intermediate
How Many Students You Are Willing To Take On: 1-3
Preffered Teaching Method: MSN, Skype & PM's
Time Zone: GMT+0
Name/Nickname/What we can call you: Serene Grace

Note: Lessons will work best in 1 on 1 tuitions

seeker March 10th, 2010 9:21 AM

Serene Grace Aceppted. You are officially a Tutor.

Serene Graces's Students →
WonderGirl & Gerri Shin (1 Space left)

Just a note on that though, Serene if you wish to only take on one student for the time being that is perfectly fine. So no decision is final until you let me or get in contact with the allocated students. So Wonder Girl and Gerri Shin should get in contact with you or vice versa when ready to proceed with tuition. I just wanted to wait and spread some of the guys who signed on around so that there wasn't one person taking on more than half the students.
So thanks for signing up and your help will be greatly appreciated I'm sure!

Jesus oƒ Suburbia March 12th, 2010 1:01 AM

CSS Knowledge: Intermediate.
Preferred Teaching Method: Private messages, so I'm able to look at all the coding done.
Why you want to learn/how much you wish to know: To an extent where I can predict the result of my coding before hitting the preview button.
Time Zone: GMT+5
Name/Nickname/What we can call you: Jesus.

Venia Silente March 12th, 2010 8:48 PM

Interesting!

Signing up for tutor!

CSS Knowledge: 3/5ths between Intermediate and Advanced; including CSS3 recommendations & drafts.
How Many Students You Are Willing To Take On: 1
Preferred Teaching Method: VMs and PMs, can work out to e-mail from there
Time Zone: GMT-4 DST
Name/Nickname/What we can call you: Solovino


I'm relatively knowledgeable on CSS and used to be the tutor assistant to my teacher at college's Web Technologies class. I have experience adapting CSS from content systems to personal sites (such as from MediaWiki, DokuWiki, Joomla) and have created some minor SVG+CSS or dynamic CSS demos based on Opera's Web Standards Curriculum. Can help with sigs.
One point though: I a m more likely to emphasize how some effect should be achieved rather than how it can be achieved, I'm a bit nitpicking on standards.

~Hot n' Cold~ March 20th, 2010 6:42 PM

CSS Student,
I'm clueless.

CSS Knowledge: Absolutely positively nothing.
Preffered Teaching Method: VM or PM - what's easier?
Why you want to learn/how much you wish to know: ROM Hacking, hoping to make attractive threads.
Time Zone: EST, or GMT + 8 hours
Name/Nickname/What we can call you: My name is ~Hot n' Cold~, but please call me Katie!

Faltzer March 20th, 2010 8:06 PM

Applying for tutor


I have a lot of time on my hands, and I'm willing to burn it on helping the people here who want to learn CSS, and how to use it the correct way. I go in-depth, although not to the point where it's all jargon. I place significant priority on standards, because they make a better and more accessible web for everyone, so I will be teaching users to take considerations before applying of cool tricks.

CSS Knowledge: Intermediate/Advanced
How Many Students You Are Willing To Take On: 5
Preferred Teaching Method: Instant Messaging works best, but I'm very flexible. AIM, MSN, Yahoo, ICQ, Skype
Time Zone: GMT -5
Name/Nickname/What we can call you: Faltzer/Polly

seeker March 23rd, 2010 4:53 AM

Jesus oƒ Suburbia Aceppted. You are now officially a Student.
solovino Aceppted. You are now officially a Tutor.

solovino's Students → Jesus oƒ Suburbia (0 Space left)

~Hot n' Cold~ Aceppted. You are now officially a Student.
Faltzer Aceppted. You are now officially a Tutor.

Faltzer's Students → ~Hot n' Cold~ (4 Space left)

If you have any querys feel free to ask.

JeTz March 23rd, 2010 5:28 AM

Would like to apply to be a student

CSS Knowledge: Sort of beginner, know of some basic

Preffered Teaching Method: VMs / MSN
Why you want to learn/how much you wish to know: To be able to make beautiful thread/As far as I can go
Time Zone: GMT+8
Name/Nickname/What we can call you: Jetz

.Gamer March 23rd, 2010 1:44 PM

Whenever I try to get the text to hover over my banner, I go to preview signature, and I have like 10 copys of the banner (the banner is 352pixels x 152pixels) and I have that entered as the value in the place it goes, it only does it though when I have more than one line of text (which is preferred because I don't want a giant run on of sig stuff all over my banner).

Is it a problem with IE or am I just stupid? ._.


EDIT:
CSS Knowledge: none
ered Teaching Method: VM/PM/MSN
Why you want to learn/how much you wish to know: just learn stuff in general mostly for making sigs/threads
Time Zone: CST (GMT -6 I think)
Name/Nickname/What we can call you: Gamer/Alan (Can I have SG as my tutor if possible?)

shot571 March 23rd, 2010 1:57 PM

Would like to apply to be a student

CSS Knowledge: none
ered Teaching Method:
msn/vms
Why you want to learn/how much you wish to know: increase general knowledge, for a thread/ as much as i can

Time Zone: GMT
Name/Nickname/What we can call you: shoaib

Uecil April 4th, 2010 4:46 AM

okay, thought I would ask a question about css coding for my signature again.
okay how do I get a scroll down bar on my banner so i can move the text up and down, with out the banner moving?


All times are GMT -8. The time now is 11:04 PM.


Like our Facebook Page Follow us on Twitter © 2002 - 2018 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 - 2016 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.

Acknowledgements
Use of PokéCommunity Assets
vB Optimise by DragonByte Technologies Ltd © 2023.