Tumgik
#codes by beedesigns
beedesigns · 5 months
Text
How to show/hide elements.
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:
Tumblr media
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.
Tumblr media
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:
Tumblr media
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:
Tumblr media
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 :)
21 notes · View notes
beedesigns · 11 months
Text
Free Responsive Guidebook Template
I've wanted to do something to give back to the forum roleplay community for a while. The last couple of weeks I've been focussed on a private project, but when it came to working on the guidebook I finally had a ahah! moment where I knew what I could do.
Here's the result, a responsive tabbed guidebook that's got some super basic styling. It's HTML and CSS only, and the code is annotated throughout.
Tumblr media Tumblr media
On small screens, the left sidebar collapses down to a dropdown navigation menu positioned at the top of the page instead. 
Tumblr media
You can find the template on my ko-fi page here. I would like to create an installation and set-up guide, but just need to carve out a bit of time to do it. 
For now, I'm going to release the template out into the wild in the hopes that I might actually be able to read some of the fabulous looking site lore out there on my mobile. You can restyle it however you want, it's a base to be used. Enjoy!
22 notes · View notes
beedesigns · 6 months
Text
Commissions Open!
Hey folks! As some of you may know, my 10-year-old PC finally gave up the ghost at the start of October. I was not best pleased! I sincerely apologise to everyone who had to listen to me lament about it. I've been making do with my tiny chromebook and a mini tower that I built from donated salvaged parts. But it's not really a set-up I want to live with long-term. 
So! I am opening up commissions for post templates, dev templates or even custom JCINK HTML templates you can insert into the skin. Prices will range from £5 for a simple post template to around £25 for something more complex. I'm looking to mostly keep these quick and simple, but I'm happy to chat about anything you might have in mind.
All proceeds will be put exclusively towards a new PC, because computers in the UK are expensive. My current broke self cannot justify making the investment without at least some sort of fund for it. So, yeah, hit me up if you fancy something new. You can see some of previous work shared in my portfolio (shared with explicit permission).
8 notes · View notes
beedesigns · 7 months
Text
You Are Here
Hi! I'm Bee, a millennial who spends way too much time playing with computers. I'm currently unemployed because childcare costs the Earth. So, I'm trying to use my time wisely and setting out on a journey to expand my coding knowledge. I started coding years ago (DOS at 4) and picked up HTML & CSS at uni (a long time ago). But now it's time to really get into it and learn some modern languages. 
Along the way, I hope to give something back to the RP community that really got me into it all in the first place. Some post templates, some JCINK skins, some notion templates and a few maps I draw for funsies.
My links: 
https://ko-fi.com/beedesigns/ - my ko-fi where I share most of my codes.
https://ko-fi.com/s/0237c0509e - a FREE responsive guidebook template for forum RP communities. Designed to be dropped straight into a JCINK webpage.
5 notes · View notes