The PokéCommunity Forums  

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

Notices

Technology & Internet 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.


Advertise here

Reply
Click here to go to the first staff post in this thread.  
Thread Tools
  #51    
Old November 21st, 2009, 07:39 AM
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

Advertise here
Quote:
Originally Posted by Sinnoh Champ Cynthia. View Post
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;
__________________
Formspring
MyAnimeList
Spring Breeze
Reply With Quote
  #52    
Old November 21st, 2009, 07:41 AM
cyan.'s Avatar
cyan.
▲ 愛してる .
 
Join Date: Nov 2008
Location: toronto.
Gender: Female
Nature: Timid
Send a message via ICQ to cyan. Send a message via AIM to cyan.
Lol.

Thanks to both of you, rep given .
__________________
マーズ
Mars, Team Galactic Commander
Hair Color: Red
Eye Color: Red
Reply With Quote
  #53    
Old November 23rd, 2009, 09:29 PM
_Dean_'s Avatar
_Dean_
smoke if you got it
Community Supporter Tier 3
 
Join Date: Aug 2009
Location: USA
Age: 22
Gender: Male
Nature: Bold
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:
Reply With Quote
  #54    
Old November 24th, 2009, 12:47 AM
THIRTY-SIX's Avatar
THIRTY-SIX
Booted out - don't be like me!
 
Join Date: Oct 2004
[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.
Reply With Quote
  #55    
Old November 30th, 2009, 05:24 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
Blech, can someone explain to me how to form the line-height CSS in BBCode? xD;
__________________
Formspring
MyAnimeList
Spring Breeze
Reply With Quote
  #56    
Old December 1st, 2009, 12:06 AM
~Teh Panda~'s Avatar
~Teh Panda~
Sea of Dreams - Redux
 
Join Date: Aug 2007
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
__________________




Mystic still in work to let you know...
Reply With Quote
  #57    
Old December 1st, 2009, 06:08 AM
THIRTY-SIX's Avatar
THIRTY-SIX
Booted out - don't be like me!
 
Join Date: Oct 2004
Quote:
Originally Posted by Jordan View Post
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.
Reply With Quote
  #58    
Old December 1st, 2009, 01:15 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 ahahahahahahahaha View Post
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!
__________________
Formspring
MyAnimeList
Spring Breeze
Reply With Quote
  #59    
Old December 3rd, 2009, 12:30 AM
ShinjisLover's Avatar
ShinjisLover
Later Potater!
 
Join Date: Dec 2008
Location: Right behind you
Gender: Female
Nature: Lax
Excuse me, but I need help regarding this post, please. =3
__________________
Fluttershy

» Yay
» I'm the world champ, you know
» You rock, woohoo
» Oh, I'm sorry, am I interrupting?
Reply With Quote
  #60    
Old December 7th, 2009, 05:08 PM
Morkula's Avatar
Morkula
Play the Game
 
Join Date: Feb 2004
Location: Virginia
Age: 26
Gender: Male
Going to shoot this over to Webmasters Discussion where it belonged to begin with~
*Moved*
__________________

paired with cherrim ~ big brother of arago
4p games ~ 4p forums ~ backloggery ~ twitter
Reply With Quote
  #61    
Old December 9th, 2009, 09:43 AM
Spherical Ice's Avatar
Spherical Ice
Community Supporter
 
Join Date: Nov 2007
Location: UK
Send a message via Skype™ to Spherical Ice
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:
spoiler warning
The proceeding text contains a spoiler.
Plot and/or ending details follow containing information on Hi.

Hi


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

Quote:
Originally Posted by ShinjisLover View Post
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.
__________________
Reply With Quote
  #62    
Old December 9th, 2009, 10:32 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 ShinjisLover View Post
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.
Reply With Quote
  #63    
Old December 9th, 2009, 11:56 AM
Spherical Ice's Avatar
Spherical Ice
Community Supporter
 
Join Date: Nov 2007
Location: UK
Send a message via Skype™ to Spherical Ice
@ Gary: Yeah, that was the problem; they only seem to go together vertically, not horizontally. :/
__________________
Reply With Quote
  #64    
Old December 9th, 2009, 12:44 PM
jigglyppuff8's Avatar
jigglyppuff8
 
Join Date: Jun 2007
Location: PA, USA :effort
Age: 21
Gender: Male
Nature: Modest
Quote:
Originally Posted by Gary, the Magic Fairy View Post
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
__________________
迷いながらトキメイタ 
記憶は儚くて消えないで

Reply With Quote
  #65    
Old December 9th, 2009, 01: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 jigglyppuff8 View Post
display:inline property.

This is div 1
This is div 2
Well crap. I wish I knew that a lot sooner.

Thanks. XD
Reply With Quote
  #66    
Old December 22nd, 2009, 12:25 PM
.little monster's Avatar
.little monster
Donator Tier 4
 
Join Date: Jun 2009
Location: Ohio
Age: 21
Gender: Male
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.
__________________

Hello, hello baby you called but I can't hear a thing.

Reply With Quote
  #67    
Old December 22nd, 2009, 12:53 PM
Rukario's Avatar
Rukario
 
Join Date: Aug 2003
Location: Somewhere in Ilex Forest
Nature: Adamant
Quote:
Originally Posted by t.A.T.u View Post
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;
__________________
- Rukario -















Twinned with Jedi_Amara | Paired with Your Name Here | Lil Sis Kimi-Chan | Sig

Reply With Quote
  #68    
Old December 22nd, 2009, 12:56 PM
jigglyppuff8's Avatar
jigglyppuff8
 
Join Date: Jun 2007
Location: PA, USA :effort
Age: 21
Gender: Male
Nature: Modest
Quote:
Originally Posted by t.A.T.u View Post
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.
__________________
迷いながらトキメイタ 
記憶は儚くて消えないで

Reply With Quote
  #69    
Old December 30th, 2009, 09:50 AM
abnegation's Avatar
abnegation
proudly paired with adventure
Community Supporter
 
Join Date: Apr 2009
Age: 21
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

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.





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.
__________________
Taking time off from being a Super Moderator on this forum.
I may be back in due course, until then I will be inactive.
Now you're aware.

the internet is full of people who refuse to be nice to others
because they feel that this makes them superior
that's lame
Reply With Quote
  #70    
Old January 23rd, 2010, 11:08 AM
Galukxy's Avatar
Galukxy
→Not someday.Today is the day.
 
Join Date: Nov 2009
Location: England, United Kingdom.
Age: 20
Gender: Female
Nature: Gentle
Send a message via AIM to Galukxy Send a message via Skype™ to Galukxy
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??
__________________

DA||MAL || Portfolio

Reply With Quote
  #71    
Old January 23rd, 2010, 11:15 AM
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 sspokemon View Post
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:


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.
__________________
Formspring
MyAnimeList
Spring Breeze

Last edited by Jordan; February 13th, 2010 at 07:08 AM.
Reply With Quote
  #72    
Old January 23rd, 2010, 12:42 PM
Galukxy's Avatar
Galukxy
→Not someday.Today is the day.
 
Join Date: Nov 2009
Location: England, United Kingdom.
Age: 20
Gender: Female
Nature: Gentle
Send a message via AIM to Galukxy Send a message via Skype™ to Galukxy
Quote:
Originally Posted by Miniryu View Post
You don't need CSS for that if I think this is what you meant:


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
__________________

DA||MAL || Portfolio

Reply With Quote
  #73    
Old February 13th, 2010, 06:46 AM
Giga Universe's Avatar
Giga Universe
Working on a tool.
 
Join Date: Aug 2007
Location: South Africa
Age: 19
Gender: Male
Nature: Calm
Send a message via ICQ to Giga Universe Send a message via AIM to Giga Universe Send a message via Yahoo to Giga Universe Send a message via Skype™ to Giga Universe
Is it possible to build something like this?
http://www.w3schools.com/CSS/tryit.a...ites_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'.
__________________
Reply With Quote
  #74    
Old February 14th, 2010, 08:22 AM
abnegation's Avatar
abnegation
proudly paired with adventure
Community Supporter
 
Join Date: Apr 2009
Age: 21
Quote:
Originally Posted by Giga Universe View Post
Is it possible to build something like this?
http://www.w3schools.com/CSS/tryit.a...ites_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.
__________________
Taking time off from being a Super Moderator on this forum.
I may be back in due course, until then I will be inactive.
Now you're aware.

the internet is full of people who refuse to be nice to others
because they feel that this makes them superior
that's lame
Reply With Quote
  #75    
Old February 16th, 2010, 11:08 AM
.Gamer's Avatar
.Gamer
»»───knee─►
Community Supporter Tier 2
 
Join Date: Dec 2009
Location: NSFW
Gender: Male
Nature: Jolly
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.
__________________
pair Smogon profile youtube
Reply With Quote
Reply
Quick Reply

Sponsored Links


Advertise here
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 02:31 AM.


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.