WordPress.org

Ready to get started?Download WordPress

Forums

MaxButtons: WordPress Button Generator
[resolved] How to overlay MaxButton on top of image (21 posts)

  1. ericandmollie
    Member
    Posted 1 year ago #

    How can I overlay my MaxButton on top of my home page's primary image? Specifically, Pinboard: \sidebar-wide.php\ with a text/html widget, with an image inserted into the widget. I want to overlay the button on top of the image.

    Thank you!

    http://wordpress.org/extend/plugins/maxbuttons/

  2. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Could you possibly link to a page with the example? Sounds like you'd need some custom CSS which I'm happy to supply if you can show an example.

  3. ericandmollie
    Member
    Posted 1 year ago #

    Hi, John!

    Thank you so much for responding! Sure. It's http://www.douglascountydaughters.com. Currently the button is below the image. I'd like to position the button so that it is "in" the picture, left-aligned, in the blue sky area, perhaps even with a sentence or two of text. Thanks again for trying to help me!

    Mollie

  4. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Last request and I should be able to give you an answer. Can you copy/paste what you currently have in your "Text" widget? That way I know exactly what I'm dealing with.

  5. ericandmollie
    Member
    Posted 1 year ago #

  6. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Alright, in the widget, make sure you uncheck the "Automatically add paragraphs" box, if it's checked. If not, make sure you take out the <p> tags surrounding the image and button.

    After that, add in the following CSS:

    .textwidget {
       position: relative;
    }
    
    .maxbutton-1 {
       position: absolute;
       top: 0;
       left: 10px;
    }

    Try that out and let me know how it goes.

  7. ericandmollie
    Member
    Posted 1 year ago #

    Thanks, I'll try it right now...

  8. ericandmollie
    Member
    Posted 1 year ago #

    Ok, in the widget I tried it like this:

    <a href="http://www.douglascountydaughters.com/?attachment_id=60" rel="attachment wp-att-60"><img class="alignnone  wp-image-60" alt="Keyboard Crop" src="http://www.douglascountydaughters.com/wp-content/uploads/2013/01/Keyboard-Crop.jpg" width="3000" height="1624" /></a>
    
    [maxbutton id="1"]
    
    .textwidget {
       position: relative;
    }
    
    .maxbutton-1 {
       position: absolute;
       top: 0;
       left: 10px;
    }

    ...and I also tried it without this part [maxbutton id="1"] in it. I also made sure the "automatically add paragraphs" box is unchecked. What I got was the image on top with the CSS code underneath the image. You can take a look at it on the site now, if you want.

  9. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Sorry about that, meant to have you put the CSS in the actual CSS file. Posting it inside the widget will give you the result that you currently have.

  10. ericandmollie
    Member
    Posted 1 year ago #

    Haha...that's what you get when you deal with a newbie like me. I will try...

  11. ericandmollie
    Member
    Posted 1 year ago #

    Ok, in the editor I have a bunch of .php choices. I know which .php to edit for this specific area that I'm working on. But I'm guessing I need to use a .css file. There are two choices in the editor: the Stylesheet (style.css) and the Visual Editor Stylesheet (editor-style.css). There is also css for the specific button within MaxButton.

  12. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Put it at the bottom of style.css (note: if you update the theme, this bit of CSS will be overridden by the new style.css file. In many cases it's best to create a Child Theme before making template changes).

  13. ericandmollie
    Member
    Posted 1 year ago #

    Ok, so I've just been schooling myself on FTP and Child Themes. I'm so close to getting a Child Theme up and running, but on my Themes page it shows up as broken. Says my stylesheet is missing. This is what I have:

    /*
    Theme Name:     Pinboard Child
    Theme URI:      http://www.douglascountydaughters.com
    Description:    Child theme for the Pinboard theme
    Author:         Mollie Ziegler
    Author URI:     http://www.douglascountydaughters.com
    Template:       pinboard
    Version:        Child 1.0.0
    */
    @import url("../pinboard/style.css");
  14. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Looks like Pinboard actually has its own spot for custom CSS. From the admin dashboard: Apperance -> Theme Options -> Layout then at the bottom you can enter the CSS from above. It will then override the styles in style.css

    Sorry for the run around with this. Hopefully things will fall into place now.

  15. ericandmollie
    Member
    Posted 1 year ago #

    You've been so patient, and I appreciate your persistent help! So, I found the "Custom CSS" box and entered:

    .textwidget {
       position: relative;
    }
    
    .maxbutton-1 {
       position: absolute;
       top: 0;
       left: 10px;
    }

    ...but nothing different happened to my layout. Did I enter the wrong bit of css?

  16. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Did you maybe forget to hit 'Save Settings'? Not trying to be a jerk, just an honest question :)

  17. ericandmollie
    Member
    Posted 1 year ago #

    Haha, no offense taken. Yes, I did hit save. Tried it again just now, to be sure, and no result. Do I need to paste anything else into the box other than the code you gave me:

    .textwidget {
       position: relative;
    }
    
    .maxbutton-1 {
       position: absolute;
       top: 0;
       left: 10px;
    }
  18. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Would you be opposed to me looking at the admin side of your site? If you're okay with that, email me at johnbhartley@gmail.com

  19. ericandmollie
    Member
    Posted 1 year ago #

    That would be great. Just a sec.

  20. johnbhartley
    Member
    Plugin Author

    Posted 1 year ago #

    Note: handled offline, issue resolved. Needed !important for .maxbutton-1 position.

  21. ericandmollie
    Member
    Posted 1 year ago #

    I'm so satisfied with the outcome, excellent support, MaxButton!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic