Character Page [08]: Fisher King
EDITING GUIDE & WALKTHROUGH
BEFORE WE BEGIN: This is a character page for showcasing information about your OCs, muses, biases, etc. It DOES NOT SHOW YOUR POSTS.
This guide assumes you have basic knowledge of HTML, and a lot of patience.
CODED BY GLENTHEMES
HOT TIP #1:
To avoid getting lost whilst editing, I've placed MAPLE LEAF EMOJIS to help you stay on track. When you see a row of leaves, they will followed with further instructions.
🍂🍂🍂🍂🍂🍂
Most colors and sizes can be edited in :root
HOT TIP #2:
When finding the places to edit, please use the code's search bar.
When you click anywhere in the code and press Ctrl+F (CMD+F for Mac), a search bar should pop up:
TABLE OF CONTENTS.
Cursor
Loading screen icon
Wallpaper / background
Custom links
Main character (Zagreus)
Main container
Character list
Detailed character profiles
slide 5
slide 7
slide 9
slide 11
slide 14
slide 18
slide 23
slide 30
* you don't have to make changes to all the elements I've written about. Just focus on things you need to edit!
CURSOR.
CURSOR
this is the normal cursor url. replace the highlighted part ONLY
this is url for when you click on something on the screen. replace the highlighted part ONLY
LOADING SCREEN ICON.
LOADING SCREEN ICON
if you want to use another image for the loading icon, replace the highlighted portion with an image url of your choice
WALLPAPER / BACKGROUND.
In the HTML's searchbar, type .shade and this stuff should come up!
loading screen background
replace the highlighted portion ONLY with an image link of your choice
wallpaper (actual)
replace the highlighted portion ONLY with an image link of your choice
change your background color here
this should be the same color as this one (a few lines down):
CUSTOM LINKS.
CUSTOM LINKS
Where do I edit them?
In this section:
How do I add a new link?
Duplicate this chunk of code, then change its contents!
this is the piece of code for the icon you want for that link.
choose one from this list (ionicons.com)
this is the URL for that link.
if you're linking to another blog or website, you need to put https:// or // at the start
this is the text that appears when you mouseover the link
[
in :root you can change colors and sizes
[OPTIONAL] Simple border:
If you don't like the image frame around the custom links, you can change it to a simple, single-colored bordered if you want.
Simply add simple-frame to the end of the <div class="naav"> line, like so:
Its color and thickness can be changed in :root
MAIN CHARACTER
(big image, left side)
SMALL TRANSPARENT IMAGE (above main character)
Description:
Fishing rod above Zagreus's head.
Where to find it:
In the code, look for:
How to change it:
this is where your image goes
you change the image size here
depending on which image you choose, you may want to reposition slightly so it's more "centered". there are options you can add to it. in this example I'm using 22px, but you can change that.
COLORFUL "GLOW SPIKES"
this is the gap between the left spikes & right spikes
the spikes are intended to be positioned "around" the small transparent image above the main character, so you may need to reposition the glow spikes so it's more accurate. there are options you can add to it. in this example I'm using 10px, but you can change that.
* as the gray text suggests, if you don't want to have glow spikes you can just delete that line.
in :root you can change the color spectrum of the glow spikes
MAIN CHARACTER IMAGE
Where to change:
Further adjustments:
you can change your image here
* the image height is automatic
please ensure that your image has a transparent background and cropped perfectly!
MAIN CONTAINER.
(right side)
HEADING & SUBTITLE
color & size options:
]
you can change the
heading text here
color & size options:
you can change the text here
(quotation marks aren't necessary)
CORNER IMAGES (skulls)
Where to change:
Further adjustments:
image for rightside corner image
image for leftside
corner image
add the word flip at the end to flip the image
useful if you want to use the same image for both corners :)
the size of BOTH left & right images
image reposition (more inwards or more outwards)
affects both images
image reposition (nudge upwards / downwards)
affects both images
MAIN BOX
Adjustments:
You can choose between a solid background color, or a semi-transparent background.
Please beware that the semi-transparent background is not supported by Firefox.
put yes if you want a semi-transparent background. by choosing yes, the solid background color will not apply, and will instead adjust to your wallpaper image.
put no if you want a solid color background.
"CHOOSE" TITLE
SCROLLBAR
The "choose" title can be anything you like.
Please note that since it's technically an overview heading for the character *list*, it doesn't change with the character you are currently viewing.
You can change the scrollbar colors as shown here in :root, but please be aware that they don't apply on Firefox.
you can change its text size & color in :root
CHARACTER LIST.
EACH CHARACTER
The bottom-left triangle and the top-right mini tab are optional (instructions to come).
Each character needs a name: chara-id. This ID can be anything you want, including '-' and '_', but do not use spaces.
You can add/remove/adjust as many categories as you like. If you want more types, just add it to the list, e.g.�--Character-TYPE-10-Color:#ffffff;
You can also change the gray comments to the names of your categories so you can keep track of them :) Just remember that the TYPEs must be numerical.
You can showcase your characters
in any order you like.
character ID goes here. I suggest using the name of your character. you need to use it later
a "type" of character refers to the color category they belong to.
OUTER BORDER EFFECTS
Default
Mouse-over
You can change the border thickness, padding, colors etc in :root
CHARACTER ICON DIAMOND FRAME
Normal frame
Simple frame
To switch to a simple frame for that character, go to the chara-select-image line and add simple-frame at the end, like this:
You can make adjustments in :root
If you choose to have a normal frame instead of a simple frame, your SimpleFrame preferences will not show.
COLORED TRIANGLE AND MINI TAB
The color will automatically adjust based on your character's TYPE. The triangle and mini tab are present by default, but you can hide them if you want.
no tab, has triangle
has tab, no triangle
on the menu-character line, add no-tab at the end
on the menu-character line, add no-triangle at the end
* you can put no-tab and no-triangle on the same line to remove them both!
I covered this in slide 24, but just another reminder: you can edit the colors of character types under this section in :root
CHARACTER PREVIEW ICON
You can change the general size and padding of these images in :root
To change the actual image, go to the chara-select-image line:
the image is centered and it is assumed to be transparent
you can adjust the size of a particular character image here. can go over 100%
if you want the image to fill
up the container instead,
add fill to the end of the line, before '>'
you can adjust the positioning of each image. Available options:�
* you can use any number,
not just 3px
CHARACTER PREVIEW NAME + TEXT
one line
one line
one line
you can change these to anything you like, e.g.
<label>Name:</label> handsome
<label>Age:</label> 20� <label>Pronouns:</label> they/them
You can change font sizes and colors in :root
DETAILED CHARACTER PROFILES.
(when you click on a character, it takes you to their detailed profile panel)
"BACK TO ALL" TEXT
this is the piece of code for the icon you want for the "back to all characters" button.
choose one from this list (ionicons.com)
to stop the icon from flipping, delete this line:
CHARA ID PANEL
Using the chara-id you assigned to that character earlier in their menu-character line, apply it again on this line.
You do not need to add its TYPE here.
Character name goes here.
You can put anything, including spaces.
SIDEBAR IMAGE (LEFT)
you can adjust how large the image is, relative to its container. please only use percentages!
You can change the master width, background, borders, and glow spike properties in :root
DETAILED PROFILE TEXT
use this to start a new paragraph
type whatever you want here
highlighted parts are the LABELs.
you can replace this text with whatever you want, but do not remove the <label></label> tags
you can adjust general appearance options in :root
THANK YOU.
If you have any questions or if you're stuck, you can send a message in the #theme-help channel of my discord server, or DM me. Either way, please be sure to read the #server-rules so I can help you quicker!
WRITTEN BY GLENTHEMES. WITH PAIN.