Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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


  #1  
Old Apr 27, 2011, 03:14 AM
dutchess
 
18 posts · Jan 2011
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!
  #2  
Old Apr 27, 2011, 07:04 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 27, 2011, 08:01 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Apr 28, 2011, 03:20 AM
dutchess
 
18 posts · Jan 2011
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.
  #5  
Old Apr 28, 2011, 03:26 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Put the CSS in the. Ato->Add HTML/CSS Inderts->CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Apr 28, 2011, 09:30 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old May 5, 2011, 04:04 PM
dutchess
 
18 posts · Jan 2011
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.

Last edited by lmilesw; May 6, 2011 at 04:00 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Overlay text on Header Image Marvin Brown Header configuration & styling 4 Mar 26, 2012 08:48 AM
Can not get Overlay Header Image to work robtuk Header configuration & styling 1 Apr 12, 2011 02:07 PM
Is It Possible To Have Fading Header Images With Image Overlay? robobobo Header configuration & styling 2 Mar 19, 2011 01:15 PM
How to get logo image overlay with header image debeerj Header configuration & styling 1 Feb 2, 2010 06:23 AM


All times are GMT -6. The time now is 04:58 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.