Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

idrewuk

macrumors regular
Original poster
Aug 15, 2008
208
120
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

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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

macrumors regular
Original poster
Aug 15, 2008
208
120
That's a really helpful start, thanks. The toolbar is excellent isn't it :D

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

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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

macrumors regular
Original poster
Aug 15, 2008
208
120
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

macrumors regular
Feb 8, 2007
192
50
Sorry for the Necro, but I wanted to throw in the CSS to get rid of the numbers:
Code:
ol.tumblr_posts
{
	list-style: none;
}

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

zulu702

macrumors newbie
Jul 26, 2011
1
0
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?
 

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
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:

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

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
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):

Code:
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

macrumors newbie
Aug 30, 2013
1
0
Special request!! How to limit posts by date on tumblr

:confused:

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!
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.