How to Change the Color of Your Next Button on Tumblr

By Ashley Poland

Tumblr themes are complicated, not just because they include several different kinds of media, but because they've all been written by different developers. As such, you can't know what to expect from your theme until you open up the source code. Any theme on Tumblr can be modified; if you accidentally break the theme, you can start fresh by reinstalling it. Note that some themes use "endless scrolling," where the next page of posts loads automatically when the visitor reaches the bottom. If yours does this, you can change themes to one that utilizes pagination.

Open the "Customization" page for your Tumblr blog, and click the "Edit HTML" link. It's located at the top of the customization pane, below the name of your current theme.

Press "Ctrl-F" to find the {NextPage} variable in your theme. Check that it's located within {block:Pagination} to identify that you're in the part of the theme that defines the "Previous" and "Next" page buttons.

Determine which CSS classes the theme uses to modify the "Next" page link. Classes are identified within the HTML by 'class="name".' Depending on the theme writer, the "Next" page link may have its own class or may share CSS styling with other classes. You can find the designated class and modify the color within it, but this method may modify the color of other elements with the same CSS class. You can also replace the class with one of your own choosing and then add that class to the theme's style sheet. This ensures that the "Next" page link is unique.

Use the "Find" feature again to find the relevant classes within the Tumblr theme. Classes are identified within the style sheet as ".name". If you're creating a custom class, you can write it at any point in the style sheet as

.name {


The CSS to modify the class will go between the opening and closing brackets.

Change the color of a text element by adding the following to the CSS class:

color: #ff69b4;

This only changes the text color. If the "Next" page link on your Tumblr theme uses a button or has a background, then you'll need to change the background color with:

background: #000000;

You may also need to change colors for any borders and shadows if your theme uses those elements on the "Next" link.