Inspired by a recent conversation with someone on discord that prompted me to make a quick demo on codepen.io I thought I would try to make an actual tutorial out of it. So! For those that are interested, here's how to easily change what different groups see when they're logged in. This tutorial is geared specifically toward JCINK coders, but can easily be adapted to any forum or webpage. Keep reading to find out how.
The first step is to add the group id to your board's body. To do this you need to find the <body> tag in your board wrapper and replace it with:
Now you have that in place, you can use it to dictate what different groups can and can't see. This obviously has a lot of use cases, from changing group colours to hiding certain information or forums. The most common use is to swap the navigation options depending on whether someone is logged in or not.
So, you've created your nav menu, and you want guests to see the "sign-in" link, but what about members who are already signed in? You want them to have the "sign-out" link instead. What we're going to do is wrap each link in a class that corresponds to who we want to see it.
Now, in the stylesheet, we're going to add the CSS to tell the board to show or hide the corresponding link depending on who is logged in. We're going to be using JCINK's default group ids #2 for guests and #3 for members.
First for guests:
This simply says if a guest (.g-2) is viewing the page, then show anything using the class 'guest' and hide anything using the class 'member'.
Then for members:
Much like the above, we're telling the site to show anything using the class 'member' and hide anything using 'guest' when the member group (g-3) is logged in.
And that's it! You can see it in action here, where I've combined it with a colour variable to demonstrate how this method can be extended to include pretty much whatever you want. Hopefully it all makes sense! This is my first ever tutorial, and I'm just a baby coder myself. So, if you see a mistake or something that doesn't make sense, please do reach out and I shall try to correct/clarify it. Thanks for reading :)
hi there! i was just wondering if you had any good tutorials/resources for someone who's wanting to start skinning????
hi anon! this is a brilliant question and i am so humbled that you asked me. this depends a little on your comfort level with coding, i think.
if you are completely new to coding, i would recommend looking at something like codecademy to learn the basics of html and css with their interactive courses. i’ve personally utilised their tutorials and really liked them. if you have some familiarity but just want a good reference for css properties, w3schools is something i almost always have open in another tab or return to frequently. egg design (prev. espoirthemes) does some wonderful tutorial posts that i’ve enjoyed.
if you are comfortable with coding and want to learn things that will help take your coding to the next level, i would recommend learning something like flexbox, which can be done very easily with the in-browser game flexbox froggy. flexbox makes positioning things evenly and precisely very easy~
as for resources that can just be good for getting your creativity going, i like some of the following:
cssgradient.io - gradient backgrounds
fontpair - easy google font pairings
paletteworld - image-based color palettes
coolors - interactive color palettes
siteinspire - web design designated for inspo
fontawesome - my absolute favourite go-to icon font
finally, i know there have been a few base skin releases from various coders in resource sites. i don’t personally know them, but they may be a good way to learn how to make small changes yourself on a skin that is not quite as complex as jcink’s default coding. do note that to my knowledge, none of these base skins are permissive for commission/commercial use, but they are wonderful to tinker with as a learning tool. you can check around the remaining jcink-hosted resource sites for different versions. i hope i’ve helped a little in your search. please feel free to message me privately either here or on discord if you are looking for a specific resource. i don’t currently offer coding support outside of commissions but i’m always happy to spread the knowledge of existing resources.
I did these for the Coding Camp's challenge #033 last night, and I'm releasing them for free for folks to use if you want. There's a matching post template that I did in the same style months back for another CC challenge too.
You can find them all in a codepen here. In total, there are 6 templates. Use them as you will! But I would love to know if you do and where. I'm nosey like that.
Does anyone have any (preferably free) online resources for learning PHP? I've not really touched it since I was in uni. I feel like I've forgotten absolutely everything and need to start again with the basics.