Contact Box

[Farmer Franklin]

Lady Saxophone

You'll want it to affect "a" as well as "span"... "span" is only for the owner

▧▧▧▧▧▧▧

ah, so maybe this is why her links didnt work for me? they do some weird stuff with these profiles (not as bad as the old myspace, however!).

thanks (if you could, please confirm i understood you in my code)

Vampyre Lilith

try this instead:

/* Set contact panel background to transparent; you may need to either make this panel wider or shrink your text images a bit to make everything fit, however; */
div#id_contact {background:transparent !important;border:0 !important}
div#id_contact h2 {display:none !important;}

/* Clear text from Contact Links and sized to fit the widest of your images; */
div#id_contact ul li span, div#id_contact ul li a {display:block !important;width:370px;height:68px;text-indent:-9999em;}

/* Use specific images as backgrounds for contact elements; */
div#id_contact ul li:nth-child(1) span,div#id_contact ul li:nth-child(1) a {background:url('http://images.cooltext.com/3919041.png') no-repeat !important;}
div#id_contact ul li:nth-child(2) span,div#id_contact ul li:nth-child(2) a {background:url('http://images.cooltext.com/3919045.png') no-repeat !important;}
.contact_panel ul li:nth-child(3) span,div#id_contact ul li:nth-child(3) a {background:url('http://images.cooltext.com/3919048.png') no-repeat;}

// about to go cook dinner, but i'll check back in a while...

[Confelicity]

Vampyre Lilith

The links work, but the images that you intended to use aren't showing up even though they're in the code. Perhaps you should try looking at this thread.

[Vampyre Lilith]

Confelicity

Vampyre Lilith

The links work, but the images that you intended to use aren't showing up even though they're in the code. Perhaps you should try looking at this thread.

They're working for me...

[Vampyre Lilith]

Ok.... So how can i tweak my store link?

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧

Vampyre Lilith

Ok.... So how can i tweak my store link?

How exactly do you want to tweak it?

Since it's a hyperlink, the basic thing would be to change color...
#id_store a{color: value;}
But there are plenty of other font properties you can apply it it as well, like text-shadow, text-transform, text-decoration, etc.

▧▧▧▧▧▧▧

[Vampyre Lilith]

Lady Saxophone

▧▧▧ ♬ ▧▧▧

Vampyre Lilith

Ok.... So how can i tweak my store link?

How exactly do you want to tweak it?

Since it's a hyperlink, the basic thing would be to change color...
#id_store a{color: value;}
But there are plenty of other font properties you can apply it it as well, like text-shadow, text-transform, text-decoration, etc.

▧▧▧▧▧▧▧

>.< I'd love to learn this stuff...

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧

Vampyre Lilith

>.< I'd love to learn this stuff...

;3 There are plenty of guides to help ~ Here are two of the most popular:
- [GUIDE] Learn How To Code v2/Current Profiles (Outdated)
- [GUIDE: CSS Properties] Style Sheet Solutions (Basically your coding encyclopedia -- there is a list of all the Font Properties in this post)

▧▧▧▧▧▧▧

[Vampyre Lilith]

Lady Saxophone

▧▧▧ ♬ ▧▧▧

Vampyre Lilith

>.< I'd love to learn this stuff...

;3 There are plenty of guides to help ~ Here are two of the most popular:
- [GUIDE] Learn How To Code v2/Current Profiles (Outdated)
- [GUIDE: CSS Properties] Style Sheet Solutions (Basically your coding encyclopedia -- there is a list of all the Font Properties in this post)

▧▧▧▧▧▧▧

I've read the first one..... Didn't learn anything...

[Lady Saxophone]

▧▧▧ ♬ ▧▧▧

Vampyre Lilith

I've read the first one..... Didn't learn anything...

xd Like I said, it's outdated and it only skims the surface of CSS coding (a lot of newbies find it more appealing than Yoshi's though)
The second one lists pretty much all of the properties you could ever want to code on profiles.

▧▧▧▧▧▧▧

[Fredy-san]

Farmer Franklin

Fredy-san

replaced with nth-child, seemed to work fine in test.

may i ask, was there particular reason you mentioned nth-of-type above? (performance or something?)

None really significant, just ease of use in most common case

For example you have 5 "ol" tags with one "center" tag slipped between them
ol - ol -ol - center - ol - ol

If you want to aim the fourth ol tags, you have to use nth-child(5) or nth-of-type(4). In more dynamic contents, this could pose a bit problem.

There is an advanced trick to this however, you can create a IF-ELSE situation with css using this. Like for example #id_details:nth-child(1) means it will only aim at details panel ONLY IF the details panel is the first panel of the column (aka first child) ELSE it is invalid. Of course nth-of-type cant create such situation since it will always valid even though.

With simple CSS like

/*--IF details panel is first child, then...--*/
.column #id_details:nth-child(1) {
color:black;
background:red;
}
/*---else...---*/
#id_details {
color:white;
background:blue;
}

This can be combined with some of the dynamic content of Gaia like the badge panel and precision aim of [attr*='value'] and specificity-overwrite rules selector could create some of the best tricks peeps ever seen in Gaia.

[Farmer Franklin]

Fredy-san

Farmer Franklin

Fredy-san

replaced with nth-child, seemed to work fine in test.

may i ask, was there particular reason you mentioned nth-of-type above? (performance or something?)

None really significant, just ease of use in most common case

For example you have 5 "ol" tags with one "center" tag slipped between them
ol - ol -ol - center - ol - ol

If you want to aim the fourth ol tags, you have to use nth-child(5) or nth-of-type(4). In more dynamic contents, this could pose a bit problem.

There is an advanced trick to this however, you can create a IF-ELSE situation with css using this. Like for example #id_details:nth-child(1) means it will only aim at details panel ONLY IF the details panel is the first panel of the column (aka first child) ELSE it is invalid. Of course nth-of-type cant create such situation since it will always valid even though.

With simple CSS like

/*--IF details panel is first child, then...--*/
.column #id_details:nth-child(1) {
color:black;
background:red;
}
/*---else...---*/
#id_details {
color:white;
background:blue;
}

This can be combined with some of the dynamic content of Gaia like the badge panel and precision aim of [attr*='value'] and specificity-overwrite rules selector could create some of the best tricks peeps ever seen in Gaia.

now, that is freakin' cool (and useful!)...thanks for the explanation!