[SOLVED] How do I overlay J-Shortcodes in the header image?
 

Hi, I have been playing around with the ATA>Header Image>Overlay Header Image section, and cannot insert J-shortcodes. I would like to create a call to action button in the header area.

Is this possible? I am able to make html edits (bolding, italicizing, etc) successfully in that overlay area.

I am on Wordpress 3.1.2
Atahualpa 3.6.4

Thanks!

You can add HTLM or some PHP to that area - shortcodes are a different matter and are not processed. The plugin that uses the shortcode would somehow have to hook into the theme code and I'm not sure if that is even possible.

Here is the convoluted solution which I seem to be good at.

• Add new widget area in the Configure Header Area box before %image
• Install the Spectacu.la Page Widget
• Add the shortcode to a page
• Use that page as a widget in the previously created widget area
• Position with CSS as necessary

Hi Larry, I tried using the spectacu.la plugin, but couldn't get it to look right.

The plugin/header widget created the order button, but it took up a lot of space and shifted the header down. Is there a way to make the rest of the widget area transparent so that it doesn't move the header? I want to have only the order button shown.

And what did you mean by "position with CSS as necessary" ? Where would I insert css? In the Configure Header Area?

Thanks.

Put the CSS in the. Ato->Add HTML/CSS Inderts->CSS Inserts

This gets into CSS which is where I use Firebug to determine selectors and then apply the CSS necessary to move the item where I want. Familiarity with CSS comes into play.

Another solution would be to use the html code for a button and wrap that in a div or span and position with CSS.

Thanks for the advice guys. I finally figured it out. I created a standard shortcode button and put it on the page, and used html to move it into position on the header. (Through the regular wordpress html page edit section, not within the ATO)

For example, you have a header and then the text on your page. Put the shortcode inside this div:

<div style="display: inline-block; margin-left: 600px; margin-top: -140px; position: absolute; ">
[jbutton link="http://homepage.com/order-online" color=orange size="xlarge"]Order Online[/jbutton]
</div>

It will move the button 140 pixels above your main text container and 600 pixels from the left edge of the container.