Can't get image in signup form to align

Need help? Please give a detailed explanation of your problem.
Post Reply
Stephanieo2940
AllPro Provider
AllPro Provider
Posts: 86
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Wed Jun 01, 2016 1:49 pm
Website: www.coachclientconnection.com

Can't get image in signup form to align

Post by Stephanieo2940 »

Hello,

I'm trying to insert my logo into my signup form, but it's refusing to stay inside the form. It won't center, and the right-hand side of the logo sticks out past the right edge of the box. I've tried centering it in the text editor and in the image editor, but nothing changes.

I've attached an image of one of my failed attempts to get the picture inside the box.

Also, is there a way to prevent it from rounding off the corners of the image? Normally I like the effect, but in this case, I want the corners of the image to be flush with the corners of the box, without little white spots at the corners.

Thanks in advance for your help.

Stephanie
Attachments
Signup box problem.png
Signup box problem.png (51.59 KiB) Viewed 10089 times
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: Can't get image in signup form to align

Post by JohnB »

My first suggestion would be to place this custom css code within your Stylesheet.

You can find the Stylesheet under Settings->Administrator and then clicking on "Stylesheet" in the box titled Theme Editor

Here is the code to paste in:

Code: Select all

.leadbox img {
    max-width: 100%;
    margin: 0 auto;
    max-height: 100px;
}
You can change the max-height as needed based on the size of your sign-up box.

This will apply the effect to every image in every sign-up box. If you navigate to the Sign-Up Box under Contacts->SignUp Boxes and then selecting the box you want, you will see a number in the bottom right grayed out, such as "Sign-Up #3" and you can specify the above code to only affect that box #3 by changing it to

Code: Select all

.leadbox3 img {
    max-width: 100%;
    margin: 0 auto;
    max-height: 100px;
}
If you make these changes to your stylesheet, and do not see the changes take affect on your website, first trying holding the shift key while you refresh. If that still does not help, please check out this video about web caching and turning it off temporarily for your site:



Please let me know if you still have questions or issues!
Stephanieo2940
AllPro Provider
AllPro Provider
Posts: 86
Joined: Wed Jun 01, 2016 1:49 pm
Website: www.coachclientconnection.com

Re: Can't get image in signup form to align

Post by Stephanieo2940 »

Thanks, John. That partly fixed it; the image is inside the box now, but it isn't flush with the top and sides like I was hoping. I've attached a quick comparison of what it's doing vs. what I want it to do (though obviously the latter would be less warped and pixelated in the final version).
Attachments
Signup box update.png
Signup box update.png (80.88 KiB) Viewed 10081 times
Stephanieo2940
AllPro Provider
AllPro Provider
Posts: 86
Joined: Wed Jun 01, 2016 1:49 pm
Website: www.coachclientconnection.com

Re: Can't get image in signup form to align

Post by Stephanieo2940 »

Also, is there a way to change the button color? It's rather pale and might be hard for someone with so-so eyesight to read, and it doesn't stand out very well.

Thanks in advance.
Dgalassi1792
AllPro Expert
AllPro Expert
Posts: 68
Joined: Tue Jun 09, 2015 2:09 pm
Website: apwt.bluezenith.com

Re: Can't get image in signup form to align

Post by Dgalassi1792 »

Hi! I"m an All Pro Web Tools developer and noticed your question. From your screen shot, it looks like the image is being displayed in the wrong DIV or grouping, and the left & right padding is being applied to it. If the image was moved outside that styling, it should be possible to style the image separately from the form and manipulate the padding differently for both the form and the form anchor image. It seems like it may need to be done at the coding level of the form itself.

I can help you further with this if you need some styling help. Let me know if this helps.
Stephanieo2940
AllPro Provider
AllPro Provider
Posts: 86
Joined: Wed Jun 01, 2016 1:49 pm
Website: www.coachclientconnection.com

Re: Can't get image in signup form to align

Post by Stephanieo2940 »

Thanks for the info. I would appreciate some additional help with this, as my coding skills aren't advanced enough to implement your instructions.

It would be very handy if the box builder had a WYSIWYG editor, and a bit more flexibility in things like the button style. As it is, one has to update the box content and box style separately, sometimes update the code separately, put the box on a web page, and publish the page, just to see what the box looks like - it's a lot of steps for one task. Just a thought for possible future updates.
Stardoglogistics3059
AllPro Provider
AllPro Provider
Posts: 3
Joined: Fri Sep 09, 2016 5:04 pm
Website: stardoglogistics.com

Re: Can't get image in signup form to align

Post by Stardoglogistics3059 »

Hi! I'm another developer who uses AllProWebTools and I may be able to shed some light on your situation!
I copied your desired image and created my own contact box and have some settings that may be able to help.

Having implemented the code to center your image and bring it within your box, try changing these settings to get rid of the padding. Delete your image and replace it, but this time go under advanced settings and change the vertical and horizontal spacing to 0.

I have attached an image of the settings I modified to achieve this, as well as an image of the result that displays your image banner across the entirety of the signup box. Finally I attached a copy of the "coach client connection" image that I used (this file was cropped from your photo to get rid of the rounded corners- if your banner has rounded images try this file instead.) Hope this helps!
-Jake

*edit* This solution does compromise your padding around the text and data entry fields. Because the banner image and the info in the Signup Box are located in the same container, changing the padding of one will affect the other. Unfortunately there is not a simple way to remove the padding related to that specific image without changing the rest of the box. If the lack of padding presents a problem, I would recommend using the padding for the element but considering an image with a faded edge that would minimize the appearance of the gap between image and border.
Attachments
AllProForumHelp3.png
AllProForumHelp3.png (47.78 KiB) Viewed 10043 times
AllProForumHelp.png
AllProForumHelp.png (46.07 KiB) Viewed 10043 times
AllProForumHelp2.png
AllProForumHelp2.png (77.99 KiB) Viewed 10043 times
Stardoglogistics3059
AllPro Provider
AllPro Provider
Posts: 3
Joined: Fri Sep 09, 2016 5:04 pm
Website: stardoglogistics.com

Re: Can't get image in signup form to align

Post by Stardoglogistics3059 »

Just following up. I've spent some time approaching this problem from the style side and may have a solution if you're comfortable editing CSS code and splicing some things together.

Adding: <div style="padding: 10px 20px;"> to the SignUp Box code, just before the input elements (<div class=Leadbox...), should set the Name and Email fields to be padded separate from the content box itself. Changing the second value (20px) will adjust the horizontal indent. Using the code from earlier in the thread to center the image, turning off the image padding through advanced settings, having text centered, and then modifying the sign up box code to include the div padding for the data entry areas should result in what your after.
Stephanieo2940
AllPro Provider
AllPro Provider
Posts: 86
Joined: Wed Jun 01, 2016 1:49 pm
Website: www.coachclientconnection.com

Re: Can't get image in signup form to align

Post by Stephanieo2940 »

Thanks for the additional info, Stardoglogistics3059. There is one step I'm a bit confused on.

You said "Having implemented the code to center your image and bring it within your box, try changing these settings to get rid of the padding." But I'm not sure what that code is.

An earlier post mentioned that "If the image was moved outside that styling, it should be possible to style the image separately from the form and manipulate the padding differently for both the form and the form anchor image. It seems like it may need to be done at the coding level of the form itself.", but the actual code for doing this was not provided. Is that the code to which you were referring?

You also said, "Adding: <div style="padding: 10px 20px;"> to the SignUp Box code, just before the input elements (<div class=Leadbox...), should set the Name and Email fields to be padded separate from the content box itself." Is the "<div class=Leadbox" also part of the code that was mentioned but not provided?

If you could provide the prerequisite code to implement these steps, that would be appreciated.

Also, would I be making these changes in the stylesheet, or in the HTML section of the form builder?

Thanks in advance. :)
Stardoglogistics3059
AllPro Provider
AllPro Provider
Posts: 3
Joined: Fri Sep 09, 2016 5:04 pm
Website: stardoglogistics.com

Re: Can't get image in signup form to align

Post by Stardoglogistics3059 »

Hi,

Unfortunately, we cannot provide you the code to your specific Signup Box without accessing your account, or having the information provided to us.

The code I referenced that would align your image to the center of the box was the brief snip of code mentioned in the first reply, which you successfully implemented, bringing your image within the border. This code is copied here for clarification:

Code: Select all

.leadbox img {
    max-width: 100%;
    margin: 0 auto;
    max-height: 100px;
}
The changes discuses later would be made to the insert code that you are provide when you "save" a Signup Box. Being provided this code, you should be able to search for "<div class=Leadbox..." and insert the element mentioned, "<div style="padding: 10px 20px;">" before it.
Copy this edited code and try inserting it into the WYSIWYG using the Source Code Tool (far right, second row), simply paste the code after the element you wish to follow and hit okay.

If your Signup Box does not display using this method try the following.

This solution was devised and tested with success by John of AllProWebTools who originally replied, and whose advise I sough when I ran into problems; I'll try my best to break it down:

-You are going to need to host this code (your edited signup box code) on an external site
-Publish or save this site with the newly embedded code
-You should be able to access this HTML code of this newly hosted form
-Copy and past the code into the Web Builder using the Source Code Tool (far right, second row)
-Your SignUp Box element should now display in the WYSIWYG
-Save your page


Hope this is able to shed some light on the situation. I acknowledge that this may be a complicated way to go about "trying to get rid of a gap." If you are unable to get this up and running, would you please post the insert code for the SignUp Box you are trying to create?
Last edited by JohnB on Thu Sep 15, 2016 1:30 pm, edited 1 time in total.
Reason: formatting - code brackets
Stephanieo2940
AllPro Provider
AllPro Provider
Posts: 86
Joined: Wed Jun 01, 2016 1:49 pm
Website: www.coachclientconnection.com

HTML Review

Post by Stephanieo2940 »

Wow, aren't I observant. :? I even managed to miss the mention that your name is Jake - sorry about that!

I tried implementing the solutions you listed, and removed a bit of padding I found in the stylesheet. I've attached an image of what it looks like after the stylesheet modifications, both with your edits, and with the basic "host on your site" code. Hopefully the attachment works; I'm getting an error message that says "failed to move uploaded file".

In case it doesn't work, here are links to pages with the two versions, after the stylesheet modification:
Page where I used the modified code: http://www.coachclientconnection.com/About-Stephanie/
Page where I used the "host on your site" code: http://www.coachclientconnection.com/

After I put it on an external website, then used the "inspect" tool to find and extract the code for the box and put that code in my site, it looked the same as it did when I just pasted the modified code into my site.

Hopefully that information helps. Thank you so much, Jake - I really appreciate the time you've taken to help me with this.
Stephanieo2940
AllPro Provider
AllPro Provider
Posts: 86
Joined: Wed Jun 01, 2016 1:49 pm
Website: www.coachclientconnection.com

Re: Can't get image in signup form to align

Post by Stephanieo2940 »

I'd planned to add this in the above reply, then had a brain fart and forgot, but here is the code for my signup box:

--------------

<style type="text/css">.leadbox {display: block;} .leadbox input[type=text],.leadbox input[type=password],.leadbox input[type=email],.leadbox input[type=tel],.leadbox select,.leadbox textarea { width:95%; padding:2px; margin-bottom:5px;}</style><div class="leadbox" style="color: #;width:400px;padding:10px;border: solid #;background: #;border-radius: ;-moz-border-radius: ;"><p style="text-align: center;"></p>
<p style="text-align: center;"><img style="border-width: 0px; margin: 0px;" class="" src="/content/uploads/Coach_Client_Logo_Infusionsoft_shopping_cart.jpg" width="400" height="67" alt="Coach_Client_Logo_Infusionsoft_shopping_cart"></p>
<p style="text-align: center;"> <br>Fill out this form to get your FREE copy of the Personalized Marketing Plan Questionnaire!</p><div class="leadbox-error"></div><form action="http://www.coachclientconnection.com/info-signup.php" method="POST"><input type="hidden" name="boxid" value="1"><div class="form-group Name"><label for="name">Name:</label><input type="text" class="form-control leadbox-input" id="name" name="Name" value="" placeholder="Name"></div><div class="form-group email"><label for="email">Email:</label><input type="email" class="form-control leadbox-input" id="email" name="Email" value="" placeholder="Email"></div><input type="hidden" class="leadbox-input" name="paige"><input type="submit" name="newsletter" style="margin:0 auto;margin-left:65px;" value="SUBMIT" /></form></div>

--------------

Also, here's what I've currently got in my stylesheet:

--------------

/* WISYWIG color (if content background dark change this color) */

body.mce {
background: #fff;
}

article p{
margin: 0 0 5px;
}
body {
font-family: 'Big Caslon', serif; color: #000000; font-size: 18px;
}
.leadbox {
margin: 0 auto;
}
.leadbox .btn {
margin: 0 auto;
display: block;
}
article a{
font-family: 'Big Caslon', serif;
}
.logo {
display: none;
}
.leadbox img {
max-width: 100%;
margin: 0 auto;
max-height: 100px;
}

--------------

I hope that's helpful. Thanks again!
Post Reply