![]() |
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 |
Quote:
|
Using CSS, is it possible to make an image that changes every time you click on it?
|
Quote:
|
Formatting for Dummies or People Who Don't Speak Geek
http://img.photobucket.com/albums/v190/nekomika/pcguide/topbanner.png 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. :3a guide by mika, top banner by jared 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: 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:
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 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 NICEand 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:
Credits / ResourcesJared 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 |
Quote:
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? |
Quote:
|
Quote:
|
Just wondering, is there a CSS code that allows you to get different fonts? Other then the listed ones?
|
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. 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.
|
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 |
Quote:
The shadow code example: text-shadow: 2px 2px 2px #000000; Output If you're using Firefox, get yourself the firebug add-on. |
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...) |
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. |
Quote:
|
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:
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:
this is what happen,a whole lot thing come out |
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] |
Quote:
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. |
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 |
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.
|
Quote:
Quote:
|
Quote:
what wrap around the css? |
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. |
![]()
© 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.