CSS Help & Discussion - Page 3

Jordan · #51 November 21st, 2009, 03:39 PM

Quote:

Originally Posted by Sinnoh Champ Cynthia.

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. · #52 November 21st, 2009, 03:41 PM

Lol.

Thanks to both of you, rep given .

_Dean_ · #53 November 24th, 2009, 05:29 AM

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~~ · #54 November 24th, 2009, 08: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 · #55 December 1st, 2009, 01:24 AM

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

~Teh Panda~ · #56 December 1st, 2009, 08: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~~ · #57 December 1st, 2009, 02:08 PM

Quote:

Originally Posted by Jordan

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 · #58 December 1st, 2009, 09:15 PM

Quote:

Originally Posted by ahahahahahahahaha

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 · #59 December 3rd, 2009, 08:30 AM

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

Morkula · #60 December 8th, 2009, 01:08 AM

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

Spherical Ice · #61 December 9th, 2009, 05:43 PM

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

Spoiler:

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

Quote:

Originally Posted by ShinjisLover

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~~ · #62 December 9th, 2009, 06:32 PM

Quote:

Originally Posted by ShinjisLover

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 · #63 December 9th, 2009, 07:56 PM

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

jigglyppuff8 · #64 December 9th, 2009, 08:44 PM

Quote:

Originally Posted by Gary, the Magic Fairy

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~~ · #65 December 9th, 2009, 09:14 PM

Quote:

Originally Posted by jigglyppuff8

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 · #66 December 22nd, 2009, 08:25 PM

Spoiler:

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 · #67 December 22nd, 2009, 08:53 PM

Quote:

Originally Posted by t.A.T.u

Spoiler:

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:

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

jigglyppuff8 · #68 December 22nd, 2009, 08:56 PM

Quote:

Originally Posted by t.A.T.u

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:

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

Abnegation · #69 December 30th, 2009, 05:50 PM

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:

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.

Galukxy · #70 January 23rd, 2010, 07:08 PM

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 · #71 January 23rd, 2010, 07:15 PM

Quote:

Originally Posted by sspokemon

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.

Galukxy · #72 January 23rd, 2010, 08:42 PM

Quote:

Originally Posted by Miniryu

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

Giga Universe · #73 February 13th, 2010, 02:46 PM

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

Abnegation · #74 February 14th, 2010, 04:22 PM

Quote:

Originally Posted by 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'.

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:

--------------------------------------------------
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 · #75 February 16th, 2010, 07:08 PM

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.

Blogs
Recent Entries	Best Entries
Best Blogs	Blog List
Search Blogs

Tag Search
Advanced Search