Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jul 13, 2009, 10:04 AM   #1
idrewuk
macrumors member
 
Join Date: Aug 2008
Send a message via Skype™ to idrewuk
Customising a Tumblr feed on my own website

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.
idrewuk is offline   0 Reply With Quote
Old Jul 13, 2009, 10:38 AM   #2
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: 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.
angelwatt is offline   0 Reply With Quote
Old Jul 13, 2009, 10:42 AM   #3
idrewuk
Thread Starter
macrumors member
 
Join Date: Aug 2008
Send a message via Skype™ to 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)
idrewuk is offline   0 Reply With Quote
Old Jul 13, 2009, 10:56 AM   #4
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by idrewuk View Post
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.
angelwatt is offline   0 Reply With Quote
Old Jul 13, 2009, 11:03 AM   #5
idrewuk
Thread Starter
macrumors member
 
Join Date: Aug 2008
Send a message via Skype™ to 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!
idrewuk is offline   0 Reply With Quote
Old Aug 13, 2009, 08:57 PM   #6
Mooey
macrumors regular
 
Join Date: Feb 2007
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.
Mooey is offline   0 Reply With Quote
Old Jul 26, 2011, 03:59 AM   #7
zulu702
macrumors newbie
 
Join Date: Jul 2011
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?
zulu702 is offline   0 Reply With Quote
Old Jun 6, 2013, 11:34 AM   #8
jeffreyseamster
macrumors newbie
 
Join Date: Jun 2013
Limit to one post

How would i limit the post to a single with the CSS? I can't figure it out.
jeffreyseamster is offline   0 Reply With Quote
Old Jun 9, 2013, 12:46 AM   #9
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by zulu702 View Post
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>
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Jun 9, 2013, 12:57 AM   #10
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by jeffreyseamster View Post
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Aug 30, 2013, 05:15 AM   #11
musevery
macrumors newbie
 
Join Date: Aug 2013
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!
musevery is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Need help with Tumblr! Goftrey Web Design and Development 1 Dec 24, 2013 12:11 PM
I Need to Create a Website Quick! Best Options? ((No Tumblr) I Just Bought a Domain)) HappyDude20 Community Discussion 3 Mar 25, 2013 05:03 PM
Customising Drop Down Menus Adam P McCready Mac Applications and Mac App Store 5 Jan 24, 2013 07:42 PM
Customising Drop Down Menus advice Adam P McCready OS X 0 Jan 23, 2013 07:10 PM
Customising Home Screen Dave-R iPad 5 Jul 18, 2012 12:29 AM

Forum Jump

All times are GMT -5. The time now is 10:27 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC