honestly, real talk? when i'm skinning, i do the entire design in html on codepen and then just replace the values i need to replace with what's in the jcink html templates for anything that's in the webpages (and the page will be divided out into what works in what areas + what it corresponds to) and what's in the global variables for anything in the board wrappers.

if you do webpages that you want to be able to use in the board wrappers (like for affiliates), you have to turn them on and enable include keys for board wrappers, then you pull off the <% BLEH %> key in the general webpages thingie (which you set via the include key input).

custom profile fields can be used in the wrappers and any html templates that give you the option to when going through that section (see the member list for examples). you figure out which one is which now by going to acp > users and groups > custom profile fields and it's the template variable.

<% SUBACCOUNTS %> is one of a few missing global variables - it's the account switcher drop down. i honestly don't remember the rest. i know i typically slowly yeet out a lot of the stuff from the wrapper when i'm ready (the entire logo and skin selector classes go, the <% SHOUTBOX %> gets yeeted immediately, and i pull the navigation out into its own bar typically since that's your "board name > category name > subboard name" list tree thing).

if you wanna cheat on a login / logout button. <script>if('<!-- |g_id| -->' == '2') { document.write("<a href='index.php?act=Login&CODE=00' title='login'>login</a>") } else { document.write("<a href='index.php?act=Login&CODE=03&key=<!-- |auth_key| -->' title='logout'>logout</a>") }</script>

you can code stuff to show/hide based on the <!--g_id--> in the html and then doing css stuff for like. group-1 class vs group-2 class, as an easy hack for different color profiles and such. actually, almost any of the <!-- SOMETHING --> fields, you can actually use to manipulate stuff via if/else statements or css class stuff


i'm half-asleep so i'm not sure how coherent i am or how useful i am actually being but. honestly, like i said, i'd recommend just code the look you want in a live view program like codepen and then copy-paste it into the wrappers and html templates and slowly go through the code and switch out each test variable to the actual needed variable from the wiki or the acp.

i passed out almost immediately after replying last night asdfjkl;

to answer the question, yes and no.

for the heavy lifting? yes, you're largely just coding the html + css elements for about 95% of the visuals, so you can literally design the lion's share of your basic site layout (background/navbars, headers/footers/sidebars, etc) via the board wrappers; the category/board lists + board stats area, subboard/thread lists, the thread/post/miniprofile layout, the profile layout, and the member list via the html templates, and any additional webpages via the webpages. all the css gets chucked in the stylesheets, largely at the end, and you just replace your placeholders with the <!-- |ELEMENT| --> things to call up, say, the poster's name or group id number.

but that being said? there are certain elements of the skin that it's easier to leave alone (like the wrapper + inner-wrapper classes) and others that you can only get at via either editing the css in the stylesheets after inspecting the element (like the pagination) and/or using an indirect workaround such as the macros (like for your "locked/closed/pinned" buttons or if you wanna use the post icons as "warning tags" or the like) or extensive javascript coding (like the recent topics clip). because of that, i pretty highly recommend actually going through the html templates wiki page slowly to figure out 1) which html template corresponds to which area and 2) what options you actually have to tap in different html templates (like the post layout will not pull a parent account id, if you use it for a pm link, but a miniprofile layout will).

(which, as an aside. <!-- |ELEMENT| --> seems to correspond to smaller and/or less complex "fields" to call, like a profile number or avatar url, while <% ELEMENT %> seems to correspond to larger and/or more complex coding elements, like the entire shoutbox or a different html template. so, for example, while you won't need to use, say, <!-- |cat_id| --> for a category layout to work, if you don't add the <% FORUM_ROWS %> to the category header template, you'll not actually get any functioning boards, just the very top category header/footer.)





jumping down to the different board layouts for different boards/categories... i think there's been more than a few times that's been asked, so i'll just link to this thread here since it's functionally the same question and has the same answer (and i think i also linked to other times that the question has been asked as well and i remember leap explained it really well one time, i just do not remember where whoops-)

but also yes von is right for. the way the html templates would work, you'd be putting in every single custom board html into the html layout and then having to individually target it via the css so. for example, if you have 3 different basic html layouts for boards, every time a single board is being loaded, it's having to load all 3 of those layouts and just not display one, so. if you have a lot of boards on + a lot of layouts, you can potentially start making lower-end computers/phones chug a bit to load your index. so. something to keep in mind please, for the rpers who can't always afford powerful specs on their hardware.

yeah, i knew that, but you honestly don't really want to be doing it all that much.

part of the reason why is that if you're using the same class somewhere else in a different template that might be on a different page, imo, you're not gonna be able to (in other words, if your board template stylings are in the category layouts, you'll have unstyled subboards since there's no categories inside a board for it to pull from).

it's also got the same thing going on about load times where, because the site is loading the entire template for each instance of that template in a list, you'd be loading the board css for every single board on your index or the post/mini-profile css for every single post inside a thread.

but there's also the side element of it just being. general clutter tbeh. putting the css in the template itself is a lot messier to work with for later editing purposes than it is to have that separation between wrapper/webpage/html template and stylesheet, especially if you're not the original coder and are just editing someone else's skin.

so yeah like. i've done it a couple of times, when things were being funky and i needed to do some really weird workarounds (looking at you, javascript functions), but i try to avoid it whenever i can for those reasons



edit: i'll also direct you vaguely towards fizzyelf and jcodes for a lot of scripts to start looking through, like the recent topics snag, as well as the general advice of "if you want to pull anything off cttw, like nicole's customizable code box, i'd do it now, before the contents get yoinked since when cttw fully closes, all the codes on it will be 100% inaccessible unless you already have them elsewhere"