Theme Features

Fluorine is the product of my indecisiveness turned into a strength — enjoy multiple ways of styling your header, blog navigation, sidebar, and posts (all post sizes + multi-column support).

Previews: Yoi / Rai / Aya

Tutorials

This page provides an overview of all customisation options. For step-by-step help on how to customise specific elements of the theme, please see the tutorials below:

Tutorial 01: Adding Custom Links & Pages

Features

OVERALL

Choose a main accent colour that is seen throughout the theme.
Customised scrollbar, text highlight, hover tooltips. You can edit the bold, italic, and linked text formatting.
Icons throughout the theme: iconsax, cappuccicons (permalink), feather icons (audio posts).

HEADER

Choose to have a full-width, half-width, or no header at all.
Headers automatically fill the width set, and heights can be adjusted to small (200px), medium (350px), or large (500px).
Header can have a straight bottom cut-off, or a faded gradient cut-off.

BLOG NAVIGATION

Choose to have a fixed full-width top bar navigation, or a sticky navigation which sticks to the top of the screen once you scroll past it.
Sticky navigation can be either full-width or half-width. The width automatically adjusts to the width of your content (sidebar + posts).
Shows your avatar and blog title on the right.
The text of the blog navigation links can be edited; e.g, you can change “index” to say “home”, “refresh” or whatever you would like.
Search bar can be enabled to appear with your blog navigation links.
Small slashes separate your blog navigation links and searchbar. These can be removed if desired. The spacing between the links can also be adjusted.

SIDEBAR

Sidebar sticks to the top below your navigation once you scroll down.
Position can be adjusted to be on the left or the right of posts.
Sidebar image can be either an icon + short title, or a normal-sized image. Box shadow can be added for extra colour.
Description has a title which you can edit. Text styling of your description is supported.
Up to 8 custom links. These are non-built-in and must be manually added because of the added icon customisation. Tutorial here.

POSTS & CONTENT

All post sizes supported: 250px / 400px / 500px / 700px.
You can have one column, two columns, or three columns of posts. However, some content widths (e.g, three columns of 500px posts) may be too wide and get cut off on normal screen sizes. If such a combination is selected, a pop-up will appear to advise you.
Pinned post label.
Tags can be always shown, appear on toggle, or hidden from your blog index. They will always appear in your permalink page.
Every post type is uniquely styled. Album arts are visible on audio posts, and chat posts are styled as chat log messages.
Tag pages and search pages have an additional styled header.

Theme Options

IMAGE OPTIONS

Background image: Could be a repeated background or a wallpaper. If wallpaper, remember to toggle the “Wallpaper Background” option below.
Favicon: The lil’ icon that goes into your browser tab. If you upload a custom favicon here, you need to toggle the “Custom Favicon” option below.
Sidebar Image: Adjust the size as a small icon or full-width below.
Header Image: Will automatically stretch to fill the width and height. High-res landscape images look best.

SELECTION OPTIONS (selected options in this preview indicated by an asterisk*)

Main Font: Karla* / Nunito / Ubuntu / Poppins / Open Sans / Roboto
Navigation: sticky (half) * / sticky (full) / fixed (full)
Header Width: half / full* / none
Header Height: medium* / small / large
Navigation Links Separator: wide* / narrow / none
Sidebar Image Style: icon* / full
Sidebar Alignment: left* / right
Post Size: 250px / 400px* / 500px / 700px
Post Columns: one column / two columns* / three columns
Photo Lightbox: light* / dark
Photoset Grip Gap: 0px* / 3px / 5px
List Style: roman numerals / hiragana* / numbers / alphabets
Post Dates: 16 Jun @ 14:12 PM * / 16 Jun 2022 @ 14:12 PM / 16 Jun 2022 / 16 June / 4 hours ago / Thursday / 16/06/22 + 14:12 PM / 16/06/22
Post Tags: toggle* / always show / none
Tumblr Controls Colour: white / grey / black*

ON/OFF TOGGLES (Selected options in brackets)

Wallpaper Background (off): Turn on if you want to stretch your Background Image over the full background.
Custom Favicon (off): Turn on if you want to upload your own custom favicon.
Header Fade (off): Turn on if you want the bottom of your full-width header to fade into the background.
Sidebar Image Shadow (on): Turn on to add an accent-colour solid shadow to your sidebar icon/image.
Searchbar (on): Turn on to add a search bar to your blog navigation.
Post Captions (off): Turn on to show post captions on index. Recommended to turn this off for two/three column posts.
Truncate Note Count (on): Turn on to truncate note counts; e.g, 5821 notes → 5.8k notes.

TEXT OPTIONS

Browser Tab Title: The name of the browser tab.
Sidebar Icon Title: The text that appears next to the sidebar icon when sidebar image style is an icon.
Sidebar Description Title: The text that goes above your description.
Navigation Index/Ask/Archive Title: For you to customise the link names in the navigation bar.
Link X Title: Name of your custom link.
Link X URL: Link of your custom link.
Link X Icon: Iconsax icon name of your custom link.

Credits

Preview images are official art from Genshin Impact (hoyoverse)
cappuccicons by suiomi
feather icons by Cole Bemis
iconsax icons by vuesax, adapted into icon font by glenthemes
NPF images fix v3.0 by glenthemes
Griddery v2.0 by glenthemes
photosets.css by annasthms & eggdesign
customaudio.js by annasthms
Style-my-Tooltips by malihu
Truncate note counts by shythemes