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.


    r-a-y
    Keymaster

    @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;}


    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?


    r-a-y
    Keymaster

    @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.


    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?


    r-a-y
    Keymaster

    @r-a-y

    Add this to your CSS:

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


    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…


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


    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


    r-a-y
    Keymaster

    @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


    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