CSS Help & Resources

[Ninja Paladin]

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]https://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=https://www.back-to-neverland.proboards.com/index.cgi?action=viewprofile&user=minnie]minnie[/url] of [url=https://back-to-neverland.proboards.com/]neverland[/url], enhanced by [url=https://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.

 

[Oryx]

Some of this can be reused with tweaks:

1. The tag for divs on PC isn't [div style="whatever;"], it's

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

 

[Ninja Paladin]

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​

 

[Samuraipizzacats]

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?

 

[Hiatus]

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.

 

[Samuraipizzacats]

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]

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]

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]

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:

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

 

[Poki]

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:

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

Oh, so that's how it goes. Thanks, that's what I was looking for.

 

[Leviathan]

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]

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'

twitter // last.fm

​

I really want the links to be plain black, so I'm showing you now what they look like.

 

[Oryx]

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.

 

[Ultraviolence]

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!

 

[Juno]

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]

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]

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]

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.

 

[Oryx]

Just add moz as well. With both of them it'll work on both browsers. :)

 

[Poki]

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.