This is a premium theme!

After you purchase the code via Ko-Fi, you'll receive a txt file that you can download. Once you have downloaded the file, you can:

1. Copy everything you see in the file. Don’t copy half of it, or copy parts of it. You can use CTRL + A or COMMAND + A to get everything selected at once.
2. Go to your blog and click on the palette icon to edit appearance. It should redirect you to your customization page.
3. Click on Edit HTML. It will show you the code for the current theme you're using so you will have to delete the entirety of the pre-existing code.
4. Paste the code you had copied from the TXT file earlier, Update Preview and then Save.

Things to keep in mind

Please remember that you are strictly forbidden to redistribute the source code. The terms and conditions that you see here also apply to premium themes and pages.

This theme is inspired by the Windows 95 File Explorer. It's a responsive all-in-one contained theme with draggable windows, and includes 6 sections (blog posts, an about me, navigation links, the ask and/or submission box, your current following, and recently liked posts).

Other features to note:

• A day and night toggle button that will stay in the selected mode until it is turned off. A dark mode option is available for those who prefer a dark color scheme on their blogs instead of the default light colors. The day and night mode button will also change according to the scheme you are using.
• Draggable description, updates, and searchbar windows. You can also close them by pressing the 'X' icon. Only the container with the blog posts isn't draggable.
• Supports NPF posts and page links. It's designed to make NPF posts look like legacy posts and vice versa.
• Like and reblog buttons, and a custom "Not Found" page.
• 3 custom links. You can always add more by using page links.

Light or Dark Version

You can choose between a light or dark color scheme. The default is light, but to change it to dark, please select the option under Blog Theme. The day and night toggle button will change according to the scheme you choose.

Background

You can choose between a one solid color background, a linear-gradient background, or an image background.

There's also a drop down menu for the background-size property for both the light and dark theme background images. This only applies for an image background.

If you scroll down to the text boxes, you'll also see a section of background options. You can decide the value of the CSS properties for background-repeat, background-attachment, and background-position.

You may view this site for more information.

The Background Gradient Direction is for when you use the "gradient" option from the Background drop-down menu. You can use deg or directions. View this site for more information.

Normal Notecount

The default option is the short notecount as shown below.

To clarify:

• A post that has less than 1,000 notes will be indicated with MB.
• A post that has more than 1,000 notes and less than 1,000,000 notes will be indicated with GB.
• A post that has more than 1,000,000 notes will be indicated with TB.

The idea is to make the amount of notes a post has to look like it's a post's "data capacity" by using MB, GB, and TB.

If you want to turn this feature off, just enable the Normal Notecount option.

The theme's default option is to use image icons. These images are what you see as icons of the windows, the "folder" icons in the sidebar, and the icons in the taskbar.

If you do not want to use image icons, you can enable the option of using font icons instead.

There are multiple text boxes titled _____ Icon. Those are what changes the icons for specific elements.

1. Go to Tabler Icons and choose an icon.
2. Once you have chosen an icon, click on it and copy its name.

   

3. Paste it or type it in the text box of the icon you are trying to change. Please see the example below:
   Portrait Icon

Body Font

The text box titled Body Font is the font family that you will use on your blog. You will need to go to the Google Fonts site and choose the font family of your choice. Next, you will need to type in the name of the font into the Body Font text box, and then Save.

Font Size

You can also change the size of your font. There is a text box titled Font Size where you can enter a numerical value of your choice. You can also choose to use px or em (or any other unit that's applicable). Remember to press Save.

Font Weight

Depending on the font family of your choice, you may want to change the weight or boldness of the font. You can easily do this by entering a numerical value in the text box titled Font Weight. By default, there is a default value of 400. You may view this site for more information.

Line Height

This sets the height of a line box. In the text box titled Line Height, there's a default option of 1.5em. You can see more options that you may like on this site.

Sidebar Size

The Sidebar Size dictates the width of the sidebar. I mentioned it underneath Post Size already, but if you happen to use vw or %, remember to use them for Post Size, and that the numerical values added together must be less than 90. For example, the post size is 40vw while the sidebar size is 15vw, which equals to 55vw.

Post Size

Like Sidebar Size, Post Size can change the width of the posts. The default value vw is recommended, but you can also use px or % if you like.

If you happen to use vw or %, remember to use them for the Sidebar Size, and that the numerical values added together must be less than 90. For example, the post size is 40vw while the sidebar size is 15vw, which equals to 55vw.

Post Wrap Gap

Post Wrap Gap indicates the gap between posts on the index page and in the recently liked tab.

Post Gap

Post Gap indicates the gap between the post and the permalink information in the permalink page. This also indicates the gap between the "windows" in the contact, about, and navigation tabs.

Photoset Gap

Photoset Gap is also self-explanatory. It just indicates the gap width between photos in photosets (NPF or legacy).

The description window is hidden by default and can be opened by clicking on Start. To have the description window appear without having to click on Start, you can just enable the option to show the description window.

Subtitle

The subtitle will be the description window's title as shown below.

Custom Avatar

If you have the option to show avatar enabled, your avatar will be visible. But if you want to use a different avatar image, you can just enable Custom Avatar and upload an image.

Custom Title

The title will appear in the posts window as show below.

For a custom title, just enter what you want in the text box titled Custom Title. If there is nothing inside the text box, it will show your default title.

Custom Description

For a custom description, just enter what you want in the text box titled Custom Description. If there is nothing inside the text box, it will show your default description.

Please note that if you DO NOT have a custom description and choose to hide your description, your description will not appear in the description window.

Social Media

If you want to add any social media links, you can enter them into the text box. If you do not want to add any social media links, you can just keep the text box empty.

Here is the HTML markup of a link for you to use.

<a href="LINK URL">LINK NAME</a>

You are given 3 custom links by default. They'll appear in the sidebar which appears next to the blog posts. If you do not need all 3 custom links, just make sure these text boxes are empty:

If you want to add more links, it would be best to use page links. You can view how to add them here. Keep in mind that the page links work with all page layouts (standard, custom, link).

You will also get a link that says "random" which will direct you to a random post that you have posted or reblogged.

It's best to just leave it there, especially if you do not have any links listed under More Links.

By default, the updates window is hidden and the updates button is visible in the taskbar.

If you would like to have the updates window appear, you can enable the option:

However, if you do not want to use the updates window and would like to hide the updates button in the taskbar, enable this option:

Updates Content

If you have updates that you want to share with visitors, type anything in the text box titled Updates for it to appear.

Additionally, there is a text box titled Updates Header to change the title of your updates window.

Currently

There is an option to show what you're currently watching, reading, listening to, and playing. If you would like to hide this, enable the toggle option like below:

Like the updates window, the search window is hidden by default while the searchbar button is visible in the taskbar.

If you would like to have the search window appear, you can enable the option:

The search window and searchbar button in the taskbar will be hidden if you enable the option Discourage searching of { your blog name } from your blog settings.

Remember to enable the toggle option in order for the About section to show up. It should look like this:

Bear in mind that the windows in the About section all have a title and icon. They will be named _____ Title and _____ Icon.

About Info

This is where you would add your 'about me.' It can be as long or as short as you want. It is recommended that you do know some basic HTML. Unlike my other themes with an about section included, there is no option to remove the About Info section.

Some basic HTML to know:

<h1>Biggest Header</h1>
<h2>Bigger Header<h2>
<h3>Header</h3>
<h4>Subheader</h4>
<b>Bold</b>. <i>Italics</i>. <u>Underline</u>. 
<p>This is a paragraph.</p>
<blockquote>This is a blockquote.</blockquote> 
<ul>
<li>A</li>
<li>bulleted</li>
<li>list</li>
</ul>
<ol>
<li>A</li>
<li>numbered</li>
<li>list</li>
</ol> 
<p>Another paragraph.</p>

Details

You can write as many details as you want in the text box.

Just make sure that each detail is wrapped by <span> </span>.

<span><i class="ti ti-user"></i>Name</span>
<span><i class="ti ti-cake"></i>Age</span>
<span><i class="ti ti-map-pin"></i>Location</span>
<span><i class="ti ti-briefcase"></i>Job</span>

Like the others, if you do not want the details section, make sure it is empty.

Favorite Colors

Pretty self-explanatory. You can add a bunch of your favorite colors in this section.

Make sure that you include the HEX code of the color in the style attribute:

<i class="ti ti-circle-filled" style="color:HEX CODE HERE;"></i>

You don't necessarily need the HEX code of a color either. You can also choose one of the colors supported by browsers, which you can view the list from here.

<span><i class="ti ti-circle-filled" style="color:lightcoral;"></i>Light Coral</span>

Likes & Dislikes

Your likes and dislikes have a corresponding text box you can use.

Each text box comes with the needed HTML markup. To add more to your likes and dislikes, you must follow this piece of code:

<li>Likes</li>

<li>Dislikes</li>

To hide your likes and dislikes, just make sure their text boxes are empty:

Quote

You can insert a quote of your choice.

You don't necessarily have to have a quote or source. To have the quote window removed, just make sure there's nothing in the text boxes like shown below:

Remember to enable the toggle option in order for the Navigation section to show up. It should look like this:

There should be six (6) text boxes titled Links # Section and Tags # Section. For each text box, you can add as many links and headers as you want.

<h2>Header</h2>
<h3>Subheading</h3>
<a href="LINK URL">Link</a>
<a href="LINK URL">#Tag</a>

Remember to enable the toggle option in order for the Following section to show up. It should look like this:

Please keep in mind that your following will only show up with primary blogs and if you have enabled the option to share your following in your blog settings.

Unlike the other sections, the Recently Liked section will only show up if you enable the option to share your likes in your blog settings and will only work with primary blogs.