• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

CSS Help & Resources

Ninja Paladin

Ninja Paladin

146
Posts
17
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)

HTML: 
[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.
 
Last edited:

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
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

Ninja Paladin

146
Posts
17
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:
 
Last edited:

Samuraipizzacats

Call me Seb
28
Posts
10
Years
  • Age 32
  • Seen Jul 30, 2016
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

Hiatus

12,284
Posts
11
Years
  • Seen Oct 22, 2023
Samuraipizzacats said:
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?
Click to expand...

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

Call me Seb
28
Posts
10
Years
  • Age 32
  • Seen Jul 30, 2016
Peitharchia said:
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.
Click to expand...

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?
 

Poki

Banned
2,423
Posts
10
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

Tsutarja

27,742
Posts
14
Years
Poki said:
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.
Click to expand...
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:

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

Poki

Banned
2,423
Posts
10
Years
Zach said:
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:

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

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

Leviathan

[span="font-family:ubuntu; color: whitesmoke; padd
1,103
Posts
10
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
842
Posts
15
Years
  • Age 28
  • UK
  • Seen Sep 3, 2019
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.
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
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

alt account for Eros
842
Posts
15
Years
  • Age 28
  • UK
  • Seen Sep 3, 2019
Oryx said:
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.
Click to expand...

thank you, I've clearly been over thinking it!
 
Juno

Juno

4,683
Posts
10
Years
  • Age 29
  • Seen Mar 22, 2024
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

Tsutarja

27,742
Posts
14
Years
Juno said:
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?
Click to expand...
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

Juno

4,683
Posts
10
Years
  • Age 29
  • Seen Mar 22, 2024
Zach said:
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.
Click to expand...

Aw, that's too bad. Thanks anyway!
 

Poki

Banned
2,423
Posts
10
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.
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Just add moz as well. With both of them it'll work on both browsers. :)
 
You must log in or register to reply here.
Back
Top