CSS Help & Resources

THIRTY-SIX · Nov 17, 2009

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 · Nov 17, 2009

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

abnegation · Nov 17, 2009

Spherical Ice said:
I have a question, and I'm pretty sure it belongs here:
How do I change link colour, decoration, etc. in my CSS?
Please and thank you. ^.^

I have a few suggestions here, without using CSS you can change the colour of your links by simply highlighting the word, then choosing the colour from the drop down menu and whilst it is still highlighted use

to link it. You can do this or you can do it from normal BB code, [URL][COLOR=""]Word[/COLOR][/URL] and that's the layout so that it does not go to the normal hyperlink colour of the current theme.

As for decoration there are a few different codes
text-decoration: line-through;

This is your example

text-decoration: underline;

This is your example

text-decoration: none;

This is your example

text-decoration: blink;

This is your example

There are plenty more, just work with those and fiddle with the codes.

Spherical Ice · Nov 17, 2009

~~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!

abnegation · Nov 17, 2009

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:

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 · Nov 17, 2009

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

abnegation · Nov 17, 2009

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 [div="Float:right;"] then post the image[/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 text

text text text text text text text text text text text text text text text text text text text text 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 · Nov 17, 2009

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

abnegation · Nov 17, 2009

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:

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

Gary the Magic Fairy · Nov 17, 2009

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 · Nov 17, 2009

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

Syrex · Nov 17, 2009

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.

abnegation · Nov 17, 2009

Have you tried using padding?
Padding is really hady for placement of things such as text and images.
[div="padding-left:50px;"]Your icon[/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 · Nov 17, 2009

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

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

Charizard★ · Nov 17, 2009

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

---Signature Here---

HTML:

[div="width: 100%px; height: 100px;"][div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/div][/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 · Nov 17, 2009

Take out the "%" symbols on width.

Mm. Syrex is boss

Jordan · Nov 17, 2009

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

---Signature Here---

HTML:

[div="width: 100%px; height: 100px;"][div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here--- [/div][/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:

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

Which makes:

---Signature Here---

abnegation · Nov 17, 2009

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

---Signature Here---

HTML:

[div="width: 100%px; height: 100px;"][div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here--- [/div][/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 · Nov 17, 2009

Abnegation said:
Have you tried using padding?
Padding is really hady for placement of things such as text and images.
[div="padding-left:50px;"]Your icon[/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:

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

Syrex · Nov 17, 2009

Last question:

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

HTML:

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

CSS Help & Resources

More options

THIRTY-SIX

Banned

Spherical Ice

abnegation

Spherical Ice

abnegation

Spherical Ice

abnegation

THIRTY-SIX

Banned

abnegation

Gary the Magic Fairy

Banned

THIRTY-SIX

Banned

Syrex

[b][i][COLOR=black][font=Rock Salt][glow=green]Hen

abnegation

Syrex

[b][i][COLOR=black][font=Rock Salt][glow=green]Hen

Charizard★

Syrex

[b][i][COLOR=black][font=Rock Salt][glow=green]Hen

Jordan

abnegation

Gary the Magic Fairy

Banned

Syrex

[b][i][COLOR=black][font=Rock Salt][glow=green]Hen