Customising a Tumblr feed on my own website

Discussion in 'Web Design and Development' started by idrewuk, Jul 13, 2009.

  1. macrumors member

    idrewuk

    Joined:
    Aug 15, 2008
    #1
    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.
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. thread starter macrumors member

    idrewuk

    Joined:
    Aug 15, 2008
    #3
    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)
     
  4. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. thread starter macrumors member

    idrewuk

    Joined:
    Aug 15, 2008
    #5
    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! ;)
     
  6. macrumors regular

    Joined:
    Feb 8, 2007
    #6
    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.
     
  7. macrumors newbie

    Joined:
    Jul 26, 2011
    #7
    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?
     
  8. macrumors newbie

    Joined:
    Jun 6, 2013
    #8
    Limit to one post

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

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    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>
     
  10. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #10
    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.
     
  11. macrumors newbie

    Joined:
    Aug 30, 2013
    #11
    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!
     

Share This Page