Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] How to: Put autoresponder code in specific part of header (http://forum.bytesforall.com/showthread.php?t=6535)

at100 Mar 30, 2010 04:22 PM

[SOLVED] How to: Put autoresponder code in specific part of header
 
Hi!

I have tried to put my autoresponder code in my Atahualpa Header, above part of my header image, using an absolute position div. The form, however, only settles in the correct position when the window is maximised. When restored down to a smaller window, it is out of place (in both FF and IE). What can I do to resolve this, or what other way can I get the autoresponder form in the position that I need it?

Not sure if I can post links, but it may be helpful to see what I am trying to describe, my site is http://familyfitnesssecrets.com/ and you can see the autoresponder code on the right hand side of the header image.

Thanks for any suggestions!
Asad

juggledad Apr 3, 2010 05:08 AM

remove the code from where is currently is and add in at ATO->Style & edit HEADER AREA->Configure Header Area AFTER the %image and use this instead
HTML Code:

<div id="aweber-form" style="position:RELATIVE; width:270px;
z-index:27; top: -250px; left: 650px;"
>
<script type="text/javascript" src="http://forms.aweber.com/form/26/1664214326.js"></script>
</div>


at100 Apr 3, 2010 03:36 PM

Thank you juggledad, that has resolved the initial issue! However, there is now a huge space between the header image and the body of the page, I can't figure out how to get rid of it! Any suggestions?

Thanks!

Asad
http://familyfitnesssecrets.com/

juggledad Apr 5, 2010 04:29 AM

ok, you are going to have to hand code the %imagee code because you need teh new code inside the image code's <div> so you have
HTML Code:

%image <div id="aweber-form" style="position:RELATIVE; width:270px;
z-index:27; top: -250px; left: 650px;"
>
<script type="text/javascript" src="http://forms.aweber.com/form/26/1664214326.js"></script>
</div>

and you will have to replace it with
HTML Code:

<div id="imagecontainer" class="header-image-container" style="background: url('http://familyfitnesssecrets.com/wp-content/themes/atahualpa/images/header/bg-orange-curtain2.gif') top center no-repeat;">

<div id="aweber-form" style="position:RELATIVE; width:270px;
z-index:27; top: 100px; left: 650px;"
>
<script type="text/javascript" src="http://forms.aweber.com/form/26/1664214326.js"></script></div> </div>


at100 Apr 5, 2010 07:03 AM

Thanks again juggledad! I inserted the new HTML exactly how you said, which did resolve the issue of the huge space, BUT also cut the background image in half (in terms of height). So I went into "ATO > Add HTML/CSS Inserts > CSS Inserts" and added the code:
div.header-image-container { height: 370px; }
which is the correct height of the image, and that seems to have worked. However, is that the best solution to this?

Thanks!

juggledad Apr 5, 2010 07:18 AM

unless you want to go in and mess with the code, it is the only solution I can think of.

at100 Apr 5, 2010 07:32 AM

That's great, thanks again for all your help!


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

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