#custom pages

[wip]

Tumblr now disables custom pages by default and no longer allows users to turn off promotional banners from displaying on them. From a user perspective, it feels like the use of custom pages is being discouraged. It also feels like Tumblr prioritizes the social media aspects of the platform over the blogging aspects. Interest in the web revival is growing, and with that in mind, it would be awesome to see Tumblr embrace it with a renewed focus on custom pages and improvements for bloggers. :-)

Answer: Hi there, @unicornwishes!

We also love the blogging side of Tumblr, but unfortunately we haven’t had as much time to focus on it with our recent work on Communities. But blogging on Tumblr isn't going anywhere! We’re just not sure yet when we'll work on features like custom pages.

If you're interested in custom pages or other blogging features, we also have a wonderful sister platform called WordPress.com specifically for blogging, so feel free to check that out too!

Thanks for your question. Keep ’em coming, folks.

This post has been edited for clarity.

[eggdesign]

Wii Menu Page

preview + code and guide

I posted about this silly little experimental page a few days ago and was not expecting so many people to be interested in it. It's a very simple page and was basically already done, so I'm releasing it!

There is no JS used in this page (the popups are done with CSS), so you do not need to wait for permission to be able to use it.

[maziekeen]

Excuse me, bit of a novice question, but how exactly do you apply a network theme to s blog? And how to you edit it and add pictures? I've got an rp blog and I've been meaning to use one of your network themes for a muselist

hi there! i'm sorry this is so late. this is how you do it:

where to add the code

you'll need to create a new page, then change the type of the page from Standard Layout to Custom Layout

now the page will accept html, css, and javascript like the main page, you just paste the code from the network theme

how to customize

to edit texts and links, it’s just change the html code. you’ll need a bit of knowledge with html and css to locate the tags and stuff, but if you don’t that’s ok too, just see how it looks on the page and look for text or images on the code to know where’s everything

to add pictures, you'll need to host them somewhere and paste the link there. the options i know are:

tumblr’s assets: 

go to Edit HTML > Settings Icon > Theme Assets

then at the bottom of the page will open the theme assets with an important note you should keep in mind. then click on add a file to upload the images. after that, you can select a part of the code above and click INSERT

tumblr’s draft:

create a photoset and add the images you want, don’t worry if they look weird because it’s not the right size

then post as a draft. right click on the image you want and open on a new tab, now you’ll just copy the url and paste on the code. the final with .pnj that’s tumblr converting stuff, just like they do with gifs, don’t worry about that too

imgur website:

make a new account if you want to have control of the images you have, then go to new post

upload the image and after the upload, right click on the image you want and open on a new tab, now you’ll just copy the url and paste on the code. pay attention to the extension at the end of the link, .jpg or .png, etc

that’s how i used to do, but mainly with tumblr’s assets and draft. anything you need about my themes you can ask me and i will help you <3

[hypnspce]

my (very much a wip) witchy/tarot reading page i forgot to post!! that totally doesnt shade sherri

[eggdesign]

So this evening I've been working on a way to make it easier to add filters to blog pages without JS. This is mainly an alternative to isotope, commonly used in icon, media, downloads, and portfolio pages. CSS only solutions, especially like this, can be intimidating to look at even if you're not new to CSS.

I'm hoping this will take care of the bulk of the work/the more complicated parts so that you can make more complex custom pages without the user having to wait for permission to use JS.

Here's a simple example with just display: none added to the CSS

And on my preview page, I've used the same code and added multiple filter groups and some CSS animations.

If you are familiar enough with HTML and CSS, you can try out what I currently have, but keep in mind you will still need to write most of the HTML and CSS yourself. I want to make a more detailed guide so that it's easier to use soon!

[wip]

Hey! Any plans to add navigation to a blog's custom pages within the app? I was really surprised to find my links weren't visible and that they didn't work at all when I added them to a pinned post. I loved the ability to pin a post but additional custom pages—about, before you follow, tags—are really useful to have and it seems strange you can't even get to them within the app.

Answer: Hey, @theirprofoundbond!

So, a microcosm of good news here: we can say that right now we are thinking about it. Sadly there is nothing more to add here for now, but for any updates, you will be the first to know over at @changes.

Thanks for your suggestions, it’s much appreciated. Have a lovely day!

Best,

—Jon

[eggdesign]

How to automatically change icons based on user input

Adding icons to custom links (whether through text options or using {block:HasPages}) can be tricky when you can't guarantee what users will want their links to be.

Using some attribute selectors, we can change the icon based on the content in the href attribute.

I'm using Font Awesome for this tutorial, but any icon font that uses unicodes in pseudo elements (:before or :after) will work!

My HTML:

{block:HasPages}

<div class="links">

{Block:Pages}

<a href="{URL}"><i class="fa fa-link"></i> {Label}</a>

{/block:Pages}

</div>

{/block:HasPages}

By default, it will be the link icon. I can change this icon if a user is adding a tag as a link by selecting any link with "/tagged" in its url:

.links a[href*="/tagged"] i:before {

content:'\f292';

}

A breakdown of why/how this works and more examples:

Let's start with the first part

.links a

This is selecting all of the anchor tags inside of our links container

.links a[href*="/tagged"]

is selecting the href attribute that is inside of a link.

If I were to do

.links a[href="/tagged"]

it would only select links with that exact match.

by adding the *, i'm selecting any link that contains /tagged somewhere in the link. this way we can select *all* tags, not just one tag at a time.

.links a[href*="/tagged"] i

This is only selecting the i elements inside of links that contain /tagged. This is important because otherwise we would be selecting every i element, but we only want to change the tag links.

.links a[href*="/tagged"] i:before

and lastly we are selecting the :before pseudo element that Font Awesome uses to add icons.

What else can I do with this?

You can do a lot with attribute selectors! You could repeat this process for other links like discord, twitch, about pages, faq, etc.

Here is how you would target external links:

a[href^="https://"]:not([href*="tumblr.com"])

or if you wanted to include the possibility of http:// you could do either of these:

:where(a[href^="https://"], a[href^="http://"]):not([href*="tumblr.com"])

or

a[href*="://"]:not([href*="tumblr.com"])

You can read more about attribute selectors here!

[eggdesign]

About page builder: round 2!

buildapage is an interactive page builder aimed at those who want custom pages but aren’t comfortable writing their own or editing any code.

The editor is confirmed to be working, and while I am still planning on adding more features, I want to see what people are able to make with it so far! Please send me screenshots of what you’ve been able to make, and if the code is able to be accurately copied + pasted in a custom page. 

The options are still pretty limited right now, so please keep your suggestions coming!

When you go to buildapage, you can select the type page you want to start building. Currently, only the about page is available, but I will provide updates as the new builders are made!