WordPress.org

Ready to get started?Download WordPress

Forums

Oenology
[resolved] Header graphics issue (25 posts)

  1. BreezyOhio
    Member
    Posted 2 years ago #

    Chip

    I'm new to WP and so this whole theme/plugin/widget thing was/is a bit overwhelming. In the end I decided to try your theme because it's developed from a teaching standpoint and appears to be more of a labor of love than most others.

    So I'm onto my first task, that of putting my logo into the header. I created and fully sized an image for the header. The first try, a png file with transparent background came in a black background .. I guess from an image converter. The second attempt, a bmp file with a white background came in as such in the preview window BUT in the actual page it loads grey, and the headline texts are there too.

    Any ideas as to what I'm bumping ino here? I'm suspecting it might be that there is a black image file from the menu that is laying over or behind the header graphic.

    I'm using Varietal and there is no background image in use. Also I have not setup any menu yet.

    Thanks for any help!

    http://wordpress.org/extend/themes/oenology/

  2. BreezyOhio
    Member
    Posted 2 years ago #

    I know what happened to the png file that went black .. it was oversized by a few pixels as I was trimming to place the graphic stratgegically, and thus WP converted it to a jpg file, as I found in the media library.

    The rest is still a problem ..

  3. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    @BreezyOhio,

    I appreciate you using Oenology! Do you have a link to the live site, so I can see what's happening?

    Thanks!

    Chip

  4. BreezyOhio
    Member
    Posted 2 years ago #

    here it is ..
    http://xxxxx/~
    It's a temporary location for testing ..

  5. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    Thanks for that!

    This is a known issue, and will be fixed in version 2.5. (I had to submit a core patch to get it fixed properly, but I'll have a workaround in Oenology in the meantime.)

  6. BreezyOhio
    Member
    Posted 2 years ago #

    Okay .. is there an edit I can do with header.php in the meantime? If it's soon to be fixed I'll just let it go as it will be a few days till live publish.

    I'll edit out that live link too if it's okay with you ..

  7. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    Here's the simple fix.

    Look in \functions\hooks.php, line 872:

    function oenology_hook_site_header() {
    
    	$site_header = '';
    
    	// Displays the blog name, as defined on the General Settings page in the administration panel
    	$site_header .= '<div class="site-header-text">' . get_bloginfo( 'name' ) . '</div>';
    	// Displays the blog description, as defined on the General Settings page in the administration panel
    	$site_header .= '<p>' . get_bloginfo( 'description' ) . '</p>';
    
    	echo apply_filters( 'oenology_hook_site_header', $site_header );
    }

    The fix for this function is as follows:

    function oenology_hook_site_header() {
    
    	$site_header = '';
    
    	$site_header_name = ( 'blank' != get_header_textcolor() ? get_bloginfo( 'name' ) : '&nbsp;' );
    	$site_header_description = ( 'blank' != get_header_textcolor() ? get_bloginfo( 'description' ) : '&nbsp;' );
    
    	// Displays the blog name, as defined on the General Settings page in the administration panel
    	$site_header .= '<div class="site-header-text">' . $site_header_name . '</div>';
    	// Displays the blog description, as defined on the General Settings page in the administration panel
    	$site_header .= '<p>' . $site_header_description . '</p>';
    
    	echo apply_filters( 'oenology_hook_site_header', $site_header );
    }

    If you want, just overwrite the function accordingly.

    However, there is a safer way to do it: use the custom oenology_hook_site_header filter. e.g. add this to the bottom of functions.php (or in a Child Theme):

    function custom_oenology_site_header_filter( $site_header ) {
        $site_header = '&nbsp;'
        return $site_header;
    }
    add_filter( 'oenology_hook_site_header', 'custom_oenology_site_header_filter' );

    If that's confusing, just use the first option, of overwriting the function with the new function code.

  8. BreezyOhio
    Member
    Posted 2 years ago #

    That last option would be for editing/adding code to functions.php .. would that be before the
    ?>

    or after that line?

  9. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    That is a closing PHP tag, so you'll want to add PHP immediately before it.

  10. BreezyOhio
    Member
    Posted 2 years ago #

    Yep, thought so.

    So when I do this I'm getting ..
    Parse error: syntax error, unexpected T_RETURN in /home/jwhit/public_html/wp-content/themes/oenology/functions.php on line 132

    line 132 on my file is ..
    return $site_header;

    Any thoughts?

  11. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    Syntax error on my part. :)

    Change this:

    $site_header = '&nbsp;'

    ...to this:

    $site_header = '&nbsp;';
  12. BreezyOhio
    Member
    Posted 2 years ago #

    Yes, those darn syntax errors .. I understand ;-)

    Just a heads up though .. that did get rid of the text but also got rid of the header image as well

  13. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    I should not post help when distracted. :)

    Try this instead:

    function custom_oenology_site_header_filter( $site_header ) {
        $site_header = '';
        $site_header .= '<div class="site-header-text">&nbsp;</div>';
        $site_header .= '<p>&nbsp;</p>';
        return $site_header;
    }
    add_filter( 'oenology_hook_site_header', 'custom_oenology_site_header_filter' );
  14. BreezyOhio
    Member
    Posted 2 years ago #

    Chip

    Yes, this stuff is too tricky to do when distracted by your day job, for sure.

    results are ..
    no text (no matter what is selected in the header settings)
    there is still a grey overlay over the header image.

    I'm not really sure where this grey is coming from. Thanks for giving it an effort and when you get it further down the road or if you want me to try something just reply to this thread. I'll be happy to try it out.

  15. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    The opaque overlay is added via CSS, via the oenology_header_style() callback, defined in \functions\theme-setup.php.

    Specifically, on line 494:

    #site-header-text {
    	background: rgba(0, 0, 0, 0.2);
    }

    This opacity is applied when a non-default header image is selected.

    If you want to override it, you can again use a filter:

    function custom_oenology_header_style() {
        ?>
    <style type="text/css">
    #site-header-text {
        background: none;
    }
    </style>
        <?php
    }
    // Use a priority of 99, to ensure this outputs last
    add_action( 'wp_print_styles', 'custom_oenology_header_style', 99 );

    (Untested, mainly because I don't have access to test just at the moment...)

  16. BreezyOhio
    Member
    Posted 2 years ago #

    Would I add that function to the functions.php file as before?

    just curious .. why would you ever want to add a shaded overlay to a non default header image or is that just some leftover code from something else?

  17. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    Would I add that function to the functions.php file as before?

    For that type of change, I would strongly recommend using a Child Theme. But, whether in Oenology itself, or in a Child Theme: yes, you would put it in functions.php.

    just curious .. why would you ever want to add a shaded overlay to a non default header image or is that just some leftover code from something else?

    It is a design decision. :) Mainly, I wanted to blunt the contrast of the available header images, so that the header text would display more legibly.

    What I can do, though, is only apply that opacity if the header is set to display the header text. I'll add that as a fix for the next Theme version.

  18. BreezyOhio
    Member
    Posted 2 years ago #

    I took your advice and created a child .. good thought.

    Anyways I cannot get it to go with my functions.php file. I'm sure you can look at it and in 10 seconds tell me where it's wrong. It's the php flags I'm sure ..

    <?php
    function custom_oenology_header_style() {
    ?>
    <style type="text/css">
    #site-header-text {
    background: none;
    }
    </style>
    <?php

    // Use a priority of 99, to ensure this outputs last
    add_action( 'wp_print_styles', 'custom_oenology_header_style', 99 );
    ?>

  19. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    Looks like you're missing a closing brace on your function call:

    <?php
    function custom_oenology_header_style() {
        ?>
        <style type="text/css">
        #site-header-text {
            background: none;
        }
        </style>
        <?php
    } // <-- YOU SEEM TO HAVE LEFT OFF THIS CLOSING BRACE
    // Use a priority of 99, to ensure this outputs last
    add_action( 'wp_print_styles', 'custom_oenology_header_style', 99 );
    ?>
  20. BreezyOhio
    Member
    Posted 2 years ago #

    Okay, well i wasn't able to get the child functions.php approach to work. I THINK it was because of the add-action, which seems to only affect the print view of the page. I also tried some other approaches such as add_action 'after_setup_theme' but no luck there either.

    in the end I edited the theme-setup.php file

    I would vastly preferred to use the child functions.php so that it won't break on updates but such is life. Looks great so far.

  21. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    You could try changing:

    add_action( 'wp_print_styles', 'custom_oenology_header_style', 99 );

    ...to this:

    add_action( 'wp_head', 'custom_oenology_header_style', 99 );

    I could help you troubleshoot on your test site. The main things to check are:
    1) Is the defined <style> being output properly in the rendered HTML document?
    2) Is the defined <style> being output after the default header image style tag?

  22. BreezyOhio
    Member
    Posted 2 years ago #

    I reverted the theme-setup.php and made the suggested change and it works!

  23. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    Fantastic!

    I had forgotten that the custom image header callbacks output at wp_head, rather than an earlier hook. :)

  24. Chip Bennett
    Theme Review Admin
    Theme Author

    Posted 2 years ago #

    If you wouldn't mind doing me a favor (it helps me keep track of open issues): if the issue is resolved to your satisfaction, can you mark the topic as resolved?

  25. BreezyOhio
    Member
    Posted 2 years ago #

    I did that but I guess I didn't click the "change" button below it ;-)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags