MaxButtons – how to add button to header image?

Hi again,

I’ve explored this further and think I’m asking the impossible!

So instead, is it possible to insert the max-button short-code in Edit Page > in the Page Title text area?? – with it aligned to the right? I presume I’d need to put some html around it, and have tried this:

<display:inline-block><div align="right"> [maxbutton id="3"] </div></div>

which does push it to the right, but of course only shows the short-code.

I realise that I can easily do the same by adding it as usual in the Page first line with ‘heading 1’ formatting applied – which works great, especially as I want to remove the ‘.entry-header’ area entirely, except until it’s showing Post Excerpts (which need the Post Title)… So ideally I need to retain the Page and Post titles, and instead remove any first headings in a page/post – so my idea of inserting a button in a page title area!

Any suggestions please?

Many thanks.

On your first question, to get it over an image you’d have to use some absolute positioning and possibly change the z-index to get it to sit above the header image.

On your second question, the HTML example you gave is invalid, but looking past that, you could change the page.php or single.php files to not show the_title() and instead you’ll just have the content showing, which would allow the button to be the first thing people see, sort of replacing the title.

Thanks for your help johnbhartley – I’ve had a look at various 2012 page and template files but can’t find what you mentioned, plus i think the php edits are a bit beyond me at present.

I think my best option is to keep the page and post titles in and sit the button in the page content area on the right at the star of the required pages. The problem i have with this is that I’d need the text to wrap around it – which I can’t seem to do. Any ideas?

Otherwise i think I’ll have to just make up an ‘image’ of it, with a link, so I can make use of the text wrap in the image editing bit. And i’ll still use the buttons elsewhere on the site, but perhaps in a sidebar widget.

Cheers.

You could try adding some CSS to give the button it’s placement.

.maxbutton-3 {
  position: absolute;
  top: 0;
  right: 0;
}

Give that a try and if it doesn’t work, send a link to your page for easier troubleshooting.

Thanks for your help – unfortuneately it doesn’t work.

I’ve tries your suggested code with all variations of the button like: +/- a container, a float, in-line block and all various combinations too.

Also tried the above changes with the css code

.maxbutton-3 {
  text-align: right;
}

which doesn’t work either.

And I’ve tried placing the button in various positions within the page text too, with the various combinations… I’m obviously missing something here!

I’m currently working on a development site,so you can see the button placement here: https://trevorpenfold.com/testing/

Thanks for your time.

Okay, I’ve got it working through the inspector, so what you need to do is:

.maxbutton-3 {
position: absolute !important;
top: -50px;
right: 0;
}

.entry-content {
position: relative;
}

That will hopefully take care of it for you. You can adjust the -50px as you like.

Hi,

Thanks for looking at it.

I’ve tried the suggested code and initially i couldn’t get it to work – then it worked perfectly, once I’d put it in a ‘container’ and selected ‘float: right’ in the button settings.

And thanks very much again for taking the time to help me – very much appreciated!

No problem, let us know if you have any other questions.

Okay, I’ve got it working through the inspector, so what you need to do is:

.maxbutton-3 {
position: absolute !important;
top: -50px;
right: 0;
}

.entry-content {
position: relative;
}

That will hopefully take care of it for you. You can adjust the -50px as you like.

Thanks, this helped me with trying to left align the buttons on an entry page for a site I am building. Tried Firebug to pinpoint but this was much easier!

Good to hear!