Studio X Help Guide

Start Here

How your profile is put together, and your first edit.

Your Xinsto Extension is a web page, and you get to write it. You don't need to be a programmer. If you can type, copy and paste, you can make something great, and this guide shows you how.

Every example in this guide is live. Change the code on the left and the result on the right updates as you type. When you like it, click Add to my profile to drop it into Your Content, or Copy to paste it somewhere yourself. Broke it? Reset.

The three languages

HTML is what's on the page: headings, paragraphs, pictures, links, lists.
CSS is how it looks: colours, fonts, sizes, spacing, layout, animation.
JavaScript is what it does: things that react to clicks, change over time, or count, shuffle and surprise.

You can use all three together in Your Content. Here they are in one tiny example:

Try it: edit the code and watch the resultAdd to my profile

<style>
  .hello { color: #0149cf; font-size: 22px; }
</style>

<p class="hello">Hey, welcome to my profile!</p>
<button id="wave">Wave back</button>

<script>
  document.getElementById("wave").onclick = function () {
    this.textContent = "\u{1F44B} Thanks for stopping by!";
  };
</script>

The <style> part is CSS, the <p> and <button> are HTML, and the <script> part is JavaScript.

How your profile is put together

When someone visits your profile, they see these pieces, from top to bottom:

The Xinsto bar with the logo (big or slim, your choice in Display Properties). Your code can't change this part.
Your title and a line with your first name, access name and when you joined.
Your away message, if you've set one in Display Properties.
Your content box: everything you write in Your Content goes here.
The visitor counter, if it's switched on.
A small footer with your link.

Your code can restyle or hide everything from 2 to 6. The Xinsto Hooks chapter shows how.

Using the editor

Your Content in Studio X has the code editor on the left and a live preview on the right.
Nothing goes public until you click Save Profile (or press Ctrl/Cmd + S).
Tab indents instead of jumping out of the editor.
Starter templates above the editor give you a head start. “Deluxe profile” builds a whole page for you.
Want to work on it in private first? Untick Public profile in Display Properties until you're happy.
Your content can be up to 200 KB, which is a lot of code.

Your first edit

Change the words between the tags below, then click Add to my profile:

Try it: edit the code and watch the resultAdd to my profile

<h2>About Me</h2>
<p>Hi! I'm [your name]. I like [three things you like].</p>
<p>Right now I'm listening to [a song] way too much.</p>

Notice how the <h2> turned into a header bar? Xinsto styles every <h2> in your content that way automatically, in your Profile Colours.

Where to go next

Never written HTML? Go to HTML Basics, then CSS Basics.
Just want cool stuff now? Jump to the Cookbook.
Something not working? Troubleshooting.

HTML Basics »