Tutorial!

Fruit Salad time. If you are reading this it means I have sucessfully bribed you into making your own site. Let's get into it. I'm not going to teach you basic coding, for that I would reccommend scrolling through the html beginner tutorial that Neocities suggests, or finding a similar list just to familiarize yourself with the basic structure. THat being said, I made this as easy as possible to edit just the text of without needing to mess around with the code. It should feel like editing Wikipedia in source.

I would like to keep the mid-century-modern vibe as much as possible, but I can't control what you do.

Making a page

The first step is to create a new page. Click "New File" and add the name of your fruit, then put ".html" at the end. Without the file type at the end, it will not create a file. Next, open up "character-template.html", hit command-a (or how ever your computer does select-all) and copy all the code to paste into your new file.

Click "Save" and "View", and you will have a functional copy of the template! Yay!

Go back to the main dashboard, this time click "New Folder". Name it after your fruit as well. This is where you will put all your images related to your own page. Now we get to the actual editing!

Customizing colors

At the very top, you will see two "style" brackets with a bunch of variables in between. Each of these variables controls a section of colors and other cosmetics that I wanted to make easy to change. Colors can be filled in with their hex codes, or by typing a color name that the system recognizes. Using color names is good for testing, but many of the more complex ones won't be recognized by every system. As you test out these variables, try simply replacing each one with random colors to get a feel for what affects what.

Your first step is deleting the "*/" and "*/" brackets at the beginning and end. These are currently hiding the code so that the page does not break. You will notice if you save and reload the page, that it will now be colorless. Time to fix that!

--accent-color: /*FILL IN*/;

Affects the color of the large name heading, the lines between sections, the borders and fill in tables, and the borders around other boxes.

--link-color: /*FILL IN*/;

Affects the color of links and highlights. Links will always change to match the main font color (black) on hover.

--shadow-color: /*FILL IN*/;

Affects the shadow behind the headings, and the color of the text when on the left side of tables. Currently set to white on most pages, I would recommend something with a high contrast from your accent color.

--fg-color  : /*FILL IN*/;

Foreground-Color. Affects the main box, as well as the header at the top and the color behind the background image (which is only seen if you attempt to scroll up or down past the limit).

--bg-image  : url(" /*FILL IN*/ ");

The background image pattern! Upload a photo into your personal folder, and then copy the url into here.

--bg-size   : /*FILL IN*/;

Affects the size of the background pattern. Pick a number (300-600 range is good to start) and experiment until you like how it looks.

Customizing headers

<title>NAME's page!</title>

Changes the title in the tab at the top.

<link rel="shortcut icon" href=sitewide-graphics/Orange-favocin.gif>

Replace the link here with an image and it will also show up on the tab

<hgroup>
  <h1>NAME</h1>
</hgroup>

The big display name at the top of the box. Your fruit name goes here.

<aside id="body-image">
  <img src="sitewide-graphics/Character-base.png" alt="Full body image of Full-body Character">
</aside>

This is the main character image. Upload your new one and just replace it here.

Adding text

<section id="TextBlock">
  <h2>Hello!</h2>
      
  <p>Here is where you put a little description, bio, whatever you want to say!</p>
</section>

Here is your first text section! The "h2" tag gives you a nice heading, which will automatically center and be given a shadow. The "p" or "paragraph" tag is smaller, and is for the bulk of your text.

<img src="Blueberry/Blueberry-single.png" alt="Image Name">

Your basic image code.

<thead>
  <tr class="full-body-big">
    <th colspan="4">About</th>
  </tr>
  <tr class="full-body-small">
    <th colspan="2">About</th>
  </tr>
</thead>

Okay, now we're getting to the intimidating part. You'll notice from the "h2" and "p" tags that your code window color-codes different text based on the function. Neocities uses a bunch of different theme options here, but most of them will have a distinct color for non-code text that will be visible on the page. As you scroll through the tables, note what words actually show up. This is all you need to pay attention to.

The wonderful creator of this template included special code to allow the tables to look better in a small window or on mobile. There are duplicates of each box, and when the window is shrunk they go from four in a row to two in a row. This means that everything you add must be doubled up, but also pay attention to the slight differences between the two in how they are formatted. Only change the content inside the "tr" tags.

If you want a bit of a challenge, you are welcome to copy and add more rows to the tables.

<article class="relation">
  <div class="icon">
    <h3>Name</h3>
    <img src="Blueberry/Blueberry-single.png" alt="Icon of Character Name">
  </div>
        
  <div class="details">
    <p>I think it would be cute to collect different little guys :]</p>
  </div>
</article>

These are the little boxes with an icon and text! I think it would be fun to use these to collect pets and friends, use them for whatever you like! Upload images into your folder (square works best here) and add some text.

<div class="scrollbox">
</div>

Everything inside this box will scroll once it reaches a certain max height. The template has one of these for fun blinkies, buttons, and graphics, and one for links. Also feel free to experiment and do whatever.

<div class="linebox">
</div>

Creates the little boxes with borders that I used for this page!

Conclusion

Have fun! Mess around with your page. Please do not touch anything in the css files! You should be able to change anything you need from the "style" header in your own page. If you want to change another variable, copy it from the css file into the "style" section, and replace the value there.

I will add the front page link once you want to make it public!