FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums -
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 12 users online :: 0 Registered, 0 Hidden and 12 Guests :: 1 Bot


[ View the whole list ]

Most users ever online was 172 on Fri 19 Feb 2016, 05:17

[EDGE STYLING] Login icons

View previous topic View next topic Go down


PostGuest on Fri 23 Dec 2016, 09:26

I've got a question about styling custom made login icons within Ange's HTML login page plug-in.

Though this code is working perfectly for the classic login:

/**** LOGIN ICONS ****/
.user_login_form input[type="password"], .user_login_form input[type="text"] {border: 1px solid #DDD;padding: 5px;border-radius: 0px!important;cursor: text;top: 0px;}
.user_login_form input[type="text"] {background: white url(;padding-left: 20px;}
.user_login_form input[type="password"] {background: white url(;padding-left: 20px;}
#username {border: 1px solid #DDD;padding: 5px;border-radius: 0px!important;cursor: text;top: 0px;padding-left: 20px;background: white url(!important;}
#password {border: 1px solid #DDD;padding: 5px;border-radius: 0px!important;cursor: text;top: 0px;background: white url(;padding-left: 20px;}

when I check it in the login form using this CSS:

.fa_login_row [type="text"] {background: white url(;padding-left: 20px;}

I get this:

To no avail, I've tried a lot to get that icon down a bit using padding, margins and what not. Please, help me.

Last edited by Samantha on Fri 23 Dec 2016, 11:25; edited 1 time in total
Ange Tuteur
Gender : Male
Age : 22
Posts : 4733
Points : 9849
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
View user profile

PostAnge Tuteur on Fri 23 Dec 2016, 11:10

You might need to adjust the background positioning of the image. Try adding this property to the rule for the icon :
background-position:0 50%;


Ange Tuteur
Tips and TricksContact Me


PostGuest on Fri 23 Dec 2016, 11:17

Ah, didn't try that one yet. Unfortunately it didn't work like that, but it did work when made !important. Thanks and I'll be styling it a lil further. .50% wasn't quite right yet Wink
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!

Create a new account

Log in

Already have an account? No problem, log in here.

Log in

Permissions in this forum:
You cannot reply to topics in this forum