JCINK coding question - custom forum row layouts

pronounsThey/them
20written posts
rubixearned bits
offlinecurrently
rubix
New Member
rubix Avatar
Hello!

I am currently in the process of trying to build a skin for the first time, and one of the things I am looking at is putting in a custom forum row layout as I've seen other sites do it and I really like it.

I'm comfortable with designing the layout in codepen using css grid, so it's really the installation I don't get. How do you tell JCINK which design relates to which forum section? Is it done using the forum ID somehow, or does it require javascript?

A lot of the JCINK tutorials I've come across focus on forums where you have the same design for all forum rows. I've googled and checked the forum for anyone asking these questions, but haven't come across an answer so far. I've also downloaded a few free skins to see if I could glean some answers, but none of them have customised layouts for the forum row section.

I'd really appreciate any tips people can give me. I've drawn a diagram below to show some of the structure I am hoping to include, as I'm not done much of the coding yet.

Thanks for the time :)

example
last edit on Mar 29, 2021 21:56:32 GMT by rubix
phantom of the black parade
pronounsshe / her pronouns
4,383written 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?
your instinct about using the forum id? absolutely correct.

basically what you're doing is, well.

<div class="boardlayouts-#"><div class="wideboardlayout">(board layout goes here)</div>
<div class="smallboardlayout">(board layout goes here)</div></div>

in the forum layout html template

then in the css, you're doing
.wideboardlayout, .smallboardlayout { display: none; }
.boardlayout-1 .wideboardlayout { display: block; }
.boardlayout-2 .smallboardlayout { display: block; }


that's it, that's the strat.

(or, y'know, there's the threads here and here that have better + more detailed instructions on how to do it, since uh. you are not the only one to ask that question l-lmfao-)
last edit on Mar 29, 2021 22:37:32 GMT by Kuroya

pronounsThey/them
20written posts
rubixearned bits
offlinecurrently
rubix
New Member
rubix Avatar
Thanks, I’m new to pp so wasn’t aware there was an archive section.

If the id is used to change css classes, does that mean the html structure must remain exactly the same for each forum row (with creative use of something like display none to hide unneeded sections) or is there a way to change this too according to forum ID?
phantom of the black parade
pronounsshe / her pronouns
4,383written 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?
yes, it does.

basically, you're dumping every single possible board layout into the html template and then using a class that changes based on the forum id to specify which layout version is to be displayed for each board. the only real exception to that is that redirects use a different html template, so imo you can pull out a redirect-specific template from the general board list and stick it into that one only, but that's really only useful for a couple of boards, if that, so it's not much help to you.

(that's actually why i generally recommend trying to minimize the number of different layouts by styling as much of it with the css as possible - because ho boy it's not gonna be fun trying to load 40+ individual board layouts for each one of the 20+ boards that are on the index page tbeh.)

3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.