Skip to:
Content
Pages
Categories
Search
Top
Bottom

Header Color in Child Theme

  • @sueme

    Participant

    14 years, 9 months ago

    I’ve followed the “Building a BuddyPress Child Theme” at http://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/ and found it a great help. Simple to understand and simple to follow right up to the functions.php part at the end. Don’t understand the functions.php part though.

    I’m using WPMU2.9.1 and the current BuddyPress Default Theme.

    What I’m trying to do to start with (and to teach myself) is to create child themes with different colored headers.

    I’ve created a BuddyPress Child Theme named BuddyPress Red.

    My Child Theme only currently contains style.css with inherited CSS, and a blank functions.php file.

    I’ve copied the existing bp-default/-inc/images/default_header.jpg, changed the color to red, and renamed the copy to default_header_red.jpg

    My question is, where do I place the default_header_red.jpg and what do I write into the currently blank functions.php

    Hope you can help.

    Sue.

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

  • @modemlooper

    Moderator

    14 years, 9 months ago

    all css should go into your style.css below the imports of the default theme. Create a folder in you child theme folder called img

    #header {

    background: url( img/default_header_red.jpg );

    }

    @sueme

    Participant

    14 years, 9 months ago

    Thank you for being quick.

    I’ve created a folder named img into my child theme, and placed default_header_red.jpg into it.

    I’ve added the css into style.css so that from line 8 it reads as follows:

    ‘Template: bp-default

    Tags: buddypress, two-column, grey, dark

    */

    /* Inherit the default theme styles */


    @import     url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

    /* Inherit the default theme adminbar styles */


    @import     url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

    #header {

    background: url( img/default_header_red.jpg );

    } ‘

    I’ve activated the Child Theme in ‘Site Admin’ and ‘Appearance’ but my header is still the same color.

    @modemlooper

    Moderator

    14 years, 9 months ago

    *smacks forehead* remove that header css. You can upload a new header image via admin. Go to appearance the click option theme header. If you are using the default BP theme with just a different header image you do not need a child theme

    @mrjarbenne

    Participant

    14 years, 9 months ago

    It might be your url for the background. You might need to start further back than the img folder. In order for mine to work I used

    url(/www/wp-content/themes/themename/img/header.jpg)

    I’m using transmit on a mac, and I can right click on the .jpg to see the properties and copy the path. Not really sure about this, I’m knee deep in creating my first child theme myself, but it’s worth a shot.

    @sueme

    Participant

    14 years, 9 months ago

    Modemloop

    Yes. I realise that.

    I was just trying to learn how to create a child theme, but didn’t understand the instructions about functions.php

    I thought I’d give my bloggers an opportunity to choose a theme with a different header color, rather than having to upload a new image.

    I thought that would give me the opportunity of learning a bit about child themes by changing the header colour, and that may point me in the right direction for changing other more difficult things later.

    Still don’t know how to create a child theme that has a different default header color, or about functions, but I do appreciate your replies and help thus far.

    Mrjarbenne

    Thanks for your suggestion.

    I’ve tried background: url(/www/wp-content/themes/themename/img/default_header_red.jpg)

    I’ve also deleted each of these folders in turn and resaved, but still not working.

    In the default theme functions.php there’s a line that starts #header { background-image: url

    So I’ve also used your suggestion but using background-image:url etc

    @sueme

    Participant

    14 years, 9 months ago

    Sorted.

    You just need to insert !important in the CSS code just before the ; and it over-rides the original

    I created the child page as per https://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/

    added an img folder and new image in that folder.

    in the css I put

    #header {

    background: url(full http url to new image.jpg ) !important ;

    }

    Thank you to both of you who pointed me in the right direction.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Header Color in Child Theme’ is closed to new replies.

Topic Info

Topic Tags

Skip to toolbar