Customize Tag Page HTML / CSS Workarounds

ratpad

unread,

Mar 29, 2012, 4:33:42 AM3/29/12

to tumblr...@googlegroups.com

Hi all,

I know that this might be an open issue but I wanted to know if anyone had a good workaround for giving a Tag page custom CSS (and/or HTML).

I am trying to get the posts on http:/example.tumblr.com/tagged/exampletag to live on a page that is styled differently than my main blog. Cross-domain restrictions on JavaScript make this hard to do via AJAX and JSONP seems dicey and over my head for getting a whole HTML doc in and unpacked at my Tumblr Tag page.

Has anyone found a good workaround to this and/or how can I submit a feature request to the devs?

I may just put this on hold and then figure out a way to set up another page to crawl the Tumblr page and import images from certain tags.. wish it would just let me add custom HTML and CSS to Tag pages and then filter the relevent tagged post onto the page without having to replace it on the client side.

thank you all :)

ehe...@gmail.com

unread,

Mar 29, 2012, 8:33:56 AM3/29/12

to tumblr...@googlegroups.com

Using the {block:TagPage} is not helpful? You could use it to import different CSS sheets, add a class name to the <body> of the document to style the whole doc differently, etc. You just need to get creative within the limitations Tumblr has imposed :)

Sean Zhu

unread,

Mar 29, 2012, 5:40:13 PM3/29/12

to tumblr...@googlegroups.com

You can use JavaScript to give a container block (<html>, <body>, etc.) a class, such as "tagpage_testtag". Then use CSS selectors to make use of this class.

body.tagpage_testtag {
…
}

ratpad

unread,

Mar 31, 2012, 6:01:41 AM3/31/12

to tumblr...@googlegroups.com

Thanks for these insights!! Unfortunately with the {block:TagPage} conditional ... it makes some things a tiny bit easier but because you can't specify the actual TAG you want to deploy theme elements for you are forced to do ugly things such as :

$(document).ready(function () {
                        var tumblrPageEvent = $(location).attr('href');
                        var m = document.createElement('script');
                        m.async = true;
                        m.src = 'http://example.com/javascriptframework.js';
                        m.type = 'text/javascript';
                        if (tumblrPageEvent === "http://example.com/tagged/example") {
                            (document.getElementsByTagName('footer')[0]).appendChild(m);
                        };
                    });

(I'm cheating and using jQuery :))

To try and optimize specially customized tag pages... because there is no way to easily AJAX in .html files because of Cross-Domain restrictions I still find this issue to be causing more stuff to load than I'd like. Sure, I can hide it using CSS but I don't really want to be loading a ton of dynamic elements that I'm going to be hiding. Welp, c'est la vie lol!

felix bonkoski

unread,

Mar 31, 2012, 11:57:32 AM3/31/12

to tumblr...@googlegroups.com

I'm going to caution you against using the document's location attribute for doing tricksy things.

When people use web translation services, anonymizing services, etc the document location is often not what you expect.

Try translating your page with http://translate.google.com/ and see what happens :)

Just a word for the wise. I once tried to do tricksy things the way you are, but there is the strong possibility of breaking pages for international users (of which there can be many. On my own tumblr, about %20 of all pageviews are through google translate alone, so any reference to document.location wouldn't work for that 20%.)

felix

ratpad

unread,

Mar 31, 2012, 6:59:59 PM3/31/12

to tumblr...@googlegroups.com

Sigh you are right. TUMBLR!!

Reply all

Reply to author

Forward