Skip to:
Content
Pages
Categories
Search
Top
Bottom

Header Background Image

Viewing 15 replies - 1 through 15 (of 15 total)
  • 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.

    Profile photo 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;}

    Profile photo of Dark Severance
    Dark Severance
    Participant

    @darkseverance

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

    https://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?

    Profile photo 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.

    Profile photo 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?

    Profile photo of r-a-y
    r-a-y
    Moderator

    @r-a-y

    Add this to your CSS:

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

    Profile photo 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…

    Profile photo 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 =)

    Profile photo 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.

    @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

    Profile photo 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.

    @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

    Profile photo 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.

    @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

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Header Background Image’ is closed to new replies.
Skip to toolbar