WordPress.org

Support

Support » Plugins and Hacks » WordPress Button Plugin MaxButtons » [Resolved] How to overlay MaxButton on top of image

[Resolved] How to overlay MaxButton on top of image

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author johnbhartley

    @johnbhartley

    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.

    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

    Plugin Author johnbhartley

    @johnbhartley

    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.

    Plugin Author johnbhartley

    @johnbhartley

    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.

    Thanks, I’ll try it right now…

    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.

    Plugin Author johnbhartley

    @johnbhartley

    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.

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

    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.

    Plugin Author johnbhartley

    @johnbhartley

    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).

    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");
    Plugin Author johnbhartley

    @johnbhartley

    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.

    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?

    Plugin Author johnbhartley

    @johnbhartley

    Did you maybe forget to hit ‘Save Settings’? Not trying to be a jerk, just an honest question 🙂

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] How to overlay MaxButton on top of image’ is closed to new replies.
Skip to toolbar