Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Coding for Tumblr

    Hello all-

    I have recently made a tumblr as another means to market my new graphic design business. I would like to have a facebook "like" button underneath my headline on tumblr like this:



    However while changing my header from text to image (so that I could get my logo up there) I discovered that the image is capped at 75 pixels above the first post. Any size with a height larger than 75 px will be partially covered by the first post:

    Here is the code and appearance that I have found makes it look decent (75px height):



    Here is what happens when I try to enlarge:




    I also tried putting the code for the facebook like button in the sidebar to no avail. So, as a temporary solution, I tried to simply put a link to my facebook in the sidebar. But even this proved to be a pesky problem as it shows additional text outlining sizes and such:



    This is the area in which I tried to code for the sidebar:



    And this is the code I used to try to link my page in the sidebar. Everything works except for when I try to put the link in -

    Ampersand ideas<br>presents<br>an exceptional<br> collective of<br>creative media<br><br>Like us<br><small><a href="http://www.facebook.com/ampersandideas">facebook.com/ampersandideas</a>

    I would really appreciate the help, thanks!

    -Adam Godoi

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please help! Am I even in the right forum category for this question?

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    8
    Thanked 4 Times in 4 Posts

    Post

    Quote Originally Posted by godo1 View Post
    Please help! Am I even in the right forum category for this question?
    You are in the right forum. I'm pretty experience with Tumblr themes so I figured I'd give this one a try.

    Basically, for the header, your problem was the image you were using. For some reason it had loads of blank space towards the left, which was making it get pushed off the side of the page when enlarged. Remember, if you want the image at the left wrap it in <div align="left"></div> rather than actually modifying the image. This is where a lot of people new to web design go wrong.

    So basically I've cropped down the logo so that it will work. It's currently hosted on my server but feel free to host it anywhere else if you want, but take note that you'll have to change the code.



    The header code now looks like this, which works really nicely with the page:

    PHP Code:
    <!-- .header -->

            <
    div class="header">

                <
    img src="http://static.tumblr.com/tokpufl/lpdlt3v1v/logo.png" class="logo">
                <
    a href="http://img.darklaika.net/external/ampersand.png"><img src="http://img.darklaika.net/external/ampersand.png" alt="" height="112" width="693" title="Hosted by DarkLaika.net" /></a>
                <
    br />

                <
    span class="clock"> <span id="clockTime"></span></span>

                <
    div class="veneer"></div>

            </
    div>

            <!--/ .
    header --> 
    I did the Facebook thing actually inside the HTML document, don't do it via the description, it's bound to mess things up. Now the code for the caption looks like this:

    PHP Code:
    <div class="theme-block" id="themeBlock">

                     

                        <
    img src="http://static.tumblr.com/o2juyws/yAplynmbw/theme-pic2.png" alt="" width="120" height="120">

                        <
    span class="caption">

                            <
    span class="caption-inner">
                            <
    p style="padding:7px;">
                            
    Ampersand ideas<br>presents<br>an exceptional<brcollective of<br>creative media<br><br><small><a href="http://www.facebook.com/ampersandideas">facebook.com/ampersandideas</a>
                            </
    p>

                            </
    span>

                        </
    span>

                    </
    div
    Total code for the document (for easy copying- but make sure that you don't just mindlessly copy, take a look at the changed code and learn!)

    http://www.darklaika.net/tumblr1.txt

    (It was too large to fit in the document.)

    You can see the results at http://testing-the-world.tumblr.com

    (Password is CodingForums)

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much I was able to get the link working in there correctly . Now is there any way to get the "like" button underneath my header?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •