Search the Community

What's Popular I don't worry about this, personally. I know what *I* like and I know what I like making, so that's all I really focus on. Obviously, if I'm doing a request or challenge or aiming for something specific, I'll be more open to things I don't normally code for, and I do like to experiment so I'm not stuck in a rut, but I'm not really interested in jumping on band wagons. (Seriously, they're too fast for me to chase them down.) Tips Mockery -- as in, mock-ups. So many mock-ups. I always, always, ALWAYS design a skin in Photoshop first. (Well, I say always, but it used to be Paint Shop Pro before Corel got uppity.) I never start actual coding until I have a map first (though I often do take side roads and frequently end up in a different pub than intended). I normally start out with a 1440x960 (980? I forget the specific resolution) canvas, then add guides for the different resolutions (1220x960, 800x600, etc) plus for the header space. (800x300 is the max I normally use for actual banners, but I just made a couple of skins where the banner is actually the background of the main wrapper so it stretches much further down. I don't think of those as banners, though.) With these guides in place, I know what space I've got to work with. I like to play with the full 1440 available to me, but I also try to make sure the actual working parts of a layout (the forum content) is within the smaller areas so people with smaller screens can still use it. (Guides are generally just black fill turned to varying degrees of transparent.) Use the JCINK default skin CSS (or the IF one) as a foundation. A lot of what I do is just going through that thing so I don't forget stuff (though I always forget to do pagination tabs. Ugh). Borrow from yourself! Don't start from scratch on an element you've already written. (For instance, if you move the userlinks someplace else, like I did with my recent Fear the Reaper skin, you can borrow that code for another skin and touch it up to match rather than figuring it all out again.) Skinning is actually a lot of numbers and mathematics (too much for my poor brain, sometimes) so keep a calculator handy. It's easier to figuring out where div.hats should go if you can factor in padding and margins (padding: 10px; plus margin: 10px; plus go down about 100px; equals heck if I know, where's that calculator app). GET WEB DEVELOPER (for Firefox. I think it's available for Chrome too, but I don't know for sure.) With this add-on, you can identify the names of all the elements you're trying to style (because JCINK's default CSS isn't annotated and doesn't always make sense). This add-on makes things so much easier! Un-maximise your window periodically to make sure you haven't used up too much of your "working canvas". Practise, practise, practise (or is it practice?)! When I was first learning, I made so many neopets layouts I thought I was going to bleed skeiths, but it's the best way to really ingrain what a div is (if you don't already know) and become familiar with how all the different elements work together (which ultimately helps with trouble-shooting because you can't fix a broken div if you don't know how float works). Start small! If you're making skins to learn (as opposed to making usable ones while you learn), just stick with colours for now and move on to patterns and textures as backgrounds later. It's much harder putting images together in an eye-pleasing way than it is to get a palette that works well -- and at the learning stage, you shouldn't be worrying too much about the art of a layout so much as if it works. That said, do something that makes you happy. I've abandoned layouts before because they were fugly and there's no point in clawing my eyes out over something even I don't want to use. The skins I made for EF were always, first and foremost, designed to please me. That the members enjoyed the skins I made was just gravy, really. (Reduced-salt thick yummy chicken Bisto gravy.) This is why I've abandoned my Proboards skins, btw. PB and I just really don't get along. I'm tired of wrangling the kids while he trots off to see the world so I just threw up my hands and dumped the kids with his grandma. So, actually, count this as another tip: don't struggle with something if you're not enjoying it. I try different forum software from time to time just so I don't get complacent, and there's something appealing about wrastling with the big boys (like IPB), but there's a reason I tend to default to JCINK (I skin to relax, not so I'll be bald before I'm 40) and there's no shame in that -- especially while you're just starting out. (I say this because there's a lot of ridiculous shaming going on these days for JCINK skinners and I think that's so ridiculous I've now said ridiculous three times in one sentence.) Start simple! Don't worry about fading stuff out and making things hover if you don't yet know how to position a logo where you want it. (On the other hand, some of the things I've learned about skinning are because I wanted to learn how to do this one thing that looked really awesome on this one site so I set out to learn that one thing even though I was still floundering with the basics. Incentive is a great motivator.) ANNOTATE YOUR CSS. ANNOTATE YOUR BOARD WRAPPERS. ANNOTATE YOUR FACE. ANNOTATE EVERYTHING. You don't want to come back to your skin in three days, after a Baileys-and-reindeer bender (*eyebrow waggle*) and not remember what #blargh { this: element (sucks); } is supposed to do (especially if it's written on your actual skin because of said bender). To annotate (put comments in) CSS, you do it like this: /* This is a comment! Your browser can't read this. For some reason, the stroke and asterisk symbols make your browser BLIND!!! I don't really understand why, but who am I to mock invisibility cloaks? */ (If your comment stretches over multiple lines, you should really have a /* and a */ enclosing each line. However, the JCINK default CSS has this at the very top and the browsers can't see it (because of invisibility cloaks), so whatever. /*=============================================== * * Jcink.com Forum Hosting Stylesheet * ============================================== * #Version: 1.0.0 *=============================================== */ Don't be afraid to experiment. Don't think that the banner has to be centred at the top and a dead rectangle. Don't think you have to have the submenu links (home, help, search) under the banner (or at all, for that matter). So long as all the necessary bits (and the copyright) are intact and usable, you can pretty much do whatever the heck you want with your JCINK. (Except blinding orange. Please no blinding on the orange). Don't be afraid to ask. I have an elf trapped in a bottle a friend that I make vet my skins. The fact he's a not-very-feminine guy helps stop me from turning everything pink and frou frou. He's also a nice ego boost when I'm starting to hate the skin I'm working on (or myself for thinking "oh my god that looks like puke" would work as a colour scheme). If you're not sure how to do something (or if you should do something), bang on some drums and scream like a Banshee. Someone's bound to get curious sooner or later and offer their advice in exchange for cookies (the gooey kind. I don't like breaking my teeth on the crunchy kind). ;D Use % and/or em whenever possible. You don't have to make layouts that are completely fluid (as in, stretch to fit your browser no matter how big or small your screen size), but it's a good idea to make sure your font size stays big enough to read no matter what. 12px Arial is going to be really, stupidly tiny on some screens, but 1em will make your font go to the gym and pump up to look the same on any screen. For that matter, don't get stupid about font sizes to begin with. 8px Arial might look cute to you, but you don't want your users to wind up needing glasses. They're liable to charge you for it and specs are expensive. Make sure your skin is legible and usable!! You could have the best looking layout in the world, but if you can't actually click on links because that awesome gradient overlay is blocking your mouse (*cough*like I accidentally did with the first version of my Gossamer&Lace*cough*), your site's going to die pretty quick. To that end, TEST TEST TEST. I never release a skin until I've clicked on pretty much every link I can get my hands on -- and even then, I still forget stuff (those thrice-damned pagination links, ugh). If you can install your layout on a working site, all the better! (When I was running my own site, I'd have skins in the making for months that only I could see and use, and 100% guaranteed I'd find something I'd missed or that needed fixing just before I released it to my members.) If you're using a test board rather than a working site, pretend you're an elephant trying to stomp on a mouse and crash around until you break stuff. You'll thank me later when you don't have to deal with an outcry of "but where's my pretty signature gone!?" TL:DR; Start with mock-ups before you begin with the actual coding. It'll make your life SO much simpler. Resources So many. Seriously, it's hard to really point you in any one direction. JCINK and InvisionFree both have their own support forums, and there are tons more dedicated to skinning for them. Mostly, though, I just Google whatever I'm struggling with. "list-style-type background images". "box-shadow" (that's a new one on me! but it's so cool I'm kind of overusing it now. Is there a limit on how often you can box-shadow something?) "How to get wine stains out of your forum". You're often just as likely to get help from a general CSS tutorial as you are from a JCINK or forum-specific tutorial. That said, there was a guide for IF at one point that took you step-by-step through skinning an IF board. It was basically a checklist (which is a good idea to have. I need to give myself one of those, actually, I always forget something *cough*pagination*cough*). I can't find it on a quick google-glance, but it might help you (if you can find it). But, yeah, resources really depend on what element you're looking for help with. For instance, Max Design has a bunch of tuts specifically for making lists.