Latest topics
» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

» [GAME] Count to 30 - Ange Edition
by SLGray Mon 11 Sep 2017, 14:23

» Rank CSS
by Mr_Grande Fri 08 Sep 2017, 09:24

» make the topic a color
by Ultimas Wed 06 Sep 2017, 19:44

» Chit Chat Thread
by Valoish Sun 03 Sep 2017, 23:20

» The like/thumbs up or down feature
by Dr.kran Sun 03 Sep 2017, 19:21

» My text boxes are glitched, can you help with this type of problem?
by Wolfuryo Sun 03 Sep 2017, 17:08

» User - Made Creations
by SLGray Sun 03 Sep 2017, 16:25

» FM Themes
by SLGray Sun 03 Sep 2017, 16:24

» i need to add css improvement
by Wolfuryo Sat 02 Sep 2017, 12:12

» How do I add hover examine feature?
by Dr.kran Wed 30 Aug 2017, 16:43

» [GAME] World Snake
by SLGray Wed 30 Aug 2017, 14:46

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

Eslam Love

[ 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

avatar
Guest
Guest
View all awards

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:

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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9727
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

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 :
Code:
background-position:0 50%;
avatar
Guest
Guest
View all awards

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

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