Strawberry Page Guide

Getting Started

This is a premium page!

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:

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.
Go to your blog and click on the palette icon to edit appearance. It should redirect you to your customization page.
Scroll all the way to bottom of the page until you see Add a page and click on it.
In the drop-down menu, select Custom Layout.
Paste the code you had copied from the TXT file earlier, Update Preview and then Save.

Things to keep in mind

Make sure to receive permission from Tumblr to use JavaScript on your blogs. Most, if not all, custom pages will use JavaScript in the codes which will then make it difficult for you to add a custom page.

To gain permission to use JavaScript on your blog, please refer to @glenthemes' template on asking Tumblr Support.

Additionally, I ask that you do not redistribute the source code. The terms and conditions that you see here also apply to premium themes and pages.

Theme Information

Features

Like Shortcake, this page uses tabs. This is so you can add as many muses as you want without a limit.

You can "filter" or sort your muses based on your own category system. This is recommended if you happen to have a lot and don't want to give each muse a detailed "about me" section.

Please scroll down to "Muses" for an in-depth explanation.

Options

If you scroll down the code, you should see this:


<body class="light onebg hide-ctrls img-icons">
<!--- 
★ Change "light" to "dark" if you want to use the dark color scheme. 
★ Change "onebg" to "gradbg" or "imgbg" if you want a linear-gradient or image background.
★ Change "hide-ctrls" to "show-ctrls" if you want the Tumblr controls to appear.
★ Change "img-icons" to "font-icons" if you want the 'window bar' to use font icons instead of image icons.
--->

Although I provided instructions in the source code, I will explain what each one means a little more below.

Light or Dark Version

You can choose between a light or dark color scheme. The default is light, as seen in <body>. Just change light to dark for the dark color scheme. The day and night toggle button will change according to the scheme you choose.


<body class="dark">

Background

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

onebg indicates one solid color background.
gradbg indicates a linear-gradient background.
imgbg indicates an image background.


<body class="gradbg">
<body class="imgbg">

Tumblr Controls

You can hide the Tumblr Controls if you want. For it to show, just replace hide-ctrls with show-ctrls.


<body class="show-ctrls">

Image or Font Icons

The page'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.

To use font icons instead, just replace img-icons to font-icons.


<body class="font-icons">

Image Icons

The image icons are indicated by this line of code:


<div class="img"><img src="IMG URL" draggable="false"></div>

Just replace IMG URL with the image's address. So the URL of the image should end in either .jpg, .png, .gif, .svg, etc.


<div class="img"><img src="https://win98icons.alexmeub.com/icons/png/desktop-5.png" draggable="false"></div>

Font Icons

The font icons are indicated by this line of code:


<div class="font"><i class="ti ti-ICON-NAME"></i></div>

To change the font icons, please follow these instructions:

Go to Tabler Icons and choose an icon.
Once you have chosen an icon, click on it and copy its webfont HTML. It should look something like this:


<i class="ti ti-star"></i>

Paste it between <div class="font> </div>:
```
<div class="font><i class="ti ti-star"></i></div>
```
However, you can also simply just copy the NAME of the icon and just replace the pre-existing one in the code.

CSS Variables

Like the rest of my released codes, this page uses CSS variables. This is so you, the consumer, can change repeating CSS properties without having to search and replace each one (i.e. changing a color that's been duplicated in many places).


:root {
    --body-font:Tahoma,sans-serif;
    --body-size:12px;
    --body-wgt:400;
    --line-hgt:1.5em;
    --bg-direction:to bottom; 
    /* You can change the direction of the gradient background */
    --muse-column:2;
    /* You can change the number of columns for the muses groups */
    --muse-mobile-column:1; 
    /* Changes the number of columns for the muses groups on mobile */
    
    /* SIZES */
    --side-size:15vw; /* Sidebar width */
    --post-size:40vw; /* Window width */
    --postwrap-gap:8rem; /* Window wrap gap */
    --post-gap:30px; /* Window gap */
    
    --small:40%; /* Small window width */
    --half:50%; /* Half window width */
    --med:60%; /* Medium window width */
    
    --mobile-small:35%; /* Mobile small window width */
    --mobile-half:50%; /* Mobile half window width */
    --mobile-med:65%; /* Mobile Medium window width */
    
    /* COLORS */
    --links:#f46e8a;
    --links-hover:#9dc6d7;
    --selection-bg:#faaca8;
    --selection-rgb:250,172,168;
    --selection:#ffffff;
    --tooltips:#000000;
    --tooltips-text:#ffffff;
}

Single Muse

For a detailed section about a muse, you must first create a button for said muse.


<label class="tbtn" onclick="openTab(event,'TAB_NAME')"><img src="IMG URL" draggable="false">MUSE NAME</label>

Make sure that you add this between <div class="f"> </div>.

HOWEVER, if you are "grouping" or "sorting" your muses by category and want to give each muse a detailed section about them, you should paste the above code between <div class="inner-folder"> </div>.


<label><div class="img"><img src="https://64.media.tumblr.com/a837be3d28032d6a8ea6a98ae2550a3d/dab6530fbf46d1a2-fb/s2048x3072/f186b2fa153067ab00e363cd5ceade4b4eef39fc.png" draggable="false"></div><div class="font"><i class="ti ti-folder"></i></div>GROUP NAME</label>
<div class="inner-folder">

<label class="tbtn" onclick="openTab(event,'TAB_NAME')"><div class="img"><img src="IMG URL" draggable="false"></div><div class="font"><i class="ti ti-user"></i></div>MUSE NAME</label>

</div><!--- INNER FOLDER --->

Once you have created a button for your muse, you'll need to create a section with an id selector that matches the name of the tab that you put down.
```
<section id="TAB_NAME" class="tab">
<div class="wrap flex justify">
Stuff goes here.
</div>
</section>
```
Make sure you paste it between <div class="tabs"> </div>.

You can then add as many windows as you want, and determine each window's width by using the classes: small, med, and half.


<!--- This would go in between <div class="wrap flex justify"> </div> --->

<div class="half">
<article>
<div class="window-header flex justify center">
<div class="winhead flex justify">
<div class="img"><img src="IMG URL" draggable="false"></div><div class="font"><i class="ti ti-star"></i></div>
<div class="w-info flex center"><div class="w-title">
<span class="wti">Window Title</span>
</div></div>
</div>
<div class="post-btns">
<i class="ti ti-minus min"></i><i class="ti ti-rectangle win"></i><i class="ti ti-x"></i>
</div>
</div>
<div class="padding"><div class="inner-padding">
Information goes here.
</div></div>
</article>
</div>

Muse Group

This is for if you would rather not do a detailed section for each muse and would rather just sort them into groups.

Like for a single muse, you must first create a button for the muse group.


<label class="tbtn" onclick="openTab(event,'TAB_NAME')"><div class="img"><img src="https://64.media.tumblr.com/a837be3d28032d6a8ea6a98ae2550a3d/dab6530fbf46d1a2-fb/s2048x3072/f186b2fa153067ab00e363cd5ceade4b4eef39fc.png" draggable="false"></div><div class="font"><i class="ti ti-folder"></i></div>GROUP NAME</label>

Once you have created a button for your muse, you'll need to create a section with an id selector that matches the name of the tab that you put down.


<section id="TAB_NAME" class="tab">
<div class="wrap flex justify">
<article>
<div class="window-header flex justify center">
<div class="winhead flex justify">
<img src="IMG URL HERE" draggable="false">
<div class="w-info flex center"><div class="w-title">
<span class="wti">Muses</span>
</div></div>
</div>
<div class="post-btns">
<i class="ti ti-minus min"></i><i class="ti ti-rectangle win"></i><i class="ti ti-x"></i>
</div>
</div>
<div class="padding"><div class="inner-padding">

<div class="muses">
<a class="person flex justify" href="LINK URL" target="_blank"><img src="IMG URL"><div class="m-info flex center"><div class="m-name">Name</div><div class="m-sub">Short bio goes here.</div></div></a>
<div class="person flex justify"><img src="IMG URL"><div class="m-info flex center"><div class="m-name">Name</div><div class="m-sub">Short bio goes here.</div></div></div>
</div>

</div></div>
</article>
</div>
</section>

Make sure you paste it between <div class="tabs"> </div>.

To add more muses to the group, just copy and paste this:


<a class="person flex justify" href="LINK URL" target="_blank"><img src="IMG URL"><div class="m-info flex center"><div class="m-name">Name</div><div class="m-sub">Short bio goes here.</div></div></a>

If you don't want to add links, just copy and paste this:

<div class="person flex justify"><img src="IMG URL"><div class="m-info flex center"><div class="m-name">Name</div><div class="m-sub">Short bio goes here.</div></div></div>

Extra Links

Taskbar Links and Sidebar Links

You are given 6 custom links by default, 3 of which that will appear in the taskbar and the other 3 appearing in the sidebar. If you need more extra links, just copy and paste this code:


<a href="LINK URL" target="_blank"><div class="img"><img src="IMG URL" draggable="false"></div><div class="font"><i class="ti ti-link"></i></div>LINK NAME</a>

It's advised that you keep these extra links between <div class="inner-folder"> </div>:


<div class="inner-folder">
<a class="tbtn" href="LINK URL"><div class="img"><img src="IMG URL" draggable="false"></div><div class="font"><i class="ti ti-link"></i></div>Link 4</a>
<a class="tbtn" href="LINK URL"><div class="img"><img src="IMG URL" draggable="false"></div><div class="font"><i class="ti ti-link"></i></div>Link 5</a>
<a class="tbtn" href="LINK URL"><div class="img"><img src="IMG URL" draggable="false"></div><div class="font"><i class="ti ti-link"></i></div>Link 6</a>

This is where you would add your extra links.

</div><!--- INNER FOLDER --->