Skip to:
Content
Pages
Categories
Search
Top
Bottom

How can I make the logo display? [RESOLVED]

  • Avatar of Wendy Cockcroft
    Wendy Cockcroft
    Member

    @wendy-cockcroft

    I’ve had a great support experience so far and am very grateful. Now I’m back because I’ve got another problem at snazymob.com: I can’t get my header image to display. I’ve got the latest WP and the latest BuddyPress.

    I want to add my image to the header without making it huge. I also need to know whether I need to use a particular code for the smaller responsive version of the header image. The image is 401 x 80px and I don’t want to make it any bigger so I want to change the default setting of 1250 × 133 pixels. I’ve changed the CSS file in my child theme folder. What else do I need to do?

    If I upload the image it gets distorted.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi Wendy, If you post a link, it might be easier to have a look at what your issues is..

    Avatar of Wendy Cockcroft
    Wendy Cockcroft
    Member

    @wendy-cockcroft

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    If you look in the BP default themes functions file you’ll see the constants for setting the header dimensions you can re set these using those examples with your own values and run from your own functions file or I guess bp-custom.php?

    Avatar of Wendy Cockcroft
    Wendy Cockcroft
    Member

    @wendy-cockcroft

    What code do I need to change? I’ve broken it a few times by messing with it so I have to be careful. If you could just tell me what the *exact* piece of code is, I’ll be able to stop banging my head off the desk.

    There’s nothing that indicates it either way in the functions.php file. That’s why I came here.

    Changing #headerimg doesn’t work.

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    There’s nothing that indicates it either way in the functions.php file

    yes there is lines 93/94 define the header_image_width / height

    If you redeclare or reset those constants you will have a new set of default dimensions that will be used as is in the header upload page in the dashboard

    define(‘HEADER_IMAGE_WIDTH’, 800);
    define(‘HEADER_IMAGE_HEIGHT’, 100);

    Avatar of Wendy Cockcroft
    Wendy Cockcroft
    Member

    @wendy-cockcroft

    Ah, that’s where it is. Thank you, Hugo, it’s not immediately apparent.

    Edit: how do you stop it repeating? I changed the code and the CSS says not to repeat it. Why is this not working?

    // 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’, 401 ) );
    define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘bp_dtheme_header_image_height’, 80 ) );

    Avatar of Wendy Cockcroft
    Wendy Cockcroft
    Member

    @wendy-cockcroft

    Hello? How do you stop it repeating?

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    Best not to re-define the actual BP settings as those will get overwritten with upgrades – as I mentioned earlier define the constants in your child theme functions.php or use the add_filter approach although simply setting the constants should be sufficient.

    If you image is repeating it suggest that your attempt to add no-repeat has not been correctly added but I can only guess as I can’t see your code, also it perhaps suggests that the header width is still too wide for your image width, although you have set the default size and ?uploaded a graphic of that exact size if your #header is still wider than graphic it will repeat.

    You may need to overload the function from BP’s functions file that sets the embedded styles for the background image so you can directly adjust the background property.

    copy the function `bp_dtheme_header_style()` and paste that in your functions file that now overrides the BP one and you can add to the #header ruleset.

    Avatar of Wendy Cockcroft
    Wendy Cockcroft
    Member

    @wendy-cockcroft

    Sorry, Hugo, I need to know *exactly* what this is supposed to look like. Putting this in

    `<?php
    if ( !function_exists( ‘bp_dtheme_enqueue_styles’ ) ) :
    function bp_dtheme_enqueue_styles() {}
    endif;
    ?>

    function bp_dtheme_setup() {
    global $bp;

    // Load the AJAX functions for the theme
    require( TEMPLATEPATH . ‘/_inc/ajax.php’ );

    // This theme styles the visual editor with editor-style.css to match the theme style.
    add_editor_style();

    // This theme uses post thumbnails
    add_theme_support( ‘post-thumbnails’ );

    // Add default posts and comments RSS feed links to head
    add_theme_support( ‘automatic-feed-links’ );

    // Add responsive layout support to bp-default without forcing child
    // themes to inherit it if they don’t want to
    add_theme_support( ‘bp-default-responsive’ );

    // This theme uses wp_nav_menu() in one location.
    register_nav_menus( array(
    ‘primary’ => __( ‘Primary Navigation’, ‘buddypress’ ),
    ) );

    // This theme allows users to set a custom background
    add_custom_background( ‘bp_dtheme_custom_background_style’ );

    // Add custom header support if allowed
    if ( !defined( ‘BP_DTHEME_DISABLE_CUSTOM_HEADER’ ) ) {
    define( ‘HEADER_TEXTCOLOR’, ‘FFFFFF’ );

    // 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’, 401 ) );
    define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘bp_dtheme_header_image_height’, 80 ) );

    // We’ll be using post thumbnails for custom header images on posts and pages. We want them to be 1250 pixels wide by 133 pixels tall.
    // Larger images will be auto-cropped to fit, smaller ones will be ignored.
    set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

    // Add a way for the custom header to be styled in the admin panel that controls custom headers.
    add_custom_image_header( ‘bp_dtheme_header_style’, ‘bp_dtheme_admin_header_style’ );
    }`

    makes it worse, not better, because the code shows up above the header.

    Here’s the CSS:

    http://snazzymob.com/wp-content/themes/Snazzy/style.css

    I don’t care how stupid I look to you as long as the end result is that I’m given the correct information. That means providing me with the actual code in the actual way it’s supposed to be entered in the functions.php file.

    This is what is there now:

    `<?php
    if ( !function_exists( ‘bp_dtheme_enqueue_styles’ ) ) :
    function bp_dtheme_enqueue_styles() {}
    endif;
    ?>`

    There’s got to be a way to stop the header image repeating.

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    @wendy-cockcroft wendy I just looked at your layout and stylesheet and I simply added ‘background-repeat: no-repeat; to the #header ruleset that is all you really need to do, not really sure what you tried previously that didn’t work but try that – I would avoid copying over any functions code as I think it’s just going to be problematical.

    But I would add the two definitions I showed you earlier to your functions file so your image dimensions are not overwritten with BP upgrades.

    P.S The code rendered as text as it looks like most if isn’t contained in php tags when it was copied and pasted over to your functions file – but remove all that for the moment – if your image is correct dimension and you are keeping the layout at present width just add the background property above and you should kill the repeat.

    Avatar of Wendy Cockcroft
    Wendy Cockcroft
    Member

    @wendy-cockcroft

    JOY!! All I had to do was add

    background-repeat: no-repeat; to the #header tag. Job done.

    Thanks, Hugo. Sorry for making such a fuss but this was driving me mad.

    Marking this as solved. :D

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    cool, glad it’s working.

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

You must be logged in to reply to this topic.