Action hook for header logo image with WooCommerce

  • elarson

    #9978

    I’ve used an action hook in the header.php for a text widget with a header logo image to be layered on top. It works great for the standard header and blog featured images — the action hooks are reall nice! It is just not working for WooCommerce archive and product pages.

    I know this is not a Graphene issue, but wonder if anyone has any ideas. The HTML on the WooCommerce arhive and product pages show the HTML for the graphene-dynamic-widget, but the image is not appearing. See http://www.robertpit.com/paintings (archive) and select any of the paintings — all have a featured image. Same results in Firefox, Chrome, Safari.

    I’ve set a high z-index on the image and the graphene_header elements and a low z-index on :

    img src="http://www.robertpit.com/wp-content/uploads/RobertPit-Website-Header-Text.png"

    #graphene-dynamic-widget-graphene_header { z-index: 999  !important; }
    #header .sidebar-wrap { z-index: 999 !important; }
    #graphene-dynamic-widget-graphene_header .textwidget { z-index: 999 !important; }
    .header-img { z-index: 0 !important; }
    .woocommerce img, .woocommerce-page img { z-index: 0 !important; }

    Any help would be most appreciated. This is driving me nuts. Thanks.

    Mod

    Kenneth John Odle

    #45048

    Try adding this to custom CSS or child theme stylesheet:

    #header .sidebar-wrap {
    position: relative;
    }

    See if that does what you need without having any ill effects.

    Moved to Support

    Mod

    Kenneth John Odle

    #45049

    Since you’re not using rotating header images, why not just add that text to your header image? It’s a simple thing to do in GIMP or Photoshop.

    elarson

    #45050

    Thank you so much Kenneth.The ‘position: relative;’ is exactly what I needed.

    About your other question about editing header text… We want the default header image to be used when it is not a painting (product). When it is a painting, we want the logo text to appear on top of the painting (featured image). I tried to do it in CSS, but there is no way to do a proper “bevel” or relief emboss to show a highlight on the logo text and I don’t want to edit every new painting that comes in. Take a look at it now, and I think you will see what I mean. Here is an example: http://www.robertpit.com/paintings/the-collapse.

    Mod

    Kenneth John Odle

    #45051

    I see. I kept seeing the same header image everywhere.

    Glad it worked for you!

    Marking thread as resolved. You can do this yourself as well.

Viewing 5 posts - 1 through 5 (of 5 total)

  • You must be logged in to reply to this topic.