#theme editing

this tutorial is only tested on the default tumblr blog layout.

working example : https://mooliedirds.tumblr.com/

The garland is NOT part of the header and lays on top. It does not effect the search function or any other functions on the site. It also doesn't make a horizontal scrollbar appear! First, go to the tumblr blog you want to customize and click the customize button.

then click "edit html"

once the code loads in, type in

<!--additions-->

you can replace additions with whatever you like. This is just to keep the code more organized.

then, copy paste this code.

<img style="max-width:200px; position:fixed; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:205px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:410px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:615px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:820px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:1025px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:1230px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:1435px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:1640px; z-index:3;" src="insert link here">

<img style="max-width:200px; position:fixed; left:1845px; z-index:3;" src="insert link here">

Replace insert link here with a link to any banner or gif that you would like. something similar to any of these-

Then, click "update preview" and see that it looks nice. If it looks weird, edit

"max-width:200px;"

to be a different value. (however you will need to update the left:---px; as well to match.) I put a spacing of 5 px between the banners, however that might not work for every gif, so you may need to edit them.

Editing your theme part 1: getting started

A lot of theme makers, including myself, prefer not to answer most customization asks, but I wanted to cover some ways to edit themes to hopefully make it a bit easier to understand. 

Keep in mind that no matter what you’re trying to edit, a basic understanding of HTML and CSS is going to help a lot. You don’t necessarily have to know all of the basics, but try to look up what you’re trying to edit.

For example, if you want to add a background image, there’s a lot more to it than just background:url(’imageurl.png’); depending on what you want to do. This just gets a background image to display. It doesn’t make it cover the whole container or stay attached to the page as you scroll. So, it’s best to do a little research on exactly what you want to do before you jump into editing. 

Once you’ve figured out what and how you want to edit, there are a few different ways to go about this.

First you should double check if there is already an option the theme comes with. Most themes come with color and image options, so if you try to add it yourself it might not work how you want it to if there’s already options available. 

Next step is going to depend on what kind of theme you have. Adding custom CSS is really simple for theme garden themes, but can be a little more complicated if it’s a custom theme not hosted on the theme garden. 

The screen I get: