Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #13835

    Hi there,

    My site is at

    Can you please tell me how I remove the spacing from left and right of header image/logo? and also how can I insert a graphic background for the footer area?

    Thank you.


    Try to add following css code in css/custom.css or the quick css field:

    #top .logo img, #top .logo, .logo a {
    width: 980px;

    #top .logo, .logo a {
    margin-left: -10px;

    2) Use following code for the footer background and insert your custom image url:

    #footer {
    background-image: url('my-image.jpg');


    Thanks for your help: I did those steps and need the following help to finalise.


    How can I make the image butt to the bottom of the page regardless of the footer content height and not repeat – stay standard colour (white). So the rest above the image is just all white?


    The image height is 312px how can I remove the white line below and above the header image so it but’s to either menu.

    I tried also adding in the height of the image into the css code like the width but it wouldn’t work.

    What is the benefit of the blue tag that site on the top right hand corner? can it be removed? Can you add mroe social network icons beside the RSS, Facebook & Twitter?

    Thanks again for your assistance!


    Hi tiktacs,

    For the Footer, try to use this code:

    #footer {
    background: white url('my-image.jpg') left bottom no-repeat;

    For the Header, can you deactivate/disable the plugin that prevents right click? so we can give you a specific css snippet. Inform us if you have disabled it. and we’ll try to post a css code here, if that works then you can activate/enable it again.

    For the ribbon:

    .ribbon {
    display: none;

    Hope this helps. :)




    Hi, thanks for your help.

    The footer code – I put it in the Footer section of the style.css but no changes occurred after I tried a few times? Am I putting it in the right spot?

    Also right click has now been disabled.

    Can you add other social link icons to the top right hand of template where the ribbon normally is?




    Add those snippet on your custom.css





    I have deactived the right click plugin, are you now able to give me the custom.css coding to fix the header image as it has a gap before and after it. see

    Thank you have been a HUGE help :) love using your templates!!

    One other thing with the social media icons top right corner of the screen…. can you add more social network icons beside the RSS, Facebook & Twitter? Such as Vimeo – YouTube – Flickr?

    Thank you!


    Hi tiktacs,

    This looks like it will do the trick for adjusting the big header image:

    h1.logo {
    height: 320px;
    margin-top: -23px;




    Hi Devin,

    Thanks that coding sorted out the gap below the image but not the gap above the image?

    Also with the social media icons top right corner of the screen…. can you add more social network icons beside the RSS, Facebook & Twitter? Such as Vimeo – YouTube – Flickr?

    Thanks again!


    It looks like you put in the margin-top: as -3 instead of -23. That will fix the top margin spacing.

    You can add additional icons manually in the header.php file and then the css to style them in your custom.css. They are contained in a un-ordered list element start at line 94:

    <ul class="social_bookmarks">
    <li class='rss'><a href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>"><?php _e('Subscribe to our RSS Feed', 'avia_framework')?></a></li>
    if($twitter = avia_get_option('twitter')) echo "<li class='twitter'><a href='".$twitter."'>".__('Follow us on Twitter', 'avia_framework')."</a></li>";
    if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a href='".$facebook."'>".__('Join our Facebook Group', 'avia_framework')."</a></li>";

    <!-- end social_bookmarks-->


    <li class='youtube'><a class="noLightbox" href="">Our Youtube</a></li>




    Thanks for your help. I made it -3 as that made the white gap smaller then when it was at -23. At -23 the gap is still there, also with -33, -43 and -53 the gap is still there. What else can I do to remove it the white gap. Thanks for your patience.


    (i’ll look into the header icons down the track but at least i know it’s possible)


    Looks like IE doesn’t like the styling. You’ll need to play around with the values for:

    #top .logo img {
    width: 980px;
    height: 312px;
    border: none;


    h1.logo {
    height: 320px;
    width: 980px;
    margin-top: -23px;

    to get a combination that works cross browser. Negative top margins should do the trick…but IE can be a bit finicky so finding a combination that will work for you is the trick as I’m not sure you’ll be able to get the alignment pixel perfect.



Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘remove spacing on logo, insert graphic background for footer area’ is closed to new replies.