Jump to content
Saying Goodbye to Community

Coding

Articles on coding advice and helpful tips to help with coding your website.

33 guides in this category

  1. Slim Side/Navigation Bar (Optional Dropdown Menu Included)

    Every site needs navigation, right? What about something using icons/glyph fonts, and some funky hover effects in place of tooltips to give your site a unique look? Oh, it works on mobile, is dead simple to convert to a dropdown or toggle menu with a touch of script, and is super light on code too? Let's do it!

    Type: Look & Feel Software: Other

    By ThriftStoreTeeth,

    • 7,894 views

  2. Fonts: A Quick and Dirty Guide

    Fonts are a key component if any website, and doubly so for roleplay sites. Here's some tips, tricks, and things to remember to ensure accessibility. Written for both new and experienced coders.

    Type: Look & Feel Software: Jcink, Invision Power Services (IPS), Journals (Tumblr, Wordpress, Livejournal, Insanejournal), MyBB, Nova, phpBB, Proboards (Freeforums), SMF, XenForo, Other

    By ThriftStoreTeeth,

    • 3,215 views

  3. HTML/CSS Timeline

    A full CSS and HTML vertical timeline? You bet! This uses pseudo-selectors to create a vertical bar with points along that bar with whatever text you need in it, creating a quite fancy historical timeline for your fantasy sites. With a few other embellishments, you can make it super neat.

    Type: Look & Feel Software: Other

    By Arceus,

    • 4,146 views

  4. Web Design: Contrast

    Contrast is important when designing (or choosing) a theme that is legible. This very short guide will give you practical advice to picking what colours to use on your site.

    Type: Look & Feel Software: Jcink, Invision Power Services (IPS), Journals (Tumblr, Wordpress, Livejournal, Insanejournal), MyBB, Nova, phpBB, Proboards (Freeforums), SMF, XenForo, Other

    By Kit the Human,

    • 3,455 views

  5. Adding A Custom Menu to the Mobile View

    This information is actually available on the jcink wiki, but it's a bit buried and easy to miss. Or maybe I'm just unobservant. Who knows?

     

    Anywho, you can add links to the mobile view of jcink.

    Type: Look & Feel Software: Jcink

    By Kit the Human,

    • 2,602 views

  6. "Auto Thread Tracker"

    You can whack the user's subscribed threads into your wrapper, which makes it easier to see what needs replying to. Here's how.

     

    This script will also work with other forum software. However, if you're able to use PHP, I would use that.

     

    For other forums, just change the element that you're targeting:

      

    $("#thread-container").load("URL ELEMENT_TO_TARGET");

     

    Type: Javascript Software: Jcink

    By Kit the Human,

    • 5,563 views

  7. Jcink Theming: Board Wrappers

    So continuing through the Jcink theming guides our next step is the actual design process. Board Wrappers are considered the bones of your theme and wraps up the other elements in it. This will often be the biggest part of your mock-up.

    Type: Look & Feel Software: Jcink

    By Morrigan,

    • 5,659 views

  8. How to create a guidebook for jcink

    This guide is addressed to jcink users but can be used by anyone. Just substitute in the correct terminology.

     

    Essentially, this guide is the creation of a guidebook. On the left of the screen are links. On the right of the screen is a blank space. You click on a link and the appropriate contents appear on the right hand side. You click another link, those previous contents vanish to be replaced by the new appropriate contents.

    Type: Javascript Software: Jcink

    By Kit the Human,

    • 9,581 views

  9. Filterable and Sortable Memberlist for Jcink, using isotope

    A few weeks ago, the editable templates for Jcink's memberlist went live on all sites. This is a fantastic opportunity for admins to create a memberlist that can be filtered by factions, or sorted on playby, without having to update and maintain a list.

     

    I'm going to show you how you can do this using isotope and custom profile fields. This code can be used by any software (just substitute your variables and templates) but I am targeting administrators of jcink sites in particular.

    Type: Javascript Software: Jcink

    By Kit the Human,

    • 13,197 views

  10. Pure CSS Tooltip Styling

    Goodbye, boring tooltip, hello, beautiful tooltips that match your site. Gone are the days of needing to do this with Javascript and jQuery. And, it's accessible to screen readers, too!

    Type: Look & Feel Software: Other

    By Arceus,

    • 2,531 views

  11. Determining your look

    This guide is to help you figure out how you want your site to look. It's an important step when theming a site to know where you want bits and bobs before you put your fingers to keyboard to start developing it. You'll find while coding them it will still evolve but this is to get you thinking about where you want things.

    Type: Look & Feel Software: Jcink, Invision Power Services (IPS), Journals (Tumblr, Wordpress, Livejournal, Insanejournal), MyBB, Nova, phpBB, Proboards (Freeforums), SMF, XenForo, Other

    By Morrigan,

    • 2,440 views

  12. Jcink Theming: Creating the theme

    This is the first true guide in theming for Jcink. As with anything you have to start somewhere and in this instance we need to create a theme and the things that make up a theme.

    Type: Look & Feel Software: Jcink

    By Morrigan,

    • 7,059 views

  13. Importance Of Box-Sizing CSS

    Here to save the day for those troubling with padding and border causing additional pixels to your widths.

    Type: Look & Feel Software: Jcink, Invision Power Services (IPS), Journals (Tumblr, Wordpress, Livejournal, Insanejournal), MyBB, Nova, phpBB, Proboards (Freeforums), SMF, XenForo, Other

    By c.widow,

    • 4,498 views

  14. How to Read and identify HTML and CSS

    This guide will teach you what makes up a HTML and CSS code, giving you the language to be able to identify each part of the code. Knowing the right language allows you to better communicate your message to other coders, thus increasing your ability to state what you're having trouble with. Or what you're looking for.

    Type: Look & Feel Software: Other

    By Kit the Human,

    • 3,487 views

  15. HTML/CSS Transitions

    By popular demand, and threat of kangaroos (I jest), a couple quick tutorial-guides on how to achieve neat-o CSS transition animation effects; there are two different effects here. The concept is essentially the same, but how they operate is a little different, so I decided to write out both. Yes, it's entirely CSS and HTML, I promise. We'll be using CSS transitions to create a cool letter spacing effect, where one line spreads out and vanishes, and is replaced by a new line that fades in and pulls together. We'll also make little corners that move in and out on hover, very neat sci-fi-like effect. This will not just give you the codes, it will walk you through creating them, and assumes you have a minimal understanding of basic CSS.

    Type: Look & Feel

    By Arceus,

    • 2,729 views

  16. How to Center Things

    If you don't know how to center without the center tag, this guide will show you how.

    Type: Look & Feel

    By Kit the Human,

    • 2,006 views

  17. PHP Fundamentals IV

    Part of a guide series, the PHP Fundamentals guide dives into the very basics of PHP and how it works, designed for people that have never worked with PHP at all, or only very briefly (or people that just want more solid info on the ostensibly easy stuff). This series is designed to build on itself, because PHP is like algebra, you can't just dive straight into the middle. ... well, you could, but it wouldn't be pretty. Fundamentals IV covers functions.

    Type: PHP

    By Arceus,

    • 1,962 views

  18. PHP Fundamentals III

    Part of a guide series, the PHP Fundamentals guide dives into the very basics of PHP and how it works, designed for people that have never worked with PHP at all, or only very briefly (or people that just want more solid info on the ostensibly easy stuff). This series is designed to build on itself, because PHP is like algebra, you can't just dive straight into the middle. ... well, you could, but it wouldn't be pretty. Fundamentals III covers arrays.

    Type: PHP

    By Arceus,

    • 1,470 views

  19. PHP Fundamentals II

    Part of a guide series, the PHP Fundamentals guide dives into the very basics of PHP and how it works, designed for people that have never worked with PHP at all, or only very briefly (or people that just want more solid info on the ostensibly easy stuff). This series is designed to build on itself, because PHP is like algebra, you can't just dive straight into the middle. ... well, you could, but it wouldn't be pretty. Fundamentals II covers globals and superglobals.

    Type: PHP

    By Arceus,

    • 1,327 views

  20. Starting a Theme

    These few steps are universal for creating a theme, we're going to go through the initial steps of developing a theme, this is going to include a few key factors. This will include questions you want to ask yourself and good practices.

    Type: Look & Feel

    By Morrigan,

    • 1,796 views

  21. Mini-Profile - click or hover to reveal information

    This is a base for a mini profile that you can either hover over or click onto, to reveal more information about the author. I built this in response to the problem created by hovers: they do not necessarily work for iOS devices. Adding a click function allows all users to access the information usually found with a hover.

    Type: Look & Feel

    By Kit the Human,

    • 4,838 views

  22. 2-Grid Forum Layout

    In this wee guide, I'm going to show you how to do a side by side forum layout with MYBB and Jcink. This is the only customization that this code does.

    Type: Look & Feel Software: Jcink, MyBB

    By Kit the Human,

    • 5,480 views

  23. Move Jcink Alerts Popup

    So a lot of people hate the default user bar that JCink provides however if you get rid of it then you get rid of the alerts popup with is super helpful for those that like to track their posts through this. So I figured out the javascript and adapted it so you can move the link to wherever you like.

    Type: Look & Feel Software: Jcink

    By Morrigan,

    • 3,492 views

  24. Add a Select All Button in Showthread

    Would it be easier for you to select all posts in a thread for moderating? This functionality can be useful when you want to mod nearly all of the posts in a thread, leaving some of them unmodded. 

    Type: Other Software: MyBB

    By Kit the Human,

    • 6,513 views

  25. Accessing Profile Field Data in IPS

    Using IPS template logic and a little PHP, you can access, manipulate and display almost any field in the database. Although this tutorial focuses primarily on moving profile fields around to display in posts, the process of finding, naming, and displaying data across the board remains the same. 

    Type: Look & Feel Software: Invision Power Services (IPS)

    By Sadrienne,

    • 3,242 views
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.