Sridhar Katakam

Genesis and WordPress Tutorials

Overlaying text on background image in Minimum Pro using Genesis Extender

by 10 Comments

In one of my previous posts, Pam asked in the comments:

I recently added the Genesis Sidebars plugin. As this is all very new to me. I was wondering if this plugin can be used, perhaps in conjunction with the Genesis Extender plugin (I do not have that one) to do what you show above?

Genesis Sidebars plugin is not needed once you have Genesis Extender. With Genesis Extender you can manage sidebars (widget areas) plus more.

In this article I am going to provide instructions to overlay content of a widget area on the background image that appears below header in Minimum Pro. We are going to use Genesis Extender - meaning we do not make any changes in theme's functions.php or style.css.

overlay-bkgrd-minimum-pro

Step 1

Go to Extender Custom > Conditionals and add a new entry for is_front_page() || is_home() like so:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thanks Sridhar
    Got to update my Minimum 2 site to Minimum Pro and then I’ll be adding this.

    I’m a big fan of the Genesis Extender plugin so hope to see more of your fabulous tutorials including the Extender.

    Reply

  • Sridhar,

    Thanks for the tips here. I am brand new to Genesis and it is good to see that developers like you are working to extend and improve it.

    I am looking to tweak the workings of the Genesis Minimum Pro theme so that I could have multiple instances of the frontpage.php. Basically I want to use it as a template (a frontpage-template.php ???). Is that possible?

    Would your Genesis Extender make that possible, or would it require custom coding?

    John

    Reply

  • Oh my gosh! THIS IS AMAZING! I know *nothing* about coding, etc. and I followed your instructions and everything was working in minutes! I usually never leave comments, but I just had to take a second to say THANK YOU!! Quick question: how do I use the CSS editor (on the homepage) to change the font and size and color? (If that question doesn’t tell you what a novice I am, nothing will! lol) I think I see where to change the color, but I don’t know about the font or size. Thanks again!

    Reply

  • Hi Sridhar,
    Thanks so much for this step by step tutorial. I applied it to overaly a widget over a slider, instead of an image, but for some reason it’s always underneath. Changing priorities in Extender doesn’t help, I can move it around with CSS but it is always sitting underneath the slider.
    Could that be Layer Slider causing this problem?

    I appreciate any suggestions,

    Darek

    Reply

    • I believe I found the problem, adding:

      position:absolute;
      z-index:99999!important;

      fixed it and I can see my widget :-). Thanks again for the tutorial, you are the only one who has it!

      Darek

      Reply

  • Hi Sridhar,

    Thanks so much for posting this. Can you tell me the tweak needed to do this for Beautiful Pro? I’ve tried it and all I got was a large blank space above the banner.

    Thanks,
    Yoneco

    Reply
    • >