[Resolved] form image icon not centralize

[Steven Soh]

attach please see my icon is not centralize. did you know how to centralize it? is that any css code need to add to the style.css?

my website is http://www.clnet-solution.com.my . just purchase it yesterday

[Scott Prock]

That is the way they all look, it was designed that way. I think it gives it a nice touch that you don’t see on every other registration form.

If you want to edit the CSS look for userpro-field-icon and you will need to adjust the left: value. However, once you move the icons, you will need to move the field labels as well. Keep in mind, it’s best that you write custom css files into a css file that won’t get overwritten when you update the plugin. That means don’t edit the plugin css.

Hope that helps … Scott

[Steven Soh]

this is caption icon from my site,

this is caption icon from your site,

can you see the different of this image? your site the icon is centralize within the circle. my site the icon is go upper abit but still inside the icon, i not meaning to change the icon. from my point of view the circle and the image i don think is a one png picture. did you have any way to keep the image icon centralize like you.

[Scott Prock]

ok .. I see what you’re referring to now.

I inspected the css from your site and my site side by side and the first area I can see a difference is you have a reset.css file being used. I’m sure there’s something there that is off setting the icons. I haven’t been able to pin it down yet. I was able to add css to correct it using the code inspector in Safari but you shouldn’t need to do that. There’s a conflict somewhere, I’ll keep looking and let you know what I find.

… Scott

[Scott Prock]

Wow, I have combed over the css many times and I can’t seem to find the trouble. I would try removing the reset.css just as a troubleshooting step. If it corrects the alignment then you know it was the reset. The drawback, there may be other elements of your theme that are relying on that reset.

Another option is to add the code to correct it. You will need to do it for every icon as they all have individually named classes.

For every icon class you could place this code into your style.css keeping mind if you’re not using a child theme, any css edits could get wiped out with an update.

PHP

.userpro-icon-user, .userpro-icon-envelope, .userpro-icon-lock, .userpro-icon-camera { position: relative; top: 8px; }

1 2 3 4 5 6 7

.userpro-icon-user, .userpro-icon-envelope, .userpro-icon-lock, .userpro-icon-camera { position: relative; top: 8px; }

When you come across more icons, just add them in a new line before the brackets making sure to put a comma at the end of each line (except the last)

[Steven Soh]

Hi, it work. but can not put in child theme, is not going to effect. i don no why.

but where to find other icon? i have to adjust in (facebook, twitter, google, website..for example

.userpro-icon-facebook, …etc
.userpro-icon-user,
.userpro-icon-envelope,
.userpro-icon-lock,
.userpro-icon-camera {
position: relative;
top: 8px;
}

[Scott Prock]

I think this should be all of them, if you find any I missed let me know.

PHP

.userpro-icon-user, .userpro-icon-envelope, .userpro-icon-lock, .userpro-icon-camera, .userpro-icon-map-marker, .userpro-icon-facebook, .userpro-icon-twitter, .userpro-icon-googoe-plus-sign, .userpro-icon-home, .userpro-icon-external-link { position: relative; top: 8px; }

1 2 3 4 5 6 7 8 9 10 11 12 13

.userpro-icon-user, .userpro-icon-envelope, .userpro-icon-lock, .userpro-icon-camera, .userpro-icon-map-marker, .userpro-icon-facebook, .userpro-icon-twitter, .userpro-icon-googoe-plus-sign, .userpro-icon-home, .userpro-icon-external-link { position: relative; top: 8px; }

[Steven Soh]

yes..awesome scott. thank you so much. it solve

[admin]

The solution is much simpler 😀 I fixed it in v1.0.45 (under development now) it’s related to force a line-height on the i of the icon like this:

userpro.min.css

add: div.userpro-centered-icons a.userpro-profile-icon i {color: #aaa !important; line-height: 26px !important;}

as I said, this fix is automatically included in latest version. 🙂

[Steven Soh]

how about this icon, it was going down from top. different from the other above.

[admin]

Steven,

please send me the theme via email so I can make sure that UserPro css is consistent (as in live demo) thanks! anyone else who have such issues, or inconsistent css, please email me the theme

[Steven Soh]

Hi, have been sent to your email. please check