The PokéCommunity Forums

The PokéCommunity Forums (https://www.pokecommunity.com/index.php)
-   Internet & Technology (https://www.pokecommunity.com/forumdisplay.php?f=57)
-   -   CSS Help & Resources (https://www.pokecommunity.com/showthread.php?t=200899)

Noire April 30th, 2014 8:17 PM

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]

Tsutarja April 30th, 2014 9:04 PM

Quote:

Originally Posted by Noire (Post 8225561)
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
http://ps3trophies.com/images/games/NPWR01663/trophies/42L059ce8.png


Code:

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



Noire April 30th, 2014 9:20 PM

what is this magic?
I swear when I went to put it in my signature without the symbol, it never showed up ;////; jeeze...just my luck XD

Dter ic May 8th, 2014 8:54 AM

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 May 8th, 2014 8:57 AM

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.

Ninja Paladin May 10th, 2014 1:24 PM

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

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

Oryx May 10th, 2014 2:05 PM

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.

Ninja Paladin May 10th, 2014 3:34 PM

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 May 14th, 2014 1:02 AM

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 May 14th, 2014 1:38 AM

Quote:

Originally Posted by Samuraipizzacats (Post 8249887)
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 May 14th, 2014 4:12 AM

Quote:

Originally Posted by Peitharchia (Post 8249904)
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 May 14th, 2014 4:24 AM

Quote:

Originally Posted by Samuraipizzacats (Post 8249979)
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 June 7th, 2014 11:23 AM

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 June 7th, 2014 1:01 PM

Quote:

Originally Posted by Poki (Post 8289649)
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:

Code:

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



Poki June 7th, 2014 1:09 PM

Quote:

Originally Posted by Zach (Post 8289778)
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:

[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 June 11th, 2014 8:16 AM

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 June 23rd, 2014 6:23 PM

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 June 23rd, 2014 6:40 PM

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 June 23rd, 2014 6:43 PM

Quote:

Originally Posted by Oryx (Post 8314738)
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 July 7th, 2014 9:12 PM

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 July 8th, 2014 12:27 AM

Quote:

Originally Posted by Juno (Post 8336442)
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 July 8th, 2014 4:47 PM

Quote:

Originally Posted by Zach (Post 8336673)
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 July 11th, 2014 2:18 PM

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 July 11th, 2014 2:27 PM

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

Poki July 11th, 2014 2:51 PM

Quote:

Originally Posted by Oryx (Post 8343815)
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.


All times are GMT -8. The time now is 11:04 PM.


Like our Facebook Page Follow us on Twitter © 2002 - 2018 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2016 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.

Acknowledgements
Use of PokéCommunity Assets
vB Optimise by DragonByte Technologies Ltd © 2023.