“HEARTWORM”
ABOUT PAGE [19] BY GLENTHEMES
USER GUIDE — how to install and edit
TABLE OF CONTENTS
Introduction
SLIDE 3
How to install
SLIDE 4-5
Options list
SLIDE 6
Background image & color
SLIDE 8
Header image
SLIDE 9
Header icon
SLIDE 10
Header status
SLIDE 11
Header username
SLIDE 12
Icons guide
SLIDE 7
Boxes
SLIDE 15
Box headings
SLIDE 16
Box contents
SLIDE 17
Text formatting
SLIDE 18
Popup askbox
SLIDE 14
Need help?
SLIDE 19
Header links
SLIDE 13
INTRODUCTION
HOW TO INSTALL
Step 1: Get the code.
Open this link:�glen-themes.gitlab.io/abt-pages/19/heartworm
Select All, and Copy.
Step 2: Go to your customize page.
Go to https://tumblr.com/customize/your-blog-name
Replace your-blog-name with your blog's name.
So e.g. my blog name is glen-px, I would go to:
https://tumblr.com/customize/glen-px
Step 3: Add a new page.
[1/2]
Click Standard Layout and change it to Custom Layout:
Click where url is and give it a url name, e.g.
about-me:
Scroll all the way to the bottom and click Custom Layout:
HOW TO INSTALL
Step 4: Apply the code.
Click the huge blank space labelled Custom HTML:
Step 6: Check it out.
[2/2]
Open a new tab and go to
https://your-blog-name.tumblr.com/about-me
And paste in the code you copied from Step 1.
Step 5: Save.
Click Update Preview, then Save.
In the above URL:
If it takes you back to the Tumblr dashboard, you need to disable the dashboard-only view.
OPTIONS LIST
All font sizes, colors, spacing etc can be edited in a gigantic list labeled :root 👇
ICONS GUIDE
⭐ FontAwesome — how to use:
FontAwesome icons are identifiable by their <i class="fa- prefix:
To change the icon, go to this site and browse only the free ones.
Click on an icon, then click its HTML code to copy it:
You can then replace the entire
<i class="fa- line with it.
⭐ MingCute — how to use:
MingCute icons are identifiable by their <i class="mgc_ prefix:
To change the icon, go to this site and pick any icon you want to use.
Click on an icon, double-click its name, Copy it manually, and replace after mgc_:
BACKGROUND IMAGE & COLOR
You can change the background image, background color, and background size here:
Note about background size:
HEADER IMAGE
You can use any dimensions for the header image, but make sure that it is not TOO large. Currently the header is 1280x400.
You can change the header image here:
Banner image URL goes here.
Image ID/description goes here.
(banner)
HEADER ICON
Please use a square image for your icon image. You can swap the image here:
(profile picture)
Icon image URL goes here.
Image ID/description goes here.
You can change the image size and border thicknesses here:
The border color is the same as your boxes’ background color, which can be changed here:
HEADER STATUS
You can change what the text says here:
You can change the colors etc here:
Please keep it short!
HEADER USERNAME
This will automatically show as @your-username when you view it live. You can confirm this by opening your page in a new tab or window.
When you’re editing, you may see that the username looks like this:
You are, of course, free to change it to something custom if you wish:
If you don’t want the “@” symbol either, you can remove it by deleting this entire section:
HEADER LINKS
You can edit the links here:
This block is the HTML markup for one link. To add another link, copy and paste this entire block.
Link’s URL goes here:
Link’s icon is on the <i class="... line.
You can choose from both FontAwesome icons and MingCute icons. Read the icons guide on Slide 7 for instructions.
Link’s hover label text goes here:
POPUP ASKBOX
The popup ask can be summoned by clicking the envelope icon in the header links:
When you’re still customizing, your askbox will not work properly. Open your page in a new tab or window to see if it shows. If it still doesn’t appear, you may need to enable your ask.
You can change the ask popup’s title here:
The actual askbox is here�(you do not need to change {Name}):
I’ve dimmed the askbox so it’s not as bright, especially if the rest of your colors are dark. Feel free to change this to no.
BOXES
Each box starts with this:
Each box ends with this:
Each box defaults to a 2-column view, but you can override this (force it to take up the entire width) by setting full-width="yes" like this:
Boxes’ colors, font sizes etc can be changed here:
Feel free to add or remove as many boxes as you like.
BOX HEADINGS
Each box’s heading consists of the following:
Box heading colors, font sizes etc can be changed here:
BOX CONTENTS
Each bullet list must start with this:
Box contents must start with this:
Box contents must end with this:
Bullet list row’s icon. Read the icons guide on Slide 7 for instructions.
Each bullet list row looks like this:
Label text
Detail text
Each bullet list must end with this:
TEXT FORMATTING
A list of all supported text formatting (e.g. bold, italic) can be found under this comment:
Hyphens are enabled by default; if you do not want hyphens, you can add hyphens="no" to �<div class="box-contents"> like so:
THANK YOU
I hope this guide was helpful! Please revisit the Table of Contents on Slide 2 to see if there’s anything you may have missed. For further help, feel free to DM me or drop a message in the #theme-help channel of my Discord server [ discord.gg/RcMKnwz ] after reading the #server-rules!