Customising a Tumblr feed on my own website

[idrewuk]

Hi folks,

I've decided to embed my Tumblr blog into one of my own webpages.

It's cool that you're given the small line of code to do this

<script type="text/javascript" src="http://yoursite.tumblr.com/js"></script>

But what I want to know is how you go about 'skinning' the feed using CSS.

Obviously my site already has a stylesheet but I've got no idea how you apply styles to something like this.

Does anybody have any tips or advice? Thanks in advance.

 

[angelwatt]

I'm guessing the script is responsible for putting some HTML on the page. I use a Firefox add-on called Web Developer Toolbar. One of its options is to view Generated Source, which would show you the new HTML being produced. You can then check out the code and see what CSS you can apply to it. If necessary you can also add your own div tags with a class (or id) so you can more directly style it.

 

[idrewuk]

That's a really helpful start, thanks. The toolbar is excellent isn't it

Re the generated source... there's no actual way of directly editing the generated source, is there? So, you don't actually see it in whichever editor you use, just the code with the script.

(Hope that makes sense)

 

[angelwatt]

Re the generated source... there's no actual way of directly editing the generated source, is there? So, you don't actually see it in whichever editor you use, just the code with the script.

I don't believe so. It has an edit HTML option, but I believe that takes the original source, but would be worth a shot. It's under the Miscellaneous menu. If you have the FireBug add-on it can add some HTML attributes, like add a class to a tag.

I've had to manually edit some forms because they were so horribly programmed that they didn't work so I fixed them using the WebDev Toolbar.

 

[idrewuk]

Thanks again. I looked at the 'Edit HTML' option and it does indeed show the generated source! So I can see exactly what DIV classes are used etc and style them accordingly.

Genius!

 

[Mooey]

Sorry for the Necro, but I wanted to throw in the CSS to get rid of the numbers:

ol.tumblr_posts
{
	list-style: none;
}

I'm still trying to figure out how to implement the date someway.

 

[zulu702]

I'm also pretty glad to have the bit of code provided for this, but i noticed that no pictures in the feed are clickable which really bugs me. Is it even possible to change that with this sort of code?

 

[jeffreyseamster]

Limit to one post

How would i limit the post to a single with the CSS? I can't figure it out.

 

[SrWebDeveloper]

I'm also pretty glad to have the bit of code provided for this, but i noticed that no pictures in the feed are clickable which really bugs me. Is it even possible to change that with this sort of code?

In Javascript, something like this untested example, edit to use the proper selector for the image and the correct path for the location:

<script>
    $(document).ready(function() {
        $('.tumblr_post img').click(function() {
            window.location.href = "/path/to/whatever.html";
        });
    });
</script>

 

[SrWebDeveloper]

How would i limit the post to a single with the CSS? I can't figure it out.

Try this kind of thing in CSS (untested, example only, edit to use your selectors):

div.tumblr_post { 
 display: none;
}
div.tumblr_post:first-child { 
 display: block;
}

Assuming each post is somehow identifiable from the others (in my example, a div with a class for each post), basically I'm using CSS to hide all of them by default, but take advantage of the fact CSS cascades and use a selector to display the first child, aka the first post. Examine the actual HTML to find out what actual selector to use.

 

[musevery]

Special request!! How to limit posts by date on tumblr



Hi, I need to work out how to limit my tumblr feed on my company website to CERTAIN DATES>

I.e. I want only a selected period to display on my website.

so basically i want to STOP any new tumblr posts from appearing on the site that my blog is embedded on..

I can't find any information on this anywhere,

I know it's probably got something to do with this bit of code:

$post_per_page=25;

if (isset($_REQUEST['page'])) {
$p=$_REQUEST['page']*$post_per_page;

but have no idea what to put - something like ' retrieve [DATE] to [DATE] only.


please help!