Signups are currently closed. Check back soon!

Studio X Help Guide

Xinsto Hooks

Restyle the parts Xinsto adds, and use your Profile Colours.

Xinsto wraps your content in a few parts of its own: your title, the info line, your away message, the content box, the visitor counter and the footer. Each one has an id, so your CSS can restyle it, move it or hide it. The examples in this chapter show a whole sample profile, so you can see the effect.

The parts, by id

id	What it is
`#xinsto-profile`	The whole page column (about 780px wide, centered)
`#xinsto-title`	Your profile title
`#xinsto-meta`	“Name · access name · member since...”
`#xinsto-away`	Your away message box (only there when you're away)
`#xinsto-content`	The box your content goes in
`#xinsto-counter`	“You are visitor 000042” (only when the counter is on)
`#xinsto-foot`	The small footer with your link

Inside them are a few classes too: .x-away-label and .x-away-body (the away message's header and text), and .x-digits span (each counter digit).

Your code goes inside #xinsto-content, but a <style> block there still applies to the whole page, so you can style all the parts from it.

Your Profile Colours, in your own CSS

Whatever you pick in Studio X > Profile Colours is available as a CSS variable. Use var(--x-link) instead of a fixed colour, and your design will follow along whenever you switch presets.

Variable	Profile Colours setting
`var(--x-bg)`	Page background
`var(--x-text)`	Text
`var(--x-link)`	Links
`var(--x-box-bg)`	Content box
`var(--x-border)`	Borders
`var(--x-head-bg)`	Header bars
`var(--x-head-text)`	Header bar text
`var(--x-font)`	Font

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

<style>
  .match {
    border: 2px solid var(--x-border);
    background: var(--x-head-bg);
    color: var(--x-head-text);
    padding: 10px;
    border-radius: 8px;
  }
</style>

<div class="match">I always match my Profile Colours.</div>

Loading...

Tip: these examples use your Profile Colours. Change them in Studio X, come back, and watch this box change too.

Restyle the title

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

<style>
  #xinsto-title {
    font-family: Georgia, serif;
    font-size: 34px;
    text-align: center;
    color: var(--x-link);
  }
  #xinsto-meta { text-align: center; }
</style>

<p>Look up: the title changed.</p>

Loading...

Make the away message pop

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

<style>
  #xinsto-away {
    border: 0;
    background: #fff4b8;
    transform: rotate(-1.5deg);
    box-shadow: 3px 3px 0 #c9a800;
  }
  #xinsto-away .x-away-label { background: #c9a800; color: white; }
  #xinsto-away .x-away-body  { font-family: "Comic Sans MS", cursive; font-style: normal; }
</style>

<p>The away message is now a sticky note.</p>

Loading...

Remove the content box

Want your content to sit right on the page, with no box around it?

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

<style>
  #xinsto-content { background: none; border: 0; padding: 0; }
</style>

<p>No box. Just me and the background.</p>

Loading...

Widen the page

<style>
  #xinsto-profile { max-width: 1100px; }
</style>

Restyle the visitor counter

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

<style>
  #xinsto-counter { font-family: "Courier New", monospace; }
  #xinsto-counter .x-digits span {
    background: #0149cf;
    color: white;
    border-radius: 50%;
    padding: 4px 7px;
  }
</style>

<p>Scroll down to see the counter.</p>

Loading...

Hide parts you don't want

display: none hides anything. This is how the Deluxe template replaces the title with its own header:

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

<style>
  #xinsto-title, #xinsto-meta { display: none; }
</style>

<h2>My own header goes here</h2>
<p>The title and info line are hidden.</p>

Loading...

You can't hide or change the Xinsto bar at the very top, or the Report link in it. Those sit outside your profile's sandbox.

The automatic header bars

Every <h2> and <h3> in your content becomes a full-width header bar in your colours. Don't want that for one heading? Give it a class and reset it. Write the selector as h2.plain (tag plus class) so it's specific enough to win over Xinsto's own style:

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

<style>
  h2.plain { background: none; border: 0; margin: 10px 0; padding: 0; font-size: 20px; color: var(--x-text); }
</style>

<h2>A normal header bar</h2>
<p>Some text.</p>
<h2 class="plain">A plain big heading</h2>
<p>More text.</p>

Loading...

Taking over the whole page

Go all the way: hide the defaults, remove the box, set your own background, and build everything yourself. A good starting point:

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

<style>
  html { background: linear-gradient(160deg, #1a1a40, #4b1d6e) fixed; }
  #xinsto-title, #xinsto-meta { display: none; }
  #xinsto-content { background: none; border: 0; padding: 0; color: #f0e8ff; }
  #xinsto-foot, #xinsto-counter { color: #cbb8ef; }
  .stage { text-align: center; padding: 40px 10px; }
  .stage h1 { font-size: 42px; margin: 0; letter-spacing: -2px; color: #ff9cf0; }
</style>

<div class="stage">
  <h1>Totally mine.</h1>
  <p>Every pixel of this page is my own CSS.</p>
</div>

Loading...

For a ready-made version of this, try the Deluxe profile starter template in Your Content.

Next up

Make it move and react: JavaScript Basics »

« CSS Basics JavaScript Basics »