Getting Started

If you're installing the theme through GitHub:

1. Click on the link provided in the theme post and you'll be redirected to a page containing the raw code for the theme.
2. Copy everything you see on the page. 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.
3. Go to your blog and click on the palette icon to "edit appearance." It should redirect you to your customization page.
4. 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.
5. Paste the code you had copied earlier, Update Preview and then Save.

If you're installing the theme via Theme Garden:

1. Select the theme and click on Install.
2. You'll be shown a drop down menu consisting of your main and side blogs. Select the blog you want to use the theme on, and click on Install again.

Things to keep in mind:

• It is a contained, all-in-one theme that includes the following:
• blog posts
• an about section
• navigation
• recently liked posts
• following
• muses
• Please do not ask me how to add more sections/tabs.

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.

Left or Right Sidebar

Similarly, you can choose between a left or right sidebar. The default is a right sidebar, but to change the sidebar to the left, please select the option under Blog Layout.

Accent

You can choose between gradient, Accent 1 or Accent 2 for your accent colors depending on your preference.

Borders Style

You can choose between solid, dashed or dotted lines. This selection will affect every element that has borders. The default style is solid.

Header Style

This option allows you to transform the text between none, uppercase or lowercase.

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.

Post Size

This is pretty much self-explanatory. 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 35vw, which equals to 75vw.

Photoset Gap

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

Sidebar Size

Like Post 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 35vw, which equals to 75vw.

Sidebar Images

There are two (2) sidebar images in this theme. However, the first sidebar image that uses your header image as the default (Sidebar 1) will always be visible on your blog. There is no option to hide it like the other sidebar image.

There are default images for each sidebar image. If you wish to use another image for either Sidebar 1 or Sidebar 2, you can upload it here:

The image for Sidebar 2 will be above your description. If you do not want an image, just enable the toggle option Hide Sidebar 2 Image.

Sidebar Links

Besides the home, ask, submit and archive links, there's a drop-down menu that contains the links to the sections, 3 custom links, and page links. If you do not need all 3 custom links, just make sure these text boxes are empty:

Portrait Icon

This pertains to the icon you see in top-right corner of the sidebar. The icon has no particular feature, it's just there to fill up the space.

To change the icon, please refer to the section Customizable Icons for further instructions.

Name

Pretty self-explanatory. You can enter your name, nickname, or any other name you'd like to be called.

Status and Status Color

You can indicate your status using the text boxes Status and Status Color. They show up in the description box in the sidebar. For a better look at its appearance in the theme, you can just view the preview for reference.

Custom Title & 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.

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

The updates tab will only appear if the text box titled Updates has something. If it is empty, the updates tab will automatically be hidden.

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

You can also change the icons of the updates tab. One indicates the close button for the updates tab.

Currently

There is an option to show what you're currently watching, reading, listening to, and playing. Just make sure toggle option is disabled like below:

• The searchbar will disappear if you enable the option Hide { your blog name } from search results from your blog settings.
• To have the searchbar appear on your blog, just disable the option.

  

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

Quote

You can insert a quote of your choice or simply use it as a header.

However, if you want to add the quote marks that you see in the preview, you can just add this piece of code in the text box.

<i class="ti ti-quote left-qte"></i>Quote here.<i class="ti ti-quote right-qte"></i>

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

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>Name</span>
<span>Age</span>
<span>Pronouns</span>

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

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. You can also exclude it by keeping the text box empty.

Some basic HTML to know:

<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>

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>

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:

Skills

You're given 5 skills to display in your about section. Each one has text boxes that have the skill name and the skill percentage.

If you want to show less skills, make sure the text box titled Skill # is empty.

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 Muses section to show up. It should look like this:

Muses Info

In this section, you can add a summary about your muses in Muses Info.

Like the About Info section, it would be helpful to know basic HTML. You can look up some generic HTML markups or you can look under About Info above.

Muses

There are three (3) text boxes provided where you can add as many muses as you want.

Some of the text boxes already come with the code needed for the muses, but here is the code again:

<div class="mu flex justify">
<img src="IMAGE URL"> <--- Image of muse --->
<div class="m-info flex center">
<div class="m-name">Name</div> <--- Name of muse --->
<div class="m-in">Keep it short.</div> <--- Information about muse. It's best to keep it one line. --->
</div>
</div>

If you don't want to show information about your muses, you can just delete

<div class="m-in">Keep it short.</div>

You can also add links to your muses by using this code:

<a class="mu flex justify" href="LINK URL" title="LINK TITLE">
<img src="IMAGE URL"> <--- Image of muse --->
<div class="m-info flex center">
<div class="m-name">Name</div> <--- Name of muse --->
<div class="m-in">Keep it short.</div> <--- Information about muse. It's best to keep it one line. --->
</div>
</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.