#theme tutorial

Hi everyone! 👋 If you’ve been scrolling through other blogs thinking, "How did they do that?" but you’re too scared to touch your theme's HTML, this post is for you.

You don't need to be a coder to make your theme look cute. I’ve put together a collection of 12 Simple CSS Codes that you can just copy and paste.

🌸 Want to see them in action first?

CLICK HERE TO VIEW THE LIVE PREVIEW

(Check out the preview to see exactly how these move and look!)

yes of course anon! this may be more detailed than you're asking for but i'll give you the whole process! and if you're working on your own theme from my tips, i'd love to see the finished product! i'm sure it'll be absolutely fantastic!

first i went to pinterest to find all of the pngs that i used (planets and stars and all that) and downloaded them! (used this website to remove the backgrounds on them but you can also use remove.bg)

then i went to this website (or you can search metallic silver text and it should be the first site to pop up) to do the text for it! you just have to scroll down a little bit and click on this font style that i used (free but you have to download the alphabet). then type whatever you want to make your text in the box!

I found this helpful so I wanted to share

Hey new tumblr users! Welcome and since it was brought up, I’m gonna teach you guys how to put some custom themes into your blogs to make them more uniquely you! First off let’s hit that person shaped icon up in the top right corner!

Once you do that it’ll open a list of options. You wanna hit settings! It’ll come up with your account settings first but we want the blog settings so hit your blog name on the right hand side and you should see something like this!

Make sure enable custom theme is set to on! Then hit edit theme and it’ll send your blog page with edit theme options open! You can either go off from here if you are keeping a basic or know html but if you don’t, keep reading! Also I will provide links to free theme blogs and sites that I’ve used but there are plenty more if you want to find very specific styles/colours/etc by googling tumblr themes with those keywords.

Once you got that specific tumblr theme’s html code up, then hit edit html! 

Copy and paste the html code into the space and hit update preview! Then hit the back arrow up there and you should have the custom options to play around with. Like so:

Fiddle around with those to your liking with colour, links, and so on and you’ll get your own custom blog like this! Make sure you hit save before exiting or you’ll lose everything!

First of all, thank you so much, anon! 💗

And as in how do I make the blog's theme I suppose you mean the aesthetics, banners, headers and all of that (?)

Under the cut I'll try and explain the process I follow to make my usual posts and writings <3

In this tutorial, I'll be sharing with you on how to create a popup/modal (herein states as modal) using <dialog>. Base code shall be provided for you to practise. Also, while it is rather a straightforward tutorial, it is recommended for you to have some knowledge of CSS and HTML as I will assume that you know a little bit about them.

[DEMO] [BASE CODE]

To create a modal, there are five parts that I'll be explaining which are:

The script

The open button

The modal + the close button

The backdrop

The Fade effect [Optional]

1. The Script

To ensure that your modal works, we need to add a script into our code. All you need to do is copy the code below and paste it before </body>:

<script> /// MODAL SCRIPT BY JASMIN @ https://phantasyreign.tumblr.com/ const body = document.querySelector("body"); const popup = document.querySelector("#modal"); const openModal = document.querySelector(".open-modal"); const closeModal = document.querySelector(".close-modal"); openModal.addEventListener("click", () => { modal.showModal(); body.style.overflow = "hidden"; }); modal.addEventListener("keydown", e => { if(e.keyCode === 27){ e.preventDefault() } }) closeModal.addEventListener("click", () => { modal.close(); body.style.overflow = "auto"; }); </script>

This script tells us three things:

When you click the open button, the modal will appear and you cannot scroll down the contents behind the modal;

When you press the esc key, it won't work;*

When you click the close button, the modal will disappear and you can scroll the blog as per usual.

*The reason why I include this part is because in the event if the blog contains a scroll bar, if a person press the esc key instead of clicking the close button, such scroll bar will not appear.

2. The Open Button

HTML

To add an open button, simply add the code below and paste it at the desired placement:

<button class="button open-modal">Open Modal</button>

Tips: If the design of your open and close button are the same, then I recommend if you include another class value of button inside your class attribute so that it'll be easier for you to code.

TAKE NOTE: Do not change the name of the open-modal.

CSS

If you know CSS, there are many ways to code a button. Nevertheless, for the purpose of this tutorial, I have customised the button (both the open and close button) as follows:

.button{ /*BASIC*/ background-color:white; border:1px solid #eee; border-radius:inherit; width:100px; outline:0; padding:.25rem .5rem; /*FONTS*/ font-family:karla; text-transform:uppercase; /*DO NOT TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING*/ cursor:pointer; }

You can also use .open-modal instead of .button if you want to.

3. The Modal + The Close Button

HTML

To create the modal, we will be using <dialog>. To achieve it, we need to add the HTML before </body> and the <script>. Don't worry if you're confused, you can refer back to the base code to understand what I mean by before </body> and the <script>.

<dialog id="modal"> <p>This is your content <button class="button close-modal"> Close Modal </button> </dialog>

Depending on where you want to position your close button, you may need to change the position of your close button's HTML code before or after the content.

CSS

By default, the modal will not be shown without the open button and the script. However, since we have included the script as well as the open button, you can see that once you click the open button, the modal appears! To beautify it a little bit more, you can customise the modal as follow:

/*MODAL CONTENT*/ #modal{ /*BASICS*/ width:50%; background:rgb(238 238 238 / 0.9); border:1px solid lightyellow; border-radius:10px; padding:1rem 2rem; outline:0; /*DO NOT TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING*/ max-height:50vh; overflow:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

For the close button, feel free to use your own creativity to customise it! You can also use the same design as your open button as what you've seen inside the demo. If the position of your close button is the same as what has been shown in the demo, to center it, I added the following code:

.close-modal{ margin:0 auto; display:block; }

4. The Backdrop

We can think of backdrop as something similar as a lightbox in a photoset. By default, you can see that when a modal is opened, everything except for the modal turns darker. To customise the said backdrop, all you need to do is add this code:

/*MODAL BACKGROUND*/ #modal::backdrop{ backdrop-filter:blur(10px); background:rgb(238 238 238 / 0.25); }

Of course, you can also add background image and the likes if you know how to do so.

The Fade Effect [Optional]

In order to create the fade effect, we need to use the animation property. As such simply add the following code inside #modal and #modal::backdrop:

animation:1s fade ease-in-out;

As such, the both codes will look like this:

/*MODAL CONTENT*/ #modal{ /*BASICS*/ width:50%; background:rgb(238 238 238 / 0.9); border:1px solid #eee; border-radius:10px; padding:1rem 2rem; outline:0; /*DO NOT TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING*/ max-height:50vh; overflow:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); animation:1s fade ease-in-out; } /*MODAL BACKGROUND*/ #modal::backdrop{ backdrop-filter:blur(10px); background:rgb(238 238 238 / 0.25); animation:1s fade ease-in-out; }

After that, add this code after #modal::backdrop :

@keyframes fade{0%{opacity:0;}50%{opacity:1;}}

Sure!

First, you go to ‘edit theme’ and then to ‘edit html’. When you’re in the code, click the keys ‘Ctrl + F’ at the same time to bring up a search bar, like in the image below.

In the left search bar, type in font-family:

You’ll see that it highlights where it says font-family: in the code, like I circled out in red in the image below. You can hit the ‘Enter’ key to keep finding all parts of the code where you can change the font.

Now, I have used a few different fonts in this code. The default font for normal text is called calibri, the bold text is called 'Roboto Condensed', sans-serif;  and the italics, headers / titles, etc. is called “nightingale”.

If you want a way to quickly change them, you can use the two search bars we brought up when we hit Ctrl + F. 

Let’s say we want to change the  'Roboto Condensed', sans-serif; font to arial. Then you can do this:

1. In the left search bar, type in font-family: 'Roboto Condensed', sans-serif; 2. In the right search bar, type in font-family: arial; 3. Click the ‘All’ button

And it should change all the ‘Roboto Condensed’, sans-serif; fonts to arial. You can do the same for the two other fonts by doing the first step, only type in either of these instead, depending on which you want to change;

font-family:"nightingale"; font-family: calibri; font-family:calibri;

The calibri font, you’ll want to do it both with the space and without the space between the colon, because some of the parts in the code has it with a space, and some places has it without a space, so if you don’t change both, some parts will remain calibri.

Hi everyone, I made this tutorial as a request by @phantasyreign , hope you’ll find it usefull :3 to follow this tutorial you must have some html, javascript (with some jQuery) and css knowledge. Anyways I’ll try to make it as clear as possible.

1. Add the lastest jQuery release (3.6.0)

jQuery is a javascript library to write javascript code more simple. There is a very important note here. jQuery comes in 4 different “forms”, you can find it: 

uncompressed 

minified 

slim 

slim minified

The uncompressed version includes ALL the functionality of jQuery, included AJAX functionalityy and animation effects.

The slim version doesn’t have this functionalities to make it lighter. I remark this point because depending of which version you use, the toggle animation will look different, so in case you are already using jQuery in your theme, consider the result that the button will have.

PD: the minified version is the same as the uncompressed but with all the code is compressed without blank spaces to make it even more lighter, same happens with the slim minified version.

With the slim minified version (which is the one I’m using in this tutorial) the animation will look like this:

And the uncompressed version will look like this:

You can choose any version you want, the uncompressed version by the way has more animations effects you can explore, and the slim version just has the function “toggle” to hide and show elements (which is the one we’re going to use).

Having this clear let’s continue. So we add jQuery inside our <head> tag <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="  crossorigin="anonymous"></script>

2. Add an icon library

This is optional if you want that your button will display an icon. You can use any icon library you want like fontawesome, bootstrap icons, CAPPUCCICONS icons, feather icons, etc. In this tutorial I’m using Bootstrap Icons. So inside our <head> tag again, we add the following <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

3. Add a button

In this tutorial we’re going to add a button independent of the navigation menu, so place the button inside your <body> or <main> tag. 

<button type="button" class="controls_tumblr"><i class="bi bi-gear"></i></button> And then let’s add it some style in our css (inside your <style> tag): .controls_tumblr {        all: unset;        color: yourcolor;    cursor: pointer;        margin: 10px;        font-size: 1.2rem;        transition: all 0.5s ease;    position: fixed;    top: 0;    right: 0; }

.controls_tumblr:hover {        color: yourcolor; }

The ‘.controls_tumblr’  class is to remove all the default styles for the button (all: unset), you can customize as you wish this part.  The ‘.controls_tumblr:hover ‘ is to make the button change the color when the cursor is hover the button. If you want your button to be inside your navigation menu or in your footer is okay too, just add the button code where corresponding and remove the fixed positioning in the css.

4. Add css to hide the controls by default

Also inside your <style> tag, add the following css:

.iframe-controls--desktop.tmblr-iframe--unified-controls {     margin-top: 30px;     display: none;     height: 54px !important; }

The margin is for the controls don’t overlap our button, and the display: none is to hide by default our controls. The height is the default tumblr controls height, we add it again because it sometimes gets buggy with using display: none to hide the controls, and the page renders without assigning a height to the controls so the controls won’t show when we click the button.

5. Add the jQuery functionality

Inside your <head> tag, add a <script> tag with the following:

<script> $(document).ready(function(){    //toggle controls    $('.controls_tumblr').click(function(){        $(".iframe-controls--desktop").toggle( "slow" )    }); }); </script>