Resizing Buddypress Header in Default Theme

Things I have done:

1. Created child theme of default theme and activated
2. Made an empty folder style.css into child theme and inserted the top stuff that goes there. Child theme seems to work fine so I think I did that right.
3. Created funtions.php empty folder into child theme
-- I tried copying it into child but got error. I read somewhere to make an empty folder of funtions.php
4. Copied default.css into child theme. Was this suppose to be an empty folder too? I copied the whole thing into it.

5. Just to test how to change the header size to 300 I changed this line in the default themes functions.php folder because I didn't know what to copy and paste into the child funtions.php empty folder:

// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to bp_dtheme_header_image_width and bp_dtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'bp_dtheme_header_image_width', 1250 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'bp_dtheme_header_image_height', 300 ) );

6. I changed where it says height from auto to 300 in the child default.css folder:

#header {
background: #1fb3dd; /* Old browsers */
background: -moz-linear-gradient(top, #1fb3dd 0%, #1fb3dd 15%, #394c79 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1fb3dd), color-stop(15%,#1fb3dd), color-stop(100%,#394c79)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* IE10+ */
background: linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* W3C */
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
color: #fff;
height: 300;
margin-bottom: 20px;
padding-top: 25px;
position: relative;
z-index: 1000;

7. I uploaded my new header and activated


The new header shows up, but still at the same crappy little default size.

What did I do wrong?

Thank you!

  • Tom Eagles

    Hi There @

    Regarding the functions.php file this is from the wp codex.

    Using functions.php
    Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

    In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

    The structure of functions.php is simple: An opening PHP tag at the top, a closing PHP tag at the bottom, and, between them, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

    function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
    add_action( 'wp_head', 'favicon_link' );
    TIP FOR THEME DEVELOPERS. The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. E.g.:

    if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
    // Do something.
    In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.

    As for the css file.

    Import the original css in the file and then add new rules to overide any that you wish to change. see this extract from the codex.

    Example of a basic Child Theme
    Our parent theme for this example is Twenty Twelve. We like most everything about it, except the color of the site’s title, which we want to change from black to green. Using a child theme, all it takes is three simple steps:

    Make a new directory in wp-content/themes, and name it twentytwelve-child (or anything you like).
    Save the code below in a file named style.css, and drop this file in the new directory.
    Go to Dashboard › Themes and activate your new theme, the Twenty Twelve Child.
    Theme Name: Twentytwelve Child
    Description: Child theme for the twentytwelve theme
    Author: Your name here
    Template: twentytwelve

    @import url("../twentytwelve/style.css"); a {
    color: #009900;
    Here is what the above code does, step by step:

    /* opens the child theme’s information header.
    Theme Name: declares the child theme’s name.
    Description: describes what the theme is. (Optional; can be omitted.)
    Author: declares the author’s name. (Optional; can be omitted.)
    Template: declares the child theme’s parent; i.e., the directory of the theme whose templates the child uses.
    */ closes the child’s information header.
    The @import rule brings in the parent’s stylesheet.
    The #site-title a rule defines a colour (green) for the site’s name, overriding the corresponding rule of the parent.
    Note on the @import rule
    There must be no other CSS rules above the @import rule. If you put other rules above it, it will be invalidated and the stylesheet of the parent will not be imported.

    Here is the full codex



  • Patrick

    Hiya @2456Zebra

    Yah, the BuddyPress theme is a bit different than other themes. But adjusting the header dimensions is a lot easier than you might think. :slight_smile:

    In functions.php of the bp-default theme, there are several filters, actions and pluggable functions that can be overridden in your child-theme's functions.php

    To change the header dimensions, simply add the following to your child-theme's functions.php and adjust the values of either/both:

    define( 'HEADER_IMAGE_WIDTH',  apply_filters( 'bp_dtheme_header_image_width',  1250 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'bp_dtheme_header_image_height', 133  ) );

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.