Advanced Guides

• A Guide to DevTools

  A Guide to DevTools 🧪 Debugging Network Errors with DevTools Sometimes Janitor hides the real error when it doesn’t recognize the format. DevTools lets you peek behind the scenes and figure out exactly what’s going wrong, especially helpful when nothing else works. Step 1: Open DevTools Go to any bot chat on Janitor. Once the page loads, right click with your mouse and click on inspFew readers

CSS

• A Guide to CSS: Index

  CSS for JanitorAI - Index by lunaxlee + others This document includes a basic guide to using CSS (and HTML) on JanitorAI, premade code, and a list of resources. Note that the contents of this guide are outdated and currently being updated. Guide What is CSS and HTML Where toFew readers

• A Guide to CSS: Main Guide (Being updated - slightly out of date)

  Directory What is CSS & HTML Where to put CSS & HTML code About Me Pros and Cons to using About Me CSS Editor Pros and Cons to using the CSS editor Other functions Known bugs and risks when using About Me and the CSS Editor (6-known-bugs-and-risks-when-usingFew readers

• A Guide to CSS: Code Collection

  Code Collection Directory (Reminder that the codes provided are all base codes. You are free to further modify them/use as a reference if you know how) Also note that codes may not be provided for every single element. You may look in the list of known universal class IDs for the ID of an element, then search up on Google, look in w3schools, or ask platforms like ChatGPT on how to create code. And of course, you may read the guide already provided. If there is code that you'd like to seSome readers

• A Guide to CSS: Other Resources

  Other Code Resources LINK - Janitor Creator Server's forum post for custom profile customization (link provided is the invite to the server) LINK - w3schools (most reliable site for learning coding languages) LINK - ishimori, has a collection of CSS & HTML codes for general design and fonts LINK - CSS Bud - a site with CSS code generators, code templates, and more.Few readers

• Code Collection: Profile Card

  Profile Card No gradient for profile card No round corners for profile card Centered pfp, username, and follower count Credits to Rosewing Example: (https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/imagFew readers

• Code Collection: Bot Card

  Bot Card Bot card preview text Note: changes the color of the preview text on the bot card, aka the character bio that is being previewed on the bot card. Does not change the color of the text on the actual bot page.Change COLOR to your desired hexcode, rgb/rgba, or color name Example: (https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/imagecwwraj.png =211xauto) Bot card background color, graFew readers

• Code Collection: Profile Page

  Profile Page Page Overlay/Filter Credits to Ikyokeye Replace  LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make usFew readers

• Code Collection: Interactables

  Interactables Image as button <a target="blank" rel="noopener noreferrer nofollow" href="LINK DESTINATION"><img src="LINK" alt="ALT TEXT"></a> Replace LINK DESTINATION with the link you want the button to lead to. LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link. And ALT TEXT with the text you want displayed when you hover over it or when the image doesn't lFew readers

• Code Collection: Text

  Text Using web safe fonts (custom fonts) A system font or web-safe font is one that’s already assumed to be on the vast majority of users’ devices. 'What is a web-safe font?' As mentioned before; a system font or web-safe font is one that’s already assumed to be on the vast majority of users’ devices. Meaning that these fonts should already be installed in your device. Web-safe fonts are perfect to use when you cannot/do not want to import fonts using embed codes or source links.Few readers

• Code Collection: Images

  Images Image overlays/filters (for all images or for bot images only, with hover action) The codes displayed below have the automatic hover feature, meaning that the overlay will stay on the elements unless you hover your cursor over it. Credits to Iorveths ote: if you don't want the filter to disappear upon hovering, delete the section of the code labeled HOVER ACTION. For the value FFew readers

• Code Collection: Misc

  Media Query Media query is used for device responsiveness (so your page is both mobile and PC friendly). It uses the @media rule to include a block of CSS properties. Here's an example for tablet-sized or smaller devices: You can set the size this rule is supposed to be for through the max-width property. Likewise, you can instead put the min-width property, or have both (done like this: @meFew readers

Show more articles

Bot Creation

• Bot Creation: Step-by-Step Guide w/ Images & Resources by Aurellea

  Step-by-Step Bot Creation Guide by Aurellea Introduction Welcome to my bot guide! So, you want to learn to make bots but you're unsure of where to start or what resources you might need? Maybe you're a visual learner like me. Well below I'll take you through a step-by-step guide with visuals for how to make a bot. We'll make one together and go through my personal process for how I create! First Steps Creating A ChaPopular

• Janitor Editing Guide by Memory

  Introduction; Why do edited thumbnails matter?: It's pretty simple, edited thumbnails matter because they’re the first impression your audience gets along with the viewable description. It's a quick visual hook that decides whether someone clicks or scrolls past. A well edited thumbnail doesn’t just look good, it tells a story, sets the tone, and instantly communicates the style or personality behind the content. Common Mistakes: One of the biggest mistakes beginners make in thumbnaiFew readers

• Bot Creation Guide (w/ Images) by Faylua

  Bot Creation Guide by Faylua You would love to create your own bot, but don’t know where to start? Don’t worry, this guide is here to guide you step by step. First of all, let’s look at some terms you’ll need to understand to proceed: user : user is a macro used to insert the reader’s persona inside of your bot’s coding. char : char is a macro used to mentor your bot’s character. I personally do not to use it, and write my character’s name manually instead.  ToFew readers

JSON

• Vii's Guide to Using JSON

  How to Use JSON! by Vii Table of Contents Introduction Examples Video Game Character Profile What a Character Summary Might Look Like Breaking Down the structure Basic Character Description Character Personality Character Likes & Dislikes The Making of NPCs CharaFew readers