Folder Files

A theme by Scribblemakes

You're currently looking at the landing page for new viewers. You can put whatever you want here and people will see it first if they've never visited before. If a viewer has visited your page recently, they'll see the last tab they were looking at

If you're looking for installation instructions, click on the links to the left.

Setup

This tutorial assumes you have a basic understanding of HTML and how to edit HTML files. If you are unfamiliar with HTML editing, or do not want to do it manually, it's recommended to use the Folder Files JS theme instead.

To start, download this theme's .ZIP folder from its theme section on Scribblemakes.com. It will include this .HTML file, a .CSS file, image files, and a .JS file. Unzip the .ZIP file and upload all the files into the same folder.

Open up the .HTML file. This file will contain all of the instructions you're reading right now. You can get started by replacing the interior text (things inside the <div class="ff_files"> elements) with whatever you want to display on your website.

If you want to add your own pages, you will need to copy the <input> and <label> elements. For example, to make a new page you could add:


            <input type="radio" name="ff_file" id="myPageButton" class="ff_fileButton"/>

            <label tabIndex="0" for="myPageButton" class="ff_fileLabel"><img class="ff_imgNoEnlarge" src="myImage.png">My New Page</label>

              <div class="ff_files">

                <p>This is my new page.</p>

              </div>

You can also add, or remove, the header by editing the HEADER section of the .HTML file. The CSS will automatically account for a missing, or present, header.

Customisation

The CSS file contains a list of variables you can easily change to control the width, colours, and borders of your webpage. Navigate to the 'style.css' file where you can edit these variables. You can also get a live preview if you edit your webpage's css through your browser's inspect option, but remember to save your changes to your .CSS file before refreshing the page.

Example File Layout

Example Layout

Layout Description

This layout is included in the CSS file under the .ff_file_sidebarLeft and .ff_file_sidebarRight classes. You can create it by creating <div> elements with those classes.

File 4

Content goes here 4

File 5

Content goes here 5

File 6

Content goes here 6

Example Folder

File 7

Content goes here 7

File 8

Content goes here 8

Return to Homepage