Is it possible to wrap a div container ONLY around the textbox and the button and float it to the right? Theoretically that should do the trick but i don’t know how i’d implement the plugin to that markup then.
Hey PatMusic,
Sorry for the delay in response. I went ahead and did a test ‘subscribe’ on the site, and it actually looks like the green success message is currently aligned to the right and showing up in the header bar. So it’s possible that you may have already gotten this issue resolved.
If you’re still seeing issues or are looking to tweak something a bit with how it’s setup now, if you could describe in a bit more detail what you’re looking to do (like for example, if you’re looking to center it across the full page width), I’d be happy to take a closer look.
Generally issues like the one you describe can be resolved by changing some CSS, but it ultimately depends on the nature of the elements around it, as well as the changes that need to be made. Just taking a glance at your site, it looks like there’s plenty of room to work with in that top area, so if you’re still seeing issues, feel free let us know!
Hy mc_tak and thanks for your reply.
well, i had to take the site online due to scheduling reasons and so had to make the best fix temporarely. So, actually there is just one little thing that I want to change right now 🙂
As you can see I aligned the plugin on the right of the header bar. The “subscribe” button comes first followed by the textfield where you type in your email address. When you hit “subscribe” the success message appeares on the left of the “subscribe”-button. So far so good 🙂
Now it would be great if could swap the order the email-address textfield and the “subscribe” button. Success message should appear where it appears right now.
To be more specific, i’d like to have the entire newsletter thing lined up like this:
|__Success message__| |__Email Adress__| |__Subscribe Button__|
instead of this:
|__Success message__| |__Subscribe Button__| |__Email Adress__|
Hey PatMusic,
It looks like there’s a bit of CSS code on the site that’s making it appear the way it is now. (in the order: success | subscribe | email field)
In taking a quick look at your site’s CSS by using inspect element in my browser, I’m seeing two things that stick out. Both the “mc_merge_var” and “mc_signup_submit” classes are set to “float:right;”. If you set those to “float:left” instead, you should see that start to display in the order that you’d like.
As a quick demonstration, I downloaded your HTML code and added the following CSS:
.mc_merge_var{
float:left !important;
}
.mc_signup_submit{
float:left !important;
}
And it ordered the buttons in the desired way ( success | email | subscribe). I wouldn’t recommend the above code for your live site, as it uses !important, so I’d recommend finding where those are being set to float right and change them accordingly.
If you have questions, let me know!
float:left won’t do the trick the right way in this case. I had to add a fixed width of 600px to #mc_signup_form in order to have some space for the success-message:
Here is the code:
#mc_signup_form {
float: right;
width: 600px;
}
When I apply “float:left” to mc_merge_var and mc_signup_submit the email-textbox is aligning on the left side of the 600px width div container. The result is that there is a huge space between “Email Adress” textbox and the submit-button. Unless the success message shows up and fills this space the form looks quite messy.
If I delete the fixed width, i’m having trouble with the success message. It’s showing up exactly where the submit button and textfield are.
Where can i edit the following divs? I can’t find them in the css but they’re showing up in firebug and if could edit them, that could be the solution 🙂
1) div.mc_form_inside
2) div#mc_message.updated
Hey PatMusic,
Ah okay. I see that 600px div. What about float:right on that div container, then float:left on the <div>’s around the subscribe button and the email address field?
Here’s what I was thinking:
.mc_form_inside{
float:right;
}
.mc_merge_var{
float:left;
}
.mc_signup_submit{
float:left;
}
Make sure that .mc_merge_var and .mc_signup_submit are not being set to float:right elsewhere.
