How to overlay MaxButton on top of image

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 https://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

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.

Sure! The widget currently reads like this:

\<p><img class=”alignnone wp-image-60″ alt=”Keyboard Crop” src=”https://www.douglascountydaughters.com/wp-content/uploads/2013/01/Keyboard-Crop.jpg&#8221; width=”3000″ height=”1624″ /></p>
<p>[maxbutton id=”1″]</p>\

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="https://www.douglascountydaughters.com/?attachment_id=60" rel="attachment wp-att-60"><img class="alignnone  wp-image-60" alt="Keyboard Crop" src="https://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.

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.

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:      https://www.douglascountydaughters.com
Description:    Child theme for the Pinboard theme
Author:         Mollie Ziegler
Author URI:     https://www.douglascountydaughters.com
Template:       pinboard
Version:        Child 1.0.0
*/
@import url("../pinboard/style.css");

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?

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