Skip to:
Content
Pages
Categories
Search
Top
Bottom

Header Background Image

  • Avatar of Dark Severance
    Dark Severance
    Participant

    @darkseverance

    I’ve tried searching for how to change my logo background image, customize the header, etc and the search on this site isn’t that good (well dependent on someone putting in tags). I have a set width for the site, which I’ve already set.

    I’ve tried using the custom upload header but even if you upload a 1250×125 image, it resizes it oddly and tries to have you crop it. I wanted to use a different image size anyways. I can just override by just using a <img src tag for the image. But I prefer to have it as the background but I can’t find where the background-image is set to change it.

Viewing 15 replies - 1 through 15 (of 15 total)
  • Avatar of David Lewis
    David Lewis
    Participant

    @takeo

    You can set your header image in your CSS but you’ll have to add the !important keyword to your declaration in order for it to override the “custom header”. The custom header code is in functions.php by the way.

    Avatar of r-a-y
    r-a-y
    Moderator

    @r-a-y

    Hmm… I had to do something like this recently for a BP site using a child theme and I didn’t have to add the !important declaration.

    This is what I did:

    In your child theme’s functions.php, add the following:

    function my_remove_bp_actions() {
    remove_action( 'init', 'bp_dtheme_add_custom_header_support' );
    }
    add_action( 'init', 'my_remove_bp_actions', 9 );

    This removes the custom header support from the BP default theme.

    Then in your child theme’s style.css, add:

    #header {background:url(YOUR IMAGE URL HERE) no-repeat;}

    Avatar of Dark Severance
    Dark Severance
    Participant

    @darkseverance

    I’ve never done a child theme before. I followed these instructions here:

    http://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/

    I created my style.css and added in the #header code you posted.

    I’m confused about the functions.php. It says I’m supposed to name it something different, what do I name it and how do I then tie it into the other theme so that I can do the edit that you posted to it?

    Avatar of r-a-y
    r-a-y
    Moderator

    @r-a-y

    Your style.css should look something like this:

    /*
    Theme Name: YOUR CHILD THEME
    Description: My child theme.
    Version: 1.0
    Author: YOU
    Template: bp-default
    Tags: buddypress, two-columns
    */

    /* import default BP style */
    @import url( ../../plugins/buddypress/bp-themes/bp-default/style.css );

    #header {background:url(YOUR IMAGE URL HERE) no-repeat;}

    Your child theme’s functions.php should look like this:

    <?php
    function my_remove_bp_actions() {
    remove_action( 'init', 'bp_dtheme_add_custom_header_support' );
    }
    add_action( 'init', 'my_remove_bp_actions', 9 );
    ?>

    Make sure you activate your child theme in the WP admin area.

    Avatar of Dark Severance
    Dark Severance
    Participant

    @darkseverance

    I tried it again. Appears to be working now. I must of missed something when I cut and pasted everything in.

    Thank you.

    Any idea how to get the ‘wp-admin-bar’ to be above your header image instead of hovering at the top, on top of your logo image?

    Avatar of r-a-y
    r-a-y
    Moderator

    @r-a-y

    Add this to your CSS:

    body {padding-top:25px !important;}

    Avatar of paulmontwill
    paulmontwill
    Participant

    @paulmontwill

    I am wondering what is the idea behind bp_dtheme_add_custom_header_support function. I like to control styles from CSS and inline styles added by some functions are a bit confusing…

    Avatar of Nadie
    Raul Fenossi
    Participant

    @rfenossi

    hi all =), its possible disable the custom header and set only in the default.css without creating a functions.php or without creating a child theme? my reasson is simple with more files and more heavy files the website is more slow for lowers conections. Thanks =)

    Avatar of keela
    octapie
    Participant

    @octapie

    Adding the “!important” worked just fine for me. When I tried adding the function to my child theme it corrected the background, but also made my wp dashboard disappear.

    Avatar of tommyhoang
    tommyhoang
    Member

    @tommyhoang

    @r-a-y, when you say (YOUR IMAGE URL HERE) do you mean just paste a link to the picture we want? How would i change these codes so that I can simply upload a new header image in dashboard and crop it to a certain size?

    i’ve used this tutorial http://buddydress.com/2010/04/custom-header-tutorial-adding-an-image-and-changing-the-size/
    but it gets all messed up when i edit my child theme’s default.css

    Avatar of r-a-y
    r-a-y
    Moderator

    @r-a-y

    @tommyhoang – If you’re using that tutorial, remove any custom CSS you may have for the header and everything should work out fine.

    Avatar of tommyhoang
    tommyhoang
    Member

    @tommyhoang

    @r-a-y, remove custom css from which file? default.css?

    as soon as i put
    <?php

    define( ‘HEADER_IMAGE_HEIGHT’, 300 );
    ?>

    into my functions.php, i cant access wp-admin dashboard. i get this message: Warning: Cannot modify header information – headers already sent by (output started at /home6/stemcomm/public_html/wp-content/themes/STEM/functions.php:17) in /home6/stemcomm/public_html/wp-includes/pluggable.php on line 934

    Avatar of Quint
    Quint
    Participant

    @qrahaman

    @tommyhoang, the major benefit of creating a child theme is so that when the parent theme gets updated, the customizations that were made won’t be lost. The child theme’s style.css is where the CSS customizations are being defined. That’s where you would have styled the header.

    By the way, the child theme’s style.css is intended to override the targeted styling in default.css which resides in the parent theme. I’m new at this but I don’t see the purpose of you creating a default.css for your child theme.

    Avatar of tommyhoang
    tommyhoang
    Member

    @tommyhoang

    @r-a-y @quint, yeah i already made a child theme. and am trying to figure out how to edit the header size. i followed the tutorial (http://buddydress.com/2010/04/custom-header-tutorial-adding-an-image-and-changing-the-size/).

    ray i added this to my child’s function.php define( ‘HEADER_IMAGE_HEIGHT’, 300 );. and on my dashboard i can indeed upload bigger images, but after saving it, my site homepage still displays the default size header. furhtermore the images i upload are always messed up on the bottom or top.

    heres what i mean

    Avatar of tommyhoang
    tommyhoang
    Member

    @tommyhoang

Viewing 15 replies - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.