CSS Help & Resources

[THIRTY-SIX]

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]

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]

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]

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]

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

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




[a id]This must match[/a id] 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]

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]

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]

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

 

[Abnegation]

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]

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]

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

 

[Syrex]

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]

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]

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

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

 

[Charizard★]

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

---Signature Here---

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

Take out the "%" symbols on width.

Mm. Syrex is boss

 

[Jordan]

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

---Signature Here---

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

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

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

---Signature Here---

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

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:

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]

Last question:

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

[URL="https://www.google.com/"][img]https://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?