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)

SIN1488 September 20th, 2010 9:52 AM

TEST


This is what I made in CSS class (This thread, lol) today. 8)

This stuff is fun, and I didn't realize it was this simple, though obviously it takes a long time to really learn it.

Edit:

CSS ping-pong:


:P

seeker September 20th, 2010 9:53 AM

Quote:

Originally Posted by Crimson Stardust (Post 6169967)

so how do i fix it?
to make the navigation working?

Follow this tutorial exactly and you wont have problems any longer.

SIN1488 September 20th, 2010 2:10 PM

Using CSS, is it possible to make an image that changes every time you click on it?

seeker September 20th, 2010 2:20 PM

Quote:

Originally Posted by SIN1488 (Post 6170571)
Using CSS, is it possible to make an image that changes every time you click on it?

Not here on PC, that would require HTML, and I'm not sure what else... Possibly a form of php rotation, but the bottom line is that it cannot be done on PC sadly.

Mika September 20th, 2010 2:23 PM

Formatting for Dummies or People Who Don't Speak Geek
 
So I've noticed lately on PC that we don't really have a cohesive notion on how formatting should be done. In some cases it's laziness, in other cases it's ignorance, and in other cases, it's just a lack all around of general organization. I decided to make a brief guide to see if I couldn’t help out a little. :3

Before we do anything else, I want to talk about the automatic formatter that's built into the V-Bulletin Post System. You know how when you copy paste a post for pc from Microsoft Word, the font you’re using and the color of your text tend to carry over? [Well, for most people anyways, Safari doesn’t support this system so you Mac Users can stare at me and go ‘wuuuuut’ if you’d like. :3] That’s called the ‘WYSIWYG System’ or ‘What You See is What You Get’. I could tl;dr but I’ll avoid that and be frank. It takes away you having to do the BBC code guesses at what you want and does it for you.

It has its ups and downs, its pros and cons.

What a lot of people I’ve found don’t know is that you can chose not to use this system.

http://img.photobucket.com/albums/v190/nekomika/pcguide/postbutton.png

See that highlighted button? That turns the WYSIWYG system on and off.

Here’s an example of each.

On:

Off:

The big difference is one view has the BBC code displayed and the other doesn’t. Seems like it’d be neater to just use the WYSIWYG system, right?

WRONG

If you’re just doing a simple copy and paste, it’s pretty simple right? It never messes up, right?

WRONG!AGAIN!

Let’s take a brief moment and talk about Forum Themes otherwise known as Forum Skins. [From now on in the guide we’ll call them skins just for the hell of it. Because I’m lazy.]

PC has a ton of them. In truth, I’ve yet to find another site with as many customizable skins for you to view the forum in. That’s really cool, it makes the forum so much more user-appealing because you’re not stuck in a god awful theme that you hate until the site admins decide to change it but it also causes a few difficulties. The primary issue here comes from the fact that each individual skin looks different. I know, simple right? But really, it’s true. Each skin has a different color scheme, Midnight Misty is dark, Pawlicious is green and Forever Standing is blue. It doesn’t seem like a huge issue at first but if you know anything about how websites are done up, you should know about a magical thing called ‘CSS’.

Helper Kotone says: Cascading Style Sheets, or CSS, is a formatting code system that changes the default colors of your normal text, your links, the backgrounds, the font and the font size all in one little package. It’s like a [ size= ] or a [ color = ] bbc code except it works for the whole page, not just the post you’re working on.

The CSS is different for every single skin. No two skins have the same css.

If you’re not sure how to change your skin or if you don’t know which one you’re using, click the spoiler and follow the instructions.
Spoiler:
The easiest way to change your skin is to scroll down to the bottom of whatever page you’re on and select a skin from the drop down:



If you want to see thumbnails of the skins, do the following:

Click this:


Followed by this:


And pick one.

Now, if you’re a little confused on CSS, don’t worry you don’t need to master it to post well on PC. You just need to understand what it does.

Here’s an example of a post I made in the DCC on my default skin of choice, Forever Standing:

http://img.photobucket.com/albums/v190/nekomika/pcguide/css1.png

Now, here’s the same post in Midnight Misty.

http://img.photobucket.com/albums/v190/nekomika/pcguide/css2.png

See how the color of the text in my post changed? That’s CSS at work. Now, when you’re not using the automatic formatter of the WYSIWYG system [i.e.: you’re just using plain text] you don’t need to worry about this because it’ll automatically change the color of your font to match the default font on whatever skin any particular person is using. If you use the automatter however, you’re locked in with that color because the [*color=][/color] tags over ride the built in CSS.

Here’s an example.

I made this post:

http://img.photobucket.com/albums/v190/nekomika/pcguide/tcti1.png

in TCTI awhile ago. I copy and pasted it directly form Word and the black font I was using in word carried over. On Forever Standing, you can read the post just fine, so it should be fine on all skins, right?

Wrong.

Here’s the same post in Midnight Misty:

http://img.photobucket.com/albums/v190/nekomika/pcguide/tcti2.png

As you can plainly see [or not see], the text is almost, if not completely, impossible to read.

This is because I forgot to make sure in the WYSIWYG system and make sure that there were no color tags brought over when I copy pasted from word.

It’s not too terrible here, this is just black font, but if you take a bright blue font and put it on a skin like Blossom Shower, you’re going to be causing inexplicable pain agony and torture on whoever tries to read your post. This is why you sometimes see people rage on you to not use colored posts. They’re not doing it because they’re trying to shoot down your creativity, it just freaking hurts to look at. It can be so painful that people can’t read beyond a basic skim what you’re saying and that’s sometimes why you don’t get the responses you want if you chose to use a colored font.

Now, if you really really like using a colored font, there’s a way to do it more professionally without causing said pain and torture upon your fellow readers. The way we do this is with a CSS code of our own, to make a background color that carries over no matter what skin you use so you can use whatever color you like and you won’t risk permanent injury to your potential readers.

Okay, so you want to use colored text but you don’t want people to whine about the fact it’s colored? No big deal, we can help you. Remember, the BBC code and everything you do code wise in the little post box over rides the CSS so all we need to do to make sure your text is readable is put our own background behind it. You’ve seen this, without a doubt, in signatures on PC but it can also be used in other places, including threads.

Take the Pokemon Claim thread for example. click me!

See how Lightning made the background of her text area pink? That doesn’t change no matter what skin you switch to. The colors on the pink background won’t change either. What she used here was a combination of CSS and BBC code. It’s much more complicated than what we’re going to do but I thought I’d show you an example of this sort of thing in action.

Okay, so let’s begin.

We’re going to make a new post and we’re going to do it with some CSS so we can use a pretty colored font.

First off, we’re going to click the WYSIWYG button.

http://img.photobucket.com/albums/v190/nekomika/pcguide/postbutton.png

This means we’re inputing all the code by hand. This is also known as ‘hard coding’.

In the little window, we’re going to put the following:

[ css-div="overflow:auto; background: #FFFFFF; border: 1px solid #000000;"]Insert witty text here [/ css-div]

This looks like:

Insert witty text here
...when the spaces are removed from [ css-div] [/ css-div]

Helper Kotone says: Did you notice instead of ‘red’ ‘black’ ‘white’ and ‘blue’ we put 6 numbers? That’s called a hex code and it’s how the computer displays colors. Each color has an individual hex code. If you have a program like photoshop, you can get the hex code of the color you want to use by double clicking the foreground color and copy pasting the code. If you don’t have that, you can google the name of the color you want followed by ‘hex code’ and it’ll spit it right out. There are also hex code charts you can use, just look for them!

#000000 = black
#FFFFFF= white
Now, at the moment, all we’ve done is change the background and added a border to the area around our text. We haven’t changed the font color and if you were to switch to Midnight Misty, we’d have the same problem we had last time with being unable to read stuff. Now we’re going to add a tag to our css-div bbc tag to override the color crimson. It looks like this: ohaiderei’mcrimson.

So here’s the code we’re going be using now:

[ css-div="color: #DC143C; overflow:auto; background: #FFFFFF; border: 1px solid #000000;"]Insert witty text here [/ css-div]

Which, again with the spaces removed, looks like this:

Insert witty text here

Now that we’ve added that color tag, we’re going to have the same color no matter what skin we’re on in that box. Even if we change to Midnight Misty, we’ll still have the red font color there on a white background and we’ll be able to read it.

Onto the next step, adding some cell padding!

I think the text looks a little cramped. Let’s give it a little bit of wiggle room. With cell padding, the higher the number the more pixels it is away form the edges. The lesser the number, the closer to the border it creeps. For the purposes of this tutorial, we’ll use 10px but you can feel free to mess around with the number when you use your own CSS stuff. [Remember, the preview button is your best friend ever.]

[ css-div="color: #DC143C; overflow:auto; background: #FFFFFF; border: 1px solid #000000; padding: 10px; padding-right: 10px; padding-left: 10px;"]insert witty text here~
[/css-div ]

Remove the spaces...

insert witty text here~


See how less cramped it looks? Now we’re getting somewhere. ^-^ Now to round the edges. Again, the higher the number the rounder the edges. We’re going to use 3 for this tutorial.

[ css-div="color: #DC143C; overflow:auto; background: #FFFFFF; border: 1px solid #000000; padding: 10px; padding-right: 10px; padding-left: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px;"]insert witty text here~
[/css-div ]

Spaces go poof and

insert witty text here~

Viola!

Helper Kotone says: If you like the edges boxy, you’re going to want to delete the parts in hot pink font from your bbc code.

If you’re more code savy, this: -webkit-border-radius: 3px; -moz-border-radius: 3px; is the part that needs to go poof as it’s the thing making your edges round

So you’ve got the basics, now how do we make it all ~fabulous~?

It’s sorta like Las Vegas.

Whatever happens in the CSS box stays in the CSS box.

You can do underlines and boldy tags and slanty danty tags and slashy throughs.

You can also do:

HALO



’Z NICE



and everything in between.

You can

CENTER

your text

You can make it

Go Right
.

You can put an http://img.photobucket.com/albums/v190/nekomika/avies/thlight.jpg in, you can do anything you want. You can even change the color and stuff like that.


So there you have it, the basics and how-tos on how to make things pretty and a reason why using green font without a css background is grounds for torture and pain and suffering grumbles from your readers.

A few final comments:

  • Don't use a black background. I know, it's cool, it's emo, it's hip, it's scene but uh, it looks like crap and it can give people headaches. Dark grey is a far better alternative but I'd avoid really dark colors all together. Remember, there are old people on this site and our eyes aren't like your young whippersnapper eyes.
  • Don't make the text too small, don't make the colors too close in contrast.
  • Just use a bit of common sense and don't go over the top. It's not worth it, no matter how cool you think it'll look.


Credits / Resources


Jared for the graphics outside the screenshots
Beachy for teaching me the PC version of CSS
Luke, Ausaudriel and the rest of the #thepokecommunity gang for the moral boost to write this thing
Alter Ego, Jared and Manipulation for beta-ing this thing from all aspects [Grammar, Graphics and CSS respectively]

I don’t think I’m forgetting anyone but if I am, tell me and I’ll add you. <3

SIN1488 September 20th, 2010 2:26 PM

Quote:

Originally Posted by Abnegation (Post 6170586)


Not here on PC, that would require HTML, and I'm not sure what else... Possibly a form of php rotation, but the bottom line is that it cannot be done on PC sadly.

Hmm... I kind of figured you would need more than CSS for something like that. My idea was to make something almost like one of those pokemon eggs people put in their sigs, except it would change every time it was clicked.

How do those work then? By clicking on them, does it send something to the website it's linked to, which changes the information on that page, in turn changing the image on the signature? Or are those made of a code that works alone on PC?

seeker September 20th, 2010 2:30 PM

Quote:

Originally Posted by SIN1488 (Post 6170600)
Hmm... I kind of figured you would need more than CSS for something like that. My idea was to make something almost like one of those pokemon eggs people put in their sigs, except it would change every time it was clicked.

How do those work then? By clicking on them, does it send something to the website it's linked to, which changes the information on that page, in turn changing the image on the signature? Or are those made of a code that works alone on PC?

They link to another site which when receives a hit, it counts it and levels up the egg or whatever the case may be. So, when an egg evolves for example, the image of the link changes, the server automatically keeps the same link but changes the properties of the image when need be. I think that is how it works at least.

SIN1488 September 20th, 2010 2:36 PM

Quote:

Originally Posted by Abnegation (Post 6170607)


They link to another site which when receives a hit, it counts it and levels up the egg or whatever the case may be. So, when an egg evolves for example, the image of the link changes, the server automatically keeps the same link but changes the properties of the image when need be. I think that is how it works at least.

Yeah, that makes sense. Well, since I won't really be able to do that, it's time to go back to the drawing board. >_<

Charizard★ September 22nd, 2010 2:35 PM

Just wondering, is there a CSS code that allows you to get different fonts? Other then the listed ones?

jigglyppuff8 September 22nd, 2010 4:07 PM

You can already do that. You just have to know the name of the font and hope that everyone else has it installed on their computer.

Otherwise, people won't see the font you chose.


Serene Grace September 24th, 2010 12:35 AM

There are some advanced API's being implemented to create a font library that expands the amount by a lot. Basically, soon, you will be able to upload a font onto a site, put a little code in and everyone can see it.

Charizard★ September 26th, 2010 4:47 AM

Oh, thanks :D

And I have another question, is this a CSS code (Font);
http://www.pokecommunity.com/showpost.php?p=6182687&postcount=3

How do you do that? :O

seeker September 26th, 2010 4:55 AM

Quote:

Originally Posted by Charizard★ (Post 6182827)
Oh, thanks :D

And I have another question, is this a CSS code (Font);
http://www.pokecommunity.com/showpost.php?p=6182687&postcount=3

How do you do that? :O

The font code example: font-family: Tahoma;
The shadow code example: text-shadow: 2px 2px 2px #000000;

Output

If you're using Firefox, get yourself the firebug add-on.

Charizard★ September 26th, 2010 7:11 AM

Ah, okay thanks, I have another question, how do you use firebug? I mean like to find codes and such :P

0m3GA ARS3NAL September 27th, 2010 10:09 PM

I've got a question, I'm sorry if this has already been asked, and I don't usually do this but I'm in a HUGE rush.

So, is it possible to override the CSS markups of a website?

Like, say I wanna mess with the width of EVERYON'S posts, if I really wanted to, could I?

(I don't want to, this is going to be reference for a site I'm proposing add the CSS-DIV tags to...)

Opposite Day September 28th, 2010 3:31 AM

I need help.




It should be fairly obvious what I'm trying to do, yet with my meager knowledge of css I'm unable to come up with a solution by myself. In other words, it would be greatly appreciated if anyone could help me out with placing the dragonite correctly according to the battle screen. (when I try to input "margin-top: 0px;" for instance, it decides to herp a derp and get below the nidoqueen.) I'm really stuck :/

Also, does anyone know if there's a code that automatically crops anything that's outside the background-code? For instance, if I were to have the full back sprite of Nidoqueen, does a code exist that makes it appear like it is now w/o me having to crop it manually?

Sorry to bother all of you with my petty problems.

jigglyppuff8 September 28th, 2010 11:20 AM

Quote:

Originally Posted by 0m3GA ARS3NAL (Post 6187193)
I've got a question, I'm sorry if this has already been asked, and I don't usually do this but I'm in a HUGE rush.

So, is it possible to override the CSS markups of a website?

Like, say I wanna mess with the width of EVERYON'S posts, if I really wanted to, could I?

(I don't want to, this is going to be reference for a site I'm proposing add the CSS-DIV tags to...)

Stylish may be what you are looking for.

Crimson Stardust September 29th, 2010 7:46 AM

Okae,i don't know if this was answered or this is a simple solution to it..
okae basically this is what happen,this is the css when i want to post
Spoiler:

UPDATES



[css-div="background-color:#666666; color:violet; border: solid 3px gold;"]
First up is BLISS CANYON.If you wanna see the full picture,tell me.
This is the route right after route 1 you need to go thru before reaching the second town.

fillers
fillers
fillers

Okae,im done with the updates.I got a surprise news today,my tiles are
confirm be inserted and my friend gonna implement few
cool stuff in it too.
So you can say this is a test rom,or test demo/alpha for you guys to try out before i got my rom back,don't worry,this test is also gonna be cool,all the maps i make here is not for fun,i make them with love,lol,..hahax,basically i map them carefully.
Im gonna implement few stuff in such as berry trees[idea from astar],but still have not figured out how,and more cool sidequest.xD

[/h1][/css-div*]


But after i post,the css will look weird like an extra thing come out
then when i edit the post,it will show this
Spoiler:


UPDATES



[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"]
First up is BLISS CANYON.If you wanna see the full picture,tell me.
This is the route right after route 1 you need to go thru before reaching the second town.




Fillers
Fillers


Okae,im done with the updates.I got a surprise news today,my tiles are
confirm be inserted and my friend gonna implement few

[/h1][/css-div*]






this is what happen,a whole lot thing come out

Spherical Ice September 29th, 2010 7:56 AM

I'm 99% sure this problem is because you're using the WYSIWYG (whizzy-wig BD) editor for text. Edit your options, then change your text format option, or "Message Editor Interface", to Standard or Basic, then with your original code again.
A quicker way is just clicking the button in this image:
http://img.photobucket.com/albums/v190/nekomika/pcguide/postbutton.png
would've helped if I read the thread first.

Oh, by the way, you can wrap BBCode in [noparse][/noparse] tags, instead of adding asterisks and what have you.
[b]See?[/b]

seeker September 29th, 2010 10:21 AM

Quote:

Originally Posted by Crimson Stardust (Post 6190476)
Okae,i don't know if this was answered or this is a simple solution to it..
okae basically this is what happen,this is the css when i want to post
Spoiler:

UPDATES



[css-div="background-color:#666666; color:violet; border: solid 3px gold;"]
First up is BLISS CANYON.If you wanna see the full picture,tell me.
This is the route right after route 1 you need to go thru before reaching the second town.

fillers
fillers
fillers

Okae,im done with the updates.I got a surprise news today,my tiles are
confirm be inserted and my friend gonna implement few
cool stuff in it too.
So you can say this is a test rom,or test demo/alpha for you guys to try out before i got my rom back,don't worry,this test is also gonna be cool,all the maps i make here is not for fun,i make them with love,lol,..hahax,basically i map them carefully.
Im gonna implement few stuff in such as berry trees[idea from astar],but still have not figured out how,and more cool sidequest.xD

[/h1][/css-div*]


But after i post,the css will look weird like an extra thing come out
then when i edit the post,it will show this
Spoiler:


UPDATES



[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"][/css-div*]
[css-div="background-color:#666666; color:violet; border: solid 3px gold;"]
First up is BLISS CANYON.If you wanna see the full picture,tell me.
This is the route right after route 1 you need to go thru before reaching the second town.




Fillers
Fillers


Okae,im done with the updates.I got a surprise news today,my tiles are
confirm be inserted and my friend gonna implement few

[/h1][/css-div*]






this is what happen,a whole lot thing come out


Issues are arising because your CSS coding had BB code around it, such as colours and blondness etc.

This is correct:
[css-div="background-color: black; text-spacing: -2px;"]

This is not:
[css-div="background-color: black; text-spacing: -2px;"]


So, keep your coding unformatted. Befriend this button: http://www.pokecommunity.com/images/editor/removeformat.gif, wrap it around you CSS coding.

countryemo September 29th, 2010 3:54 PM

Ok so I am trying to learn CSS, which is confusing since I cant understand any kind of code. I can manage hex # for colors though :D

Anyways i have the firebug add on (I think this was the reason I switched from Google Chrome), I open it and I can't tell whats what mostly, since it goes through more then just 1 persons post or thread. I was able to mess with youtubes name :P.

Any help with this? I would really like to learn something :)
Sorry for all the useless info


seeker September 29th, 2010 4:04 PM

If you're using firebug and want to inspect a code, you simply right click the area of the page you want to look at and you choose "inspect element". This will bring up all the CSS and HTML (or scripts) in that area. However, you should attempt learning CSS coding as best you can before taking a look as most won't make much sense without a little former knowledge of the properties. So I recommend looking at the various tutorials and resources scattered throughout the thread, the first post should hold plenty of links to get you started.

0m3GA ARS3NAL September 29th, 2010 6:03 PM

Quote:

Originally Posted by jigglyppuff8 (Post 6188049)
Stylish may be what you are looking for.

Umm...
Quote:

Originally Posted by 0m3GA ARS3NAL
(I don't want to, this is going to be reference for a site I'm proposing add the CSS-DIV tags to...)

Already had stylish, but thanks, heheh.

Crimson Stardust September 29th, 2010 6:07 PM

Quote:

Originally Posted by Abnegation (Post 6190680)



Issues are arising because your CSS coding had BB code around it, such as colours and blondness etc.

This is correct:
[css-div="background-color: black; text-spacing: -2px;"]

This is not:
[css-div="background-color: black; text-spacing: -2px;"]


So, keep your coding unformatted. Befriend this button: http://www.pokecommunity.com/images/editor/removeformat.gif, wrap it around you CSS coding.

I don't quite understand this and ice solution..
what wrap around the css?

donavannj September 29th, 2010 6:58 PM

You're using the post editor that shows you what it will look like as you post it, and does not show you the code. This is called a WYSIWYG editor. Select all the text for your CSS and click the button that says "Remove Text Formatting" when you hover over it, otherwise your CSS code WILL NOT WORK.

Alternatively, you could turn off the WYSIWYG editor on your "Options" page in your User CP, and then you'll be able to see all the coding that goes into your posts.


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.