logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$20
How can I add an annimated gif to a wp karma theme header?

I have an animated butterfly that I need to add to the header of the Wordpress Karma Theme. It won't work in the png logo/header that I've uploaded. So how can I add it to the whole website in the header of this theme?

Thanks,
Karen

attachment image View Attachment

karsheer | 08/02/12 at 10:22am Edit
Tutorial: How to assign prize money


(7) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    08/02/12
    10:31am
    Manoj Raj says:

    You want to add it to the header alone?

    How do you want it?

    Do you want to repeat it all over the header? or do you want it centered with no-repeat?

    Send me your url

    I guess the following will work with default Karma theme..

    Add the following to your CSS


    
.header-area { background: url("http://www.wpquestions.com/uploads/tma_Orange_go_up.gif_70489793_phpCRK2sn.gif") no-repeat center center transparent; }

    • 08/02/12 11:07am

      karsheer says:

      Hi,
      This works, however I want it on the left hand side of the header not the right.
      Thanks,
      Karen

    • 08/02/12 11:15am

      Manoj Raj says:

      if yo want to add it to the left, add the following

      .header-area { background: url("http://www.wpquestions.com/uploads/tma_Orange_go_up.gif_70489793_phpCRK2sn.gif") no-repeat left center transparent; }

      if yo want to add it to the right, add the following

      .header-area { background: url("http://www.wpquestions.com/uploads/tma_Orange_go_up.gif_70489793_phpCRK2sn.gif") no-repeat right center transparent; }

    • 08/02/12 11:23am

      karsheer says:

      Hi,
      It's appearing below the header.
      Not working.
      Karen

    • 08/02/12 11:24am

      Manoj Raj says:

      Whats your height of the header area? i assume the default header-area in Karma wordpress theme

      Try the following 

      .header-area { background: url("http://www.wpquestions.com/uploads/tma_Orange_go_up.gif_70489793_phpCRK2sn.gif") no-repeat left top transparent; }

    • 08/02/12 11:32am

      karsheer says:

      That worked thanks for all your help.

  • avatar
    Last edited:
    08/02/12
    10:32am
    Pali Madra says:

    For adding the image you will need to add code to the style.css and header.php.

    If you can provide me the log-in details I can do it for you.

    Another option is that I provide you with the code and you can manually replace the code yourself. I also wanted to know if there are any other modifications that you have made to the theme?

    • 08/02/12 11:33am

      karsheer says:

      Hi,

      I do have other modifications to the theme. I'll let your know if I need help.
      Thanks,
      karen

      Attached Image

  • avatar
    Last edited:
    08/02/12
    10:33am
    Jatin Soni says:

    Need to check your header.php

    Usually open your theme header.php and place where you want to add. Or just place header.php code or attache it.

  • avatar
    Last edited:
    08/02/12
    10:38am
    Baki Goxhaj says:

    It won't work in the png logo/header that I've uploaded.


    Boy, you cannot animate PNG. Keep the image format to GIF. :)

    Previous versions of this answer: 08/02/12 at 10:38am

  • avatar
    Last edited:
    08/02/12
    10:56am
    LatinUnit says:

    Hi Add this to your style.css

    #header .header-area {
    
width: 980px;
    
margin: 0 auto;
    
padding: 38px 0 33px;
    
background: url(http://www.wpquestions.com/uploads/tma_Orange_go_up.gif_70489793_phpCRK2sn.gif);
    
background-repeat: no-repeat;
    
}


    replace the url for the path where you have saved the animation

    Place see the attached gif and the output these look better than your butterflies i give them to you as a gift


    Check the following video for the outputs http://screenr.com/zCu8 and http://screenr.com/6Cu8

    You control the repeat of the butterflies using the background-repeat: repeat-x or y or repeat

    Here are another butterfly animations you can try;
    http://images2.layoutsparks.com/1/206256/butterfly-fly-away-animated.gif
    http://www.heathersanimations.com/butterflies/00005.gif
    http://www.heathersanimations.com/butterflies/b157.gif
    http://www.heathersanimations.com/butterflies/b205.gif
    http://images2.layoutsparks.com/1/112766/butterfly-animated-colourful.gif
    http://images2.layoutsparks.com/1/103772/butterfly-girl-animated.gif
    http://images2.layoutsparks.com/1/138121/butterfly-effect-animated.gif

    attachment image View Attachment

    Previous versions of this answer: 08/02/12 at 10:40am | 08/02/12 at 10:48am | 08/02/12 at 10:49am | 08/02/12 at 10:50am | 08/02/12 at 10:55am | 08/02/12 at 10:56am

    • 08/02/12 11:22am

      LatinUnit says:

      My answer is not worth???

    • 08/02/12 11:26am

      LatinUnit says:

      Karen try my answer, i give u better animation alternatives also and video output

  • avatar
    Last edited:
    08/02/12
    11:37am
    hangover says:

    Here is the solution:

    find this line of CSS

    #header .header-area {
    
width: 980px;
    
margin: 0 auto;
    
padding: 38px 0 33px;
    
}


    Then add this one
    background: url(http://www.wpquestions.com/uploads/tma_Orange_go_up.gif_70489793_phpCRK2sn.gif)no-repeat right;


    The final css look
    #header .header-area {
    
width: 980px;
    
margin: 0 auto;
    
padding: 38px 0 33px;
    
background: url(http://www.wpquestions.com/uploads/tma_Orange_go_up.gif_70489793_phpCRK2sn.gif)no-repeat right;
    
}


    Note: be sure to change the url of your gif background, you can add that one to your media library and get the url from there. Thanks.

  • avatar
    Last edited:
    08/05/12
    12:07am

    This answer was downvoted by the top experts.

This question has expired.





Current status of this question: Community pot



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.