Making a World Code! UPDATED [11/03]

Posted 3 years, 3 months ago (Edited 3 years, 2 months ago) by Togo
Introduction

I've seen people asking around for world codes and I need a new project so... I want to create a world theme that works for as many people as possible, but for that i need some of your input.

If you have a world and want to change the look / plan to make a world but haven't found a nice theme for it yet, this is your chance! Fill out the form below and help shape this world code with me!

Examples

I've made world codes before, you can check out these examples:

These are customs so I won't be showing any live previews, sorry!

About

This will be a world CSS bundle with a couple different HTML options. This shouldn't be a problem for anyone, since all users have access to CSS for worlds. I would like to continue adding to the bundle in the future; more HTML options as well as matching snippets for forums or custom pages.

The style itself will be slightly generic, but you'll have full control over colours, backgrounds, borders, fonts and more through SCSS variables.

The final version will have options for both personal worldbuilding/story worlds and community/group worlds. If some questions seem more geared towards one world type, it's probably because I couldn't think of many options for the other - if there's something obvious I missed, leave a comment about it!

I'm mainly looking for opinions on the layout and type of content, as well as input from people who mod / admin communities through worlds. Any submission helps though, they let me know this is something people actually want!

Fill out the form here
FAQ

I've never used CSS before, how does it work?

In this instance, you will get a text file with SCSS variables and an import link. This goes in 'Manage World > Group CSS'. Everything should work from the get-go, but you'll be able to customize it further by editing the variables.

Will I be able to use custom colours, backgrounds etc.?

You will have a lot of styling options through SCSS variables. If you've used a custom coloured HTML at any point, variables are similar except they do everything for you - pick your primary colour, update the CSS variable and all the HTML will use that primary colour automatically. I'll add as many of these as possible, including colour changes and background options - you can check the current planned ones on the feature list.

Regarding custom menu content:

Custom menus mean completely remaking the HTML for the sidebar/menu so you can have complete control over your menu links, dropbars and other content. TH worlds automatically sort mod and admin panels into dropdowns, and you can add and sort your pages into page folders with dropdowns under 'Manage Pages'. It's also possible to hide and rearrange content with CSS, and add custom content via the blurb (although blurb content will stay grouped together). If this covers what you're looking for I would not recommend a custom menu, as they require at least some experience editing codes.

Q&A

Are you planning to create more world CSS as time goes on?

Definitely! I have some personal worlds I want to style and I'll most likely put them up, either as F2U or P2U! I'd love to make some more stylized/themed world codes in the future ~

Planned features

The bundle will have one global CSS sheet which will style all content in the world - both default pages like characters and forums, as well as any custom pages you choose to use. You'll be able to combine this with a gallery of matching front page, custom page, folder, bulletin and forum HTML. The goal is to let everyone grab the content sections they actually need and still make everything match. Bootstrap-style codes from other coders should generally look fine as well.

Planned features / options listed are below. Italic text means I'm tentative about them, either because of technical limitations or they haven't gotten much attention on the form. If you have something else you'd like, mention it in the form or comments and I'll consider it!

CSS Variables:

  • global options:
    • max page width
    • page title & icon visibility
    • grid margins
    • footer visibility
    • scrollbar style
  • sidebar / menu styles:
    • sidebar (left)
    • topbar
    • pull-out sidebar (mobile menu on desktop)
    • fancy custom menus
  • menu options:
    • sticky menu (sticks to top/side of screen when scrolling)
    • overflow fixes
    • world icon visibility + style
    • fontawesome icon visibility + placement
    • dropdowns on click or hover
  • individual menu link options:
    • visibility
    • renaming (e.g. changing "bulletins" to "updates")
    • page link styling (custom icons and colors for page links)
  • colours:
    • sidebar colours
    • text & content box colours
    • primary, secondary and default colours for text, buttons and most other bootstrap elements
    • success, danger, warning and info recolours
  • fonts & typography:
    • fonts imported from google fonts
    • seperate options for body, header, display and monospace fonts
    • custom header & display styles
  • background options:
    • background color, image or gradient
    • full size or repeating background image
    • fixed or scrolling background image
  • card / content box options:
    • paddings & margins
    • card header style
    • background & text colour
    • border & border radius (rounded / square corners)
    • box shadow style
  • character gallery:
    • character descriptions
    • force square character icons
HTML Layouts:

  • front pages:

    still figuring these out! will update later :>

  • custom pages:
    • species guide
    • species overview (if your world has multiple species and you want a page to show differences etc.)
    • important characters
    • character groups/teams
    • story summary
    • story timeline
    • setting/environment
    • locations
    • magic guide
  • forum templates:
    • MYO submissions
    • shop template (for world/ingame items & currency)
    • newsletter
    • Q&A / FAQ
  • other:
    • folder overview
    • custom character gallery
Other Global Content:

Added through CSS or the blurb. Everything will be separate HTML snippets / togglable through CSS, so totally optional.

  • custom menu content (details in FAQ)
  • header image (with optional title / blurb / links)
  • pagedoll
  • floating music player

thank you for your time and input // togo :^>

Togo

MoonLotus-Hime oh no the bottom bar,, ,,, it's.. technically possible ?? i'd have to make dropdowns go up instead of down but otherwise it's not too much work, just seems super unintuitive for visitors :'D will keep you in mind for the testing group !!


EXxiilED i don't have proper custom colours set up yet but having someone who's willing to go through and test different html codes would def be helpful in the future !! will consider :^D !!!

sanjee-chan

I really liked the top bar but maybe it shouldn't have icons? and maybe be separated by boxes like [item][item]
IDK if that makes sense XD Or if this has already been said, sorry if that's the case!

Eitherway, it looks great so far! Thanks for sharing updates with us~ The sidebars look awesome > w <

Togo

crumzie sorry ;; since i'll be doing updates live for testers i wanna be able to chat in real-time and TH isn't suited for that :') update me if you get discord tho !!


sanjee-chan you can turn off the icons !! ik it looks super cramped w/ em but i wanted to show that they're available for those who'd prefer them !! i'll work some more on the menus, for now i wanted to show off basic functionality but they'll get some more styled options with clearer buttons in the future ;D

sanjee-chan

Ooh I see I see. That's super neat! Thanks for telling me > w <

JCFoxington

GODS this looks good already. i'd love to do alpha testing !!! i've got some decent css / html experience & lots of time on my hands :]

Togo

JCFoxington hhhh ty !!!! would love to have you on board w/ the testing squad, feel free to add me on discord :^>

Matreats

There are not enough right-aligned sidebars, literally t.t

I always remember the codes that have them since it's so underused - I also do a lot of code editing though I've never created one from scratch :0

veesbeasties

I love the sidebar option, especially the top bar!

rlynbook

What you have now looks great, Lots of sidebar options are good to have since everyone has a favorite.

I would love to be a tester if you need them, I have coding experience and I am currently learning the bootstrap css that TH uses. I am trying to build my own codes from the ground up atm c: You can contact me thru discord if it is easier - Rachel (rlynbook)#0858

Lainebrary

Added you on Discord as well (Alex Laine#5370) but I would love to help with testing. While I don't have experience making code from the ground up, I've been editing my own toyhouse code for years (Literally years. I've been at it since the pre-Bootstrap and pre-Import Sheet days)

Discord is also my primary method of communication, so I'm excited to see it's what you plan to use!

Kerynean

Looking great so far! Loving the left sidebar personally but all the options are great!