CSS Help & Resources Page 28

Started by seeker November 16th, 2009 5:38 PM
  • 175331 views
  • 902 replies

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Can someone help me with this? The image won't show up all


Noire.
Lady Black Heart.
Goddess of Lastation
Playstation 3 Personification
[img*]http://ps3trophies.com/images/games/NPWR01663/trophies/42L059ce8.png[/img]
Why are you inserting an asterisk into the [IMG] code? That's why it won't show up :P


Noire.
Lady Black Heart.
Goddess of Lastation
Playstation 3 Personification


[div=*"height: 100px; width: 320px; border-radius: 5px; display: inline-block; overflow: hidden;"]
[div="*height: 100%; width: 140px; background: #444; padding: 10px; text-align: left; font: 12px arial, sans-serif; color: #fff; float: left;"]Noire.
Lady Black Heart.
Goddess of Lastation
Playstation 3 Personification[/div][img]http://ps3trophies.com/images/games/NPWR01663/trophies/42L059ce8.png[/img][/div]

Dter ic

Fire Emblem....HEROES

Age 26
Male
(Un)united Kingdom
Seen December 15th, 2018
Posted July 9th, 2018
741 posts
10.7 Years
Anyone know of a neater method to specify a colour for a hyperlink within a signature? I use the color BBcode wrapped around the text for the link which seems to work fine but I wonder if there's a more efficient method of doing it.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
As far as I know that's the only way we can do it with the mini-CSS we have here. In full CSS we would be able to specify the colors of links but that's not the case in what we have.


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Ninja Paladin

Male
Northamptonshire, UK
Seen 17 Hours Ago
Posted June 12th, 2018
146 posts
16.5 Years
So before I kill my brain cells, how much of coding like this could I salvage to use on here? (FYI I'm Telraen)

[center]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div class=""color1""][img]http://i.imgur.com/ZMwj0.png[/img][/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div style=""font-family: sylfaen; text-align: right; font-size: 20px; color: 808080 margin-bottom: 3px; width: 270px; opacity: 0.6;""][b][url=PROFILE]USERNAME[/url][/b][/div][div class=""header""]FIRST L.[/div][div class=""header""]GENDER: _______[/div][div class=""header""]AGE: _______[/div][div class=""header""]SEXUALITY: _______[/div][div class=""header""]ALIGNMENT: _______[/div]</td></tr></table>

[div style=""clear: both""][/div][div class=""roster""][div class=""color""]Tracker[/div]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div style=""width: 130px; margin-right: 10px;""][div class=""seekerH""][b]SEEKING[/b][/div][div class=""seeker""]SOCIALS[/div][div class=""seeker""]GROUP QUESTS[/div][div class=""seeker""]GATHERING[/div][div class=""seeker""]HUNTS[/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div class=""tracker""][b]ACTIVE THREADS[/b][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div]
[div style=div class=""tracker""][b]COMPLETED THREADS[/b][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div]
[div class=""tracker""][b]INACTIVE THREADS[/b][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div]</td></tr></table>[/div]

[div style=""clear: both""][/div][div class=""roster""][div class=""color""]Friends[/div]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div style=""width: 130px; margin-right: 10px;""][div style=""width: 130px; margin-right: 10px;""][div class=""seekerH""][b]WANTED[/b][/div][div class=""seeker""]LOVE INTERESTS[/div][div class=""seeker""]BEST FRIENDS[/div][div class=""seeker""]FRIENDS[/div][div class=""seeker""]ACQUAINTANCES[/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div class=""tracker""][b]LOVE INTERESTS[/b][/div][div class=""thread""][url=LINK]The One[/url][/div][div class=""thread""][url=LINK]The Other One[/url][/div]
[div class=""tracker""][b]BEST FRIENDS[/b][/div][div class=""thread""][url=LINK]Lifesaver[/url][/div][div class=""thread""][url=LINK]That Guy[/url][/div]
[div class=""tracker""][b]FRIENDS[/b][/div][div class=""thread""][url=LINK]Guildie[/url][/div][div class=""thread""][url=LINK]Personal Crafter[/url][/div]
[div class=""tracker""][b]ACQUAINTANCES[/b][/div][div class=""thread""][url=LINK]Appraisal Guy[/url][/div][div class=""thread""][url=LINK]Cheap Heals[/url][/div]</td></tr></table>[/div]

[div style=""clear: both""][/div][div class=""roster""][div class=""color""]Foes[/div]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div style=""width: 130px; margin-right: 10px;""][div style=""width: 130px; margin-right: 10px;""][div class=""seekerH""][b]WANTED[/b][/div][div class=""seeker""]MUTUAL[/div][div class=""seeker""]HUNTED[/div][div class=""seeker""]FRENEMIES[/div][div class=""seeker""]RIVALS[/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div class=""tracker""][b]MUTUAL[/b][/div][div style=""width: 260px;""][div class=""thread""][url=LINK]Loot Stealer[/url][/div][div class=""thread""][url=LINK]PKer[/url][/div]
[div class=""tracker""][b]HUNTED[/b][/div][div class=""thread""][url=LINK]Friend Killer[/url][/div][div class=""thread""][url=LINK]Thief[/url][/div]
[div class=""tracker""][b]FRENEMIES[/b][/div][div class=""thread""][url=LINK]Risk Taker[/url][/div][div class=""thread""][url=LINK]Beater[/url][/div]
[div class=""tracker""][b]RIVALS[/b][/div][div class=""thread""][url=LINK]Love Rival[/url][/div][div class=""thread""][url=LINK]Frontliner[/url][/div]</td></tr></table>[/div]

[div style=""font-size: 9px; opacity: 0.3;""]made by [url=http://www.back-to-neverland.proboards.com/index.cgi?action=viewprofile&user=minnie]minnie[/url] of [url=http://back-to-neverland.proboards.com/]neverland[/url], enhanced by [url=http://back-to-neverland.proboards.com/index.cgi?action=viewprofile&user=telraen]telraen[/url][/div]

[newclass=.header]width: 265px; -moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; background-color: f1f1f1; color: #808080; font-family: helvetica; text-align: right; font-size: 11px; margin-bottom: 3px; padding-right: 5px; padding-top: 2px; opacity: 0.6;[/newclass][newclass=.header:hover]-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: F3A204; color: #f1f1f1; opacity: 0.8;[/newclass]
[newclass=.roster]transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s; height: 53px; overflow: hidden; opacity: 0.6;[/newclass][newclass=.roster:hover]height: 400px; transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; -o-transition: 0.7s; opacity: 0.8;[/newclass]
[newclass=.seekerH]border-bottom: 2px solid #F3A204; font-family: helvetica; text-align: right; font-size: 12px; margin-bottom: 3px;[/newclass]
[newclass=.seeker]background-color: #F3A204; color: f1f1f1; font-family: ms gothic; font-size: 11px; padding-top: 2px; margin-bottom: 3px; padding-right: 5px; text-align: right;[/newclass]
[newclass=.tracker]border-bottom: 2px solid #F3A204; font-family: helvetica; text-align: right; font-size: 12px; margin-bottom: 3px;[/newclass]
[newclass=.color]-moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; width: 400px; background-color: f1f1f1; color: #808080; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px;[/newclass][newclass=.color:hover]-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; width: 400px; background-color: F3A204; color: #f1f1f1; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px;[/newclass]
[newclass=.color1]width: 100px; -moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; border: 5px solid f1f1f1; margin-right: 5px; opacity: 0.6;[/newclass][newclass=.color1:hover]width: 100px; -moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; border: 5px solid #F3A204; opacity: 0.8;[/newclass]
[newclass=.thread]width: 260px; -moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; background-color: f1f1f1; color: #808080; font-family: helvetica; text-align: right; font-size: 11px; line-height: 12px; margin-bottom: 3px; opacity: 0.8;[/newclass][newclass=.thread:hover]-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: F3A204; color: #f1f1f1; opacity: 1.0;[/newclass][/center]
EDIT: Oh and no the multiple transparency codes and etc aren't redundant, you need to have all the different variants active in your code so it shows up right in each of the mainstream browsers.


FC: 2122-7342-8697 IGN: Telrean

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
Some of this can be reused with tweaks:

1. The tag for divs on PC isn't [div style="whatever;"], it's [css-div="whatever;"].
2. I don't believe PC CSS supports names of classes, so instead of putting the names you'd have to just add in the properties the names describe for each one; annoying, but doable.

But there is no table code on PC so I'm not sure how useful that will be to you since you can't really put it in your underlying table structure.


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Ninja Paladin

Male
Northamptonshire, UK
Seen 17 Hours Ago
Posted June 12th, 2018
146 posts
16.5 Years
I'm guessing I can't salvage the hover code either then, as for the underlaying table structure that's not needed here as the bbcode for the divs doesn't do weird things with the layout and when it tries to I can correct it manually.

EDIT: Experimental bitty

Spoiler:

RAWR



never hesitate and always travel forwards
trust in your fate
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ♥♥♥ sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.

the left handed avenger

Word Count:
0000

Quest Tracker:
----

Notes:
made by bubbles of btn, tweaked by telraen


FC: 2122-7342-8697 IGN: Telrean

Hiatus

Seen 2 Days Ago
Posted July 24th, 2021
12,283 posts
10.8 Years
Hi!

So I've made a html post with embedded CSS, but I can't seem to figure out how I can use it to make a thread. I never was an active forums poster before so I don't quite know how I can transform it into the correct way.

Is there a tutorial or someone who wants to help me?
Oh, that should be pretty easy; just copy off your CSS, and place them inside either [cd] or [css-div]. They work exactly like <div style> tag, so if you know how that goes, you should be all set. :] Don't put any HTML, though, or else, it won't function properly.
Male
Seen July 30th, 2016
Posted February 24th, 2015
28 posts
9.5 Years
Oh, that should be pretty easy; just copy off your CSS, and place them inside either [cd] or [css-div]. They work exactly like <div style> tag, so if you know how that goes, you should be all set. :] Don't put any HTML, though, or else, it won't function properly.
Thanks, will try that!

There isn't a possibility where I can just copy and pasty my HTML+CSS like a would have made a webpage?

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Thanks, will try that!

There isn't a possibility where I can just copy and pasty my HTML+CSS like a would have made a webpage?
Unfortunately, HTML is not permitted fire use here on PC, so you would heave to use the BB code provided by PC to do CSS.

Poki

Banned

България
Seen February 20th, 2020
Posted September 21st, 2015
2,423 posts
9.8 Years
Yo. I've been looking for the BB code for the CSS you can make a shadow behind your text with, but not the transparent kind. Like a solid-coloured shadow. There was a 4th value, iirc, but I only have the regular kind's BB code in my possession.

Thanks in advance.

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Yo. I've been looking for the BB code for the CSS you can make a shadow behind your text with, but not the transparent kind. Like a solid-coloured shadow. There was a 4th value, iirc, but I only have the regular kind's BB code in my possession.

Thanks in advance.
Do you mean like this?

test


For a full drop shadow like that, you want to make sure your third px value in the text shadow CSS code is set to 0px. The raw code of the above is this for reference:

[css-div="color:red;text-shadow: 2px 2px 0px #000000;font-size:36px;"]test[/css-div]

Poki

Banned

България
Seen February 20th, 2020
Posted September 21st, 2015
2,423 posts
9.8 Years
Do you mean like this?

test


For a full drop shadow like that, you want to make sure your third px value in the text shadow CSS code is set to 0px. The raw code of the above is this for reference:

[css-div="color:red;text-shadow: 2px 2px 0px #000000;font-size:36px;"]test[/css-div]
Oh, so that's how it goes. Thanks, that's what I was looking for.

Leviathan

What's the matter? Lives flashing before your eyes?

Age 29
Female
Ireland
Seen 1 Week Ago
Posted January 15th, 2023
1,103 posts
9.9 Years
This has been a very helpful thread. I'm familiar with CSS design and after figuring it out how to adapt it for BBCode I've been having fun playing around with it. It's a pity that I'm just a bit barren ideas for what way I'd like my signature to look, haha.

Ultraviolence

alt account for Eros

Age 27
Male
UK
Seen September 3rd, 2019
Posted May 3rd, 2015
842 posts
14.3 Years
I wasn't sure if this had already been touched upon, but is there anyway to remove the default hyperlink colour whilst using CSS?

Down on the West Coast
they got a sayin'


I really want the links to be plain black, so I'm showing you now what they look like.
Down on the West Coast
they got a sayin'

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
The bbcode goes on an outside-to-inside pattern - so if you want to make a link a certain color you have to put the url bbcode, then the color bbcode, then the word, then close both.


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Ultraviolence

alt account for Eros

Age 27
Male
UK
Seen September 3rd, 2019
Posted May 3rd, 2015
842 posts
14.3 Years
The bbcode goes on an outside-to-inside pattern - so if you want to make a link a certain color you have to put the url bbcode, then the color bbcode, then the word, then close both.
thank you, I've clearly been over thinking it!
Down on the West Coast
they got a sayin'

Juno

OK I PULL UP

Age 28
Female
Seen 1 Day Ago
Posted 5 Days Ago
4,561 posts
9.5 Years
How do I change the text-decoration and color of links when I hover over them? Like right now, in some forum styles, when I hover over the links in my signature it underlines it by default - how can I get rid of that?

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
How do I change the text-decoration and color of links when I hover over them? Like right now, in some forum styles, when I hover over the links in my signature it underlines it by default - how can I get rid of that?
I may be wrong on this, but I don't think it's possible to bypass the style's coding by default like that. The only thing I can recommend for now is using a style that doesn't underline hyperlinks of any kind.

Juno

OK I PULL UP

Age 28
Female
Seen 1 Day Ago
Posted 5 Days Ago
4,561 posts
9.5 Years
I may be wrong on this, but I don't think it's possible to bypass the style's coding by default like that. The only thing I can recommend for now is using a style that doesn't underline hyperlinks of any kind.
Aw, that's too bad. Thanks anyway!

Poki

Banned

България
Seen February 20th, 2020
Posted September 21st, 2015
2,423 posts
9.8 Years
Me again.

I made my signature on Chrome, and the rounded corners do not show up on Firefox, because I used -webkit-border-blahblah, not the -moz-border- one. Is there a solution to make them seeable on both browsers? I'm obviously missing something here, so I'm asking you guys.

Poki

Banned

България
Seen February 20th, 2020
Posted September 21st, 2015
2,423 posts
9.8 Years
Just add moz as well. With both of them it'll work on both browsers. :)
Logged in on Firefox, and it's still the same. I even tried w/moz only, but neither shows up. There could be something wrong with my browser, I dunno.