• Ever thought it'd be cool to have your art, writing, or challenge runs featured on PokéCommunity? Click here for info - we'd love to spotlight your work!
  • Our weekly protagonist poll is now up! Vote for your favorite Trading Card Game 2 protagonist in the poll by clicking here.
  • 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

Hey i have this problems with a css im using which i get from a friend of mine from pc,it seems that the navigation won't work,the one which like if we click on it it will direct to the directory we wanted...the [aurl...]thing..
and another thing,this makes me hate css,i don't know why after evry edit,when i see back the css,it will look different and not only that,when i wanted to see whats the problem and edit thread again,there will be codes somewhere,it appears almost anywhere,then at the end of the code/text it put css-div..i did not do that,and when i delte it and save the same problems appear..
 
Crimson Stardust said:
Hey i have this problems with a css im using which i get from a friend of mine from pc,it seems that the navigation won't work,the one which like if we click on it it will direct to the directory we wanted...the [aurl...]thing..
and another thing,this makes me hate css,i don't know why after evry edit,when i see back the css,it will look different and not only that,when i wanted to see whats the problem and edit thread again,there will be codes somewhere,it appears almost anywhere,then at the end of the code/text it put css-div..i did not do that,and when i delte it and save the same problems appear..
Click to expand...

Post your code please. You may be using this site's gimped form of CSS improperly. It's not meant to enable actual CSS, just that it'll run certain CSS codes if it's told to in a BBCode tag.
 
donavannj said:
Post your code please. You may be using this site's gimped form of CSS improperly. It's not meant to enable actual CSS, just that it'll run certain CSS codes if it's told to in a BBCode tag.
Click to expand...
Its not really mine,it was a friend of mine who never use it anymore and give it to me,he don't know why the reason cause he did not make it,he has his friend to do for him..lol
btw,heres the code:

iTS A BIG ONE SINCE I COPIED THE whole code from my thread so it contains all the things for my thread

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


:P
 
Last edited:
Using CSS, is it possible to make an image that changes every time you click on it?
 
SIN1488 said:
Using CSS, is it possible to make an image that changes every time you click on it?
Click to expand...

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.
 
Formatting for Dummies or People Who Don't Speak Geek

[PokeCommunity.com] CSS Help & Resources

a guide by mika, top banner by jared​
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.

[PokeCommunity.com] CSS Help & Resources


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

Here's an example of each.

On:
Spoiler:


Off:
Spoiler:


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:

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:

[PokeCommunity.com] CSS Help & Resources


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

[PokeCommunity.com] CSS Help & Resources


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:

[PokeCommunity.com] CSS Help & Resources


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:

[PokeCommunity.com] CSS Help & Resources


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.

[PokeCommunity.com] CSS Help & Resources


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
[PokeCommunity.com] CSS Help & Resources
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
 
Abnegation said:


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.
Click to expand...

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?
 
SIN1488 said:
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?
Click to expand...

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.
 
Abnegation said:


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.
Click to expand...

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. >_<
 
Just wondering, is there a CSS code that allows you to get different fonts? Other then the listed ones?
 
[font=apjapanesefont,comic sans ms]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.[/font]

[font=Anime Ace 2.0 BB, comic sans ms]Otherwise, people won't see the font you chose.[/font]

Spoiler:
 
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.
 
Ah, okay thanks, I have another question, how do you use firebug? I mean like to find codes and such :P
 
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...)
 
You must log in or register to reply here.
Back
Top