write a reply

Coding a skin for beginners

pronounsshe/he/they/the bag
75written posts
sableearned bits
offlinecurrently
sable
Junior Member
sable Avatar
I love myself but I hate the way I am
Hypothetically: I want to make a site , and I want it to look cute, but I also don't want to use a premade skin for whatever reason. Assuming I have a pretty mediocre understanding of HTML/CSS web design, how much of a "difficulty spike" would I be facing to personally design and implement a working skin for a forum site? How much time could I expect to spend on it? Where should I go to get feedback?

Basically, if you've worked on a skin before, I'd appreciate your advice on, I guess, where to start.

Bonus questions: in the case it is too underwhelming at my example skill level, how I can improve my understanding of HTML/CSS to be able to tackle a skin in the future? And is it easier to implement code for ProBoards or Jcink-- does it matter?
phantom of the black parade
pronounsshe / her pronouns
4,373written posts
Kuroyaearned bits
offlinecurrently
Kuroya
Part of the Furniture
Kuroya Avatar
what do you want to know? my height, hobbies, quirks, the color of my underwear?
it's been a hot minute since i've really skinned proboards, so i won't speak for it - i personally find it a nightmare to skin for by this point, but that's because i find it very messy to work with for how i prefer to go through the skinning process, but i know a lot of newer coders prefer it because it has options beyond just throwing you into the deep end with the wrappers + template layouts + css, so your mileage may vary.

but what i can speak for is jcink - which in my opinion, if you can successfully edit and manipulate a premade on jcink, you can almost definitely skin for it. granted, you might not be able to produce something with all the super fancy bells and whistles that you might see on some of the higher-end skins (like the varying board layouts or running animations or the like) but you should be able to produce something functional and clean, which is what's more important than all that fancy stuff anyway.

i've been skinning jcink for four years now, give or take, although i guess you could say i've been skinning for longer since i've done a lot of heavier-end coding edits for the skins i use (to the tune of "completely ripping out mini-profiles or headers to redesign them from scratch to better suit my needs") for closer to six or so, both on proboards or jcink. i personally don't find skinning to be too much more difficult than coding a template or those smaller portions of a skin, but then i also don't tend to do things that require me to have to do much with javascript.

my personal process for skinning is to basically design the entire layout on codepen first - header, footer, board layout, info center, thread layout, member list, post layout with mini-profile, profile layout. all the big stuff. when i know what i'm doing design-wise, i've managed to pull together a skin in a week or two, but i've also taken more than a month on a given skin; in either scenario, it's probably about 70+ hours of work just to get that first step done. but the flip side of that is that it's honestly pretty easy to convert it from that raw codepen into the actual site skin since jcink's very transparent about their variables for the html templates (basically all the individual layout things like boards + threads + posts + profiles + mini-profiles) and the wrapper (header + footer + anything else static in the design like a sidebar). there's a few things you learn how to do via workarounds or that are missing (like the <% SUBACCOUNTS %> variable for the dropdown or how to add avatars to the thread layout or everything with the macros) but it's not that much. for me, an entirely finished skin is probably about 80-90 hours' worth of work between the initial codepen design, converting it over, and then doing all the little on-site tweaks like redesigning the post buttons and all that.

my best advice for "i can't skin and i don't know how" is honestly to just..... start messing around with the premade skins. because you'll learn more actually working with the variables and seeing how people did xyz thing than you will just. generally brushing up on stuff. (well. that and learning how to do if/else statements from jquery since i use those a lot in skinning and i remember jquery was basically a staple for proboards). feedback is probably more gonna be hit or miss just because like..... design is hard, i probably only like the designs of half the skins i've made in those four years i've been actively doing it. but you're also not going to really get better at it short of doing it and learning what works well and what doesn't so uh. yeah.

i'd also recommend getting p familiar with caution to the wind if you intend to go with jcink - the site is more of a rl community but they've been around for actual years so they have a really big library of coding resources, which is nice for things like a highlightable code box or a toggleable cbox or the like. (they also have a lot of jcink coders there, so it's not a bad place to go for coding help for if something breaks or you reach a dead end.)
last edit on Sept 20, 2020 18:20:08 GMT by Kuroya

0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
For me, skinning (at least for Proboards) is somewhat similar to coding a template, and knowing that beforehand greatly helped me when it came to teaching myself how to skin. So, to answer your question: If you already have some understanding of HTML/CSS, I don't think it should be much of a problem. Just take your time to get familiar with the layout templates and the style sheet. Another good way of going about it is asking another skinner if it would be okay for you to pick their skin apart to see what goes where and how different things work.

I think the "difficulty spike" is very different from person to person, but once I learned how to code templates and moved on to skinning, it didn't take long before I started figuring out how to to do it, little by little. It takes a lot of time, and depending on how much you wish to edit the skin, it could take anywhere from a day to weeks (or more) per skin. At least, that's my experience.

As for whether Proboards or Jcink is easier, I'd say that comes down to personal preference. I've skinned for both and I prefer Proboards because I find it so much easier to navigate and code for, whereas Jcink feels very clunky and is more work to code for than necessary. So, I'd personally recommend starting with Proboards. But again, personal preference! :) Just go with whichever of the two you feel more comfortable with!
86written posts
cinearned bits
offlinecurrently
cin
Junior Member
cin Avatar
If this is not love, what should we call it?
kuroya hit a lot of good points if ur going to be starting out on jcink!!

if you're not super familiar with HTML/CSS i would say make templates to sort of just get a gist of how everything sort of works? and to do it on something like codepen or liveweave or webmaker, just so you can see real time what you're doing b/c it helps things click easier.

premades are a very good way to help you learn how coding works, like general structure and layout of the html and such?? i would also suggest getting a tester site and making things like row4 etc etc different colours so you can figure out what affects what (inspect/page source can also do this for u too!!!) jcink has a pretty good general visual guide here: link!

in terms of difficulty spikes, i think if you're just making something without too much js, you should be fine!! and for resources, on top of caution i would also suggest checking out wecode for other scripts and tutorials as well! there's a lot of scripts for things like sidebars and pop-up modals that come with great explanations as well!

it depends v much on the design and person when it comes to time spent on coding the skin! for example, my first jcink site only had a miniprof and custom board so it probably took me less than 50 hours. on the other hand, a full html template + skin takes 80+ hours for me. but im also a slow coder and tend to revise initial designs a lot!

i usually just go to my friends for feedback because it helps with figuring things are compatiable / too dark / too light / i have the font install on my computer and forgot to install the actual google font in the skin. but resource sites can also give you another set of eyes as well! jcink support is great if you need help because you somehow broke the skin or if you're not sure if code can actually do that.

oh, a side note is that u can be ur own worst critic. just push thru and finish the skin, you can use it as a base to revise to make something you truly vibe with that way and it's just generally v good exp!! like finishing a skin can really help you learn how to skin.

lastly, i havent coded pb since v4 so i have no other how it functions anymore or the ease of it now. HOWEVER, i can say that i started coding skins on v4 and transitioned into jcink and it made it a lot easier bc it sort of held my hand thru the whole process of what it was to modify a skin / headers / footers.