PDA

View Full Version : Mailchimp Wordpress Embedded Header



chezzy62
Apr 26th, 2010, 11:03 PM
Hello Codingforums!

I had a little problem, and I was wondering if anyone could help me.

http://www.optimisticwellness.com/

I am trying to squeeze my mailchimp subscribe box, right underneath the search box/rss icon. I would love to have the subscription box laying perfectly flat underneath. However, what you see on my site right now is the closest that I could get.

Here is the code of the header.php file. Thanks a lot!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bf_title(); ?></title>
<?php bf_metaTags(); ?>
<?php bf_head(); ?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php if ($bf_feed_url) echo $bf_feed_url; else bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<?php bf_top(); ?>

<!-- begin #container -->
<div id="container" class="clearfix">
<?php bf_top_container(); ?>

<!-- begin #header -->

<div id="header" class="clearfix">
<?php bf_header(); ?>
<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {position: relative;}
#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
.mc-field-group {overflow:visible;}
</style>
<![endif]--><script type="text/javascript" src="http://filminsight.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://filminsight.us1.list-manage.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://filminsight.us1.list-manage.com/js/jquery.form.js"></script>
<script type="text/javascript" src="http://filminsight.us1.list-manage.com/subscribe/xs-js?u=35a4c4979c65c3035bbd5d98c&amp;id=1fa2e966f6"></script>

<div id="mc_embed_signup" style="width: 156px;">
<form action="http://filminsight.us1.list-manage.com/subscribe/post?u=35a4c4979c65c3035bbd5d98c&amp;id=1fa2e966f6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #ccc;padding-top: 1.5em;margin: .5em 0;background-color: #fff;color: #000;">
<legend style="text-transform: capitalize;font-weight: bold;color: #000;background: #fff;padding: .5em 1em;border: 1px solid #ccc;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;">Subscribe to 'The Ultimate Optimist' Newsletter</legend>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;">
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #FBE3E4;color: #D12F19;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
</div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<!-- end #header -->

<?php bf_belowheader(); ?>


Thank you so much!
Josh Lipovetsky.

abduraooft
Apr 27th, 2010, 10:09 AM
<div id="mc_embed_signup" style="width: 156px;">
<form action="http://filminsight.us1.list-manage.com/subscribe/post?u=35a4c4979c65c3035bbd5d98c&amp;id=1fa2e966f6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #ccc;padding-top: 1.5em;margin: .5em 0;background-color: #fff;color: #000;">
<legend style="text-transform: capitalize;font-weight: bold;color: #000;background: #fff;padding: .5em 1em;border: 1px solid #ccc;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;">Subscribe to 'The Ultimate Optimist' Newsletter</legend>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address </label>

<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;">
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #FBE3E4;color: #D12F19;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
</div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>

</div> First of all, I'd recommend you to remove all those inline styles and move them to your external CSS file.

After that, move your "subscribe box" to just below the "top-search" in the markup, and then apply float:right;clear:right; to it.

chezzy62
Apr 27th, 2010, 06:30 PM
Thank you very much, abduraooft!

I copied your new code, and I applied the right float in the markup. Now, my site looks a little better. But the subscribe box is still not fully under the search box, and it is half sticking outside of my layout. Do you know how I should proceed?

Thank you so much!
Josh Lipovetsky.