PortalLatest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» 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 - GeekPolice.net
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
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» 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 - GeekPolice.net
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
Recent Tutorials
Top posting users this month
Top Achievers
![[EDGE STYLING] Login icons Poll_c10](https://i.servimg.com/u/f86/18/21/41/30/poll_c10.gif?poll=cap_l){kind=small}
![[EDGE STYLING] Login icons Poll_m10](https://i.servimg.com/u/f86/18/21/41/30/poll_m10.gif?poll=m){kind=small}
![[EDGE STYLING] Login icons Poll_c10](https://i.servimg.com/u/f86/18/21/41/30/poll_c10.gif?poll=cap_r){kind=small}
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 2 Bots
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
[EDGE STYLING] Login icons
Page 1 of 1 • Share
- Guest
Guest
Guest 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:
when I check it in the login form using this CSS:
I get this:
![[EDGE STYLING] Login icons F7f65fa7b71e421fa4ef22e0953e8099](https://2img.net/h/image.prntscr.com/image/f7f65fa7b71e421fa4ef22e0953e8099.png)
To no avail, I've tried a lot to get that icon down a bit using padding, margins and what not. Please, help me.
Though this code is working perfectly for the classic login:
- Code:
/**** 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(https://i.imgur.com/rzOu1.png)no-repeat;padding-left: 20px;}
.user_login_form input[type="password"] {background: white url(https://i.imgur.com/dlS8w.png)no-repeat;padding-left: 20px;}
#username {border: 1px solid #DDD;padding: 5px;border-radius: 0px!important;cursor: text;top: 0px;padding-left: 20px;background: white url(https://i.imgur.com/rzOu1.png)no-repeat!important;}
#password {border: 1px solid #DDD;padding: 5px;border-radius: 0px!important;cursor: text;top: 0px;background: white url(https://i.imgur.com/dlS8w.png)no-repeat;padding-left: 20px;}
when I check it in the login form using this CSS:
- Code:
.fa_login_row [type="text"] {background: white url(https://i.imgur.com/rzOu1.png)no-repeat;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
Administrator - Gender :
Posts : 4741
Points : 12256
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser :
Forum Version : 
-
Ange Tuteur 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 :
- Code:
background-position:0 50%;
- GuestGuest
Guest 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 
- Sponsored content
Sponsored content
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum