Jump to content

Coding

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

33 guides in this category

  1. 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,

    • 2,841 views

  2. 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,111 views

  3. 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,074 views

  4. Javascript Tabs

    A guide to making Tabs with javascript.

    Type: Javascript

    By dystopia,

    • 1,596 views

  5. 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,

    • 3,303 views

  6. 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,

    • 11,522 views

  7. Tips on Skinning

    @"Claire" asked for some tips on making her first skin but my reply got so big I figured I'd turn it into a guide.

    You always wanted to know how to annotate your face, right? ;P

    DISCLAIMER: I am not actually a drunkard like this post would suggest. (Seriously, the most I ever drink is a (very large) glass of Baileys at Christmas. Every night for a month. It's like a grown-up advent calendar.) The "wine" stains were in fact blood stains from all the hair-pulling.

    DISCLAIMER THE SECOND: I don't really have one, I just felt like saying "disclaimer the second".

    DISCLAIMER THE THIRD: Oh, look, I did have a second disclaimer after all: I may or may not add to this list of tips in the near or distant future if my brain should decide to spill its guts some more. Who knows.

    Type: Look & Feel Software: Jcink

    By soggymuse,

    • 3,500 views

  8. 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,455 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.

  I accept