Recent Posts

options
JCINK coding question - custom forum row layouts written Mar 30, 2021 2:15:18 GMT via mobile
pronounsHe/him
7written 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?
options
JCINK coding question - custom forum row layouts written Mar 29, 2021 21:53:52 GMT
pronounsHe/him
7written 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
options
quote
Roleplaying Quirks written Mar 17, 2021 17:27:39 GMT
pronounsHe/him
7written posts
rubixearned bits
offlinecurrently
rubix
New Member
rubix Avatar
- My characters tend to have certain phrases they use a lot, and if I'm rusty on them, I'll use the phrase to get into character. 'Bah' is one. 'Oh please / As if ' is another. 'I do believe' is a third. And one uses reckon every three sentences.

- I can't use the FC of a character I know. I've purposefully not watched certain anime (tiger & bunny) to avoid the issue of knowing what the character is actually like.

- I really like playing alternative view points when it comes to site issues, especially if that issue isn't currently being commented on by other characters.


- I have an annoying habit of having my characters look, frown, stare, gaze, as if the eyes are the only thing that exist and there's no other way to express body language. I need to work on it xD
options
quote
your roleplaying application written Mar 17, 2021 13:57:48 GMT
pronounsHe/him
7written posts
rubixearned bits
offlinecurrently
rubix
New Member
rubix Avatar
[nospaces]
[attr="class","RUBIX"]

[attr="class","p2app"]
[attr="class","p2app1"]

[attr="class","p2apptop"]
[attr="class","p2apptop1"]
[attr="class","p2appimg"]
[attr="class","p2appimg1"]


[attr="class","p2appimg2"]







[attr="class","p2apptop2"]



CALL ME RUBIX



DISPLAY NAME







[attr="class","p2appmid"]

[attr="class","p2appleft"]



other names



Ru, Ruchan





pronouns



he/him





age



too old





zodiac



crabby lion





alignment



lawful goodish









[attr="class","p2appright"]

[attr="class","p2appstats"]
[attr="class","p2appstats1"][attr="class","ion-android-star"]


CONFIDENCE

[attr="class","p2appstats2"]







[attr="class","p2appstats"]
[attr="class","p2appstats1"][attr="class","ion-android-star"]


IMAGINATION

[attr="class","p2appstats2"]







[attr="class","p2appstats"]
[attr="class","p2appstats1"][attr="class","ion-android-star"]


MUSE

[attr="class","p2appstats2"]







[attr="class","p2appstats"]
[attr="class","p2appstats1"][attr="class","ion-android-star"]


WRITING

[attr="class","p2appstats2"]







[attr="class","p2appstats"]
[attr="class","p2appstats1"][attr="class","ion-android-star"]


EXPECTATIONS

[attr="class","p2appstats2"]













[attr="class","p2applyric"]



positives caring, smart, friendly, logical, known to crack dad jokes[break]

negatives neurotic, untidy, stubborn, indecisive, pesssimistic





[attr="class","p2appbot"]








describe the color red to a blind person





Like a curry so hot, itโ€™ll make your brain jump out of your ears. The rage at realising you lost a post. Sunburn.[break][break][break]



best color, go! why is it the best color?



For a while, I thought it was blue. Or red. Iโ€™ve now seen the light and realised that the best colour is, objectively, orange. Especially yellow orange. There is no better colour. It cannot be beaten. Orange.

[break][break][break]



if you could swap places with one person in the rp community for a day, who would it be and why?



Iโ€™d swap places with ninelie or pharaoh so I can steal your secrets learn how you come up with amazing designs for skins, as well as understand how to better write my code. Assuming Iโ€™d get access to your knowledge while swapped. [break][break][break]

would you rather have to listen to toto's africa 24/7 for the rest of your life, or hear every song ever played from here on out as smooth criminal by michael jackson?



I BLESS THE RAINS DOWN IN AFRIIIIIIIIIIIIIICA

[break][break][break]


what's something you think is horribly underappreciated?


Me :| I deserve pay for my secretarial services.[break][break] [break]


[attr="class","p2appbot1"]



LOOKS LIKE CURLY HAIRED WATANUKI







[googlefont=Roboto:300,400,700,800][googlefont=Rajdhani:700]

[newclass=.p2app]padding:21px;border:solid 1px #dddddd;background-color:#eeeeee;width:600px;[/newclass]

[newclass=.p2app1]border:solid 1px #dddddd;padding:6px;background-color:#f9f9f9;color:#5f5f5f;font:11px Roboto;[/newclass]

[newclass=.p2apptop]text-transform:uppercase;background-color:#e6896a;padding:1px;[/newclass]

[newclass=.p2apptop1]background-color:rgba(250,250,250,.2);height:178px;[/newclass]

[newclass=.p2appimg]background-color:#222222;margin:-1px 0px -1px -1px;border-right:solid 1px #e6896a;padding:35px;height:110px;width:110px;float:left;[/newclass]

[newclass=.p2appimg1]width:130px;height:130px;position:absolute;margin:-10px;background-color:#e6896a;border-radius:100%;[/newclass]

[newclass=.p2appimg2]height:100px;width:100px;padding:5px;background-color:#f9f9f9;border-radius:100%;position:relative;z-index:1;[/newclass]

[newclass=.p2appimg2 img]height:100px;width:100px;border-radius:100%;[/newclass]

[newclass=.p2apptop2]margin-left:180px;padding:35px;padding-top:55px;text-align:right;[/newclass]

[newclass=.p2apptop2 h1]letter-spacing:-.5px;font:40px Roboto;font-weight:300!important;color:#f9f9f9;line-height:35px;padding-bottom:10px;text-shadow:1px 1px 0px #e6896a, 1px 0px 0px #e6896a, 0px 1px 0px #e6896a, -1px 0px 0px #e6896a, 0px -1px 0px #e6896a, -1px 1px 0px #e6896a, 1px -1px 0px #e6896a;[/newclass]

[newclass=.p2apptop2 h1 b]font-weight:800!important;line-height:35px;[/newclass]

[newclass=.p2apptop2 h2]border:solid 1px #e6896a;background-color:#f9f9f9;padding:15px;font:bold 12px Roboto;line-height:10px;[/newclass]

[newclass=.p2apptop2 h2 a]font:bold 12px Roboto;line-height:10px;color:#e6896a;[/newclass]

[newclass=.p2appmid]border:solid 1px #dddddd;background-color:#f4f4f4;padding:39px;padding-bottom:25px;border-top:none;[/newclass]

[newclass=.p2appleft]padding:2px 15px 0px 0px!important;width:45%;vertical-align:top;[/newclass]

[newclass=.p2appright]padding:0px!important;vertical-align:top;[/newclass]

[newclass=.p2appleft h1]font:bold 20px Roboto;font-weight:800!important;line-height:15px;padding-bottom:5px;color:#e6896a;[/newclass]

[newclass=.p2appleft h2]font:11px Roboto;text-transform:lowercase;padding-bottom:10px;[/newclass]

[newclass=.p2appstats]margin-bottom:14px;[/newclass]

[newclass=.p2appstats1]position:absolute;font-size:50px;line-height:50px;color:#e6896a;opacity:.1;margin:-17px 0px 0px 250px;transform:rotate(12deg);-webkit-transform:rotate(12deg);-moz-transform:rotate(12deg);[/newclass]

[newclass=.p2appstats h1]font:15px Roboto;font-weight:300!important;line-height:10px;padding-bottom:10px;[/newclass]

[newclass=.p2appstats2]height:10px;width:100%;border-radius:5px;overflow:hidden;background-color:#d5d5d5;position:relative;z-index:1;[/newclass]

[newclass=.p2appstats2 div]width:0%;background-color:#e6896a;border-radius:0px 5px 5px 0px;height:10px;[/newclass]

[newclass=.p2appbot]border-left:solid 1px #dddddd;border-right:solid 1px #dddddd;background-color:#f4f4f4;padding:39px;[/newclass]

[newclass=.p2appbot div]text-align:justify;font:11px Roboto;max-height:300px;overflow:auto;padding-right:10px;[/newclass]

[newclass=.p2appbot h1]font:25px Roboto;font-weight:800!important;line-height:20px;letter-spacing:-1px;padding-bottom:10px;text-transform:lowercase;color:#e6896a;[/newclass]

[newclass=.p2appbot1]padding:35px;background-color:#222222;border-left:solid 80px #e6896a;color:#e6896a;font:bold 12px Roboto;font-weight:800!important;line-height:10px;text-transform:uppercase;text-align:right;[/newclass]

[newclass=.p2appbot1 b]font-weight:800!important;line-height:10px;color:#f9f9f9;[/newclass]

[newclass=.p2applyric]border:solid 1px #dddddd;margin-top:-1px;padding:39px;text-align:justify;font:12px Roboto;line-height:15px;background-color:#eeeeee;white-space:nowrap;overflow:hidden;text-transform:lowercase;[/newclass]

[newclass=.p2applyric b]color:#e6896a;padding-right:10px;[/newclass]





[newclass=.RUBIX .p2apptop, .RUBIX .p2appimg1, .RUBIX .p2appstats2 div]background-color:#FFA500!important;[/newclass]

[newclass=.RUBIX .p2appleft h1, .RUBIX .p2apptop2 h2 a, .RUBIX .p2appbot h1, .RUBIX .p2applyric b, .RUBIX .p2appbot1, .RUBIX .p2appstats1]color:#FFA500!important;[/newclass]

[newclass=.RUBIX .p2appimg, .RUBIX .p2apptop2 h2, .RUBIX .p2appbot1]border-color:#FFA500!important;[/newclass]

[newclass=.RUBIX .p2apptop2 h1]text-shadow:1px 1px 0px #FFA500, 1px 0px 0px #FFA500, 0px 1px 0px #FFA500, -1px 0px 0px #4393e5, 0px -1px 0px #FFA500, -1px 1px 0px #FFA500, 1px -1px 0px ##FFA500!important;[/newclass]

last edit on Mar 17, 2021 13:59:27 GMT by rubix