Round Login HTML5 mdm theme

Submit your artwork to make Linux Mint look better
Forum rules
Topics in this forum are automatically closed 6 months after creation.
Locked
chmeleon

Round Login HTML5 mdm theme

Post by chmeleon »

Hi all!

I wrote this login theme from scratch using Bootstrap 3, jQuery and CSS3.

In the middle of the screen are the images of the users. If a user is clicked it will slide to the left revealing the password input. If the user doesn't have a password set it will log in immediately on the click.
Animations are done with CSS3 transitions.

Make sure you have the .face files for the users otherwise it might be hard to spot the correct user ;)

Image

More Screenshots:
Screenshot 2
Screenshot 3
Screenshot 4
Screenshot 5
Screenshot 6

Download:
http://linuxmint-art.org/content/show.p ... ent=167682

This is my first html login theme. If you find any issues please repot them on my github!

https://github.com/koenhendriks/mdm-login/issues
Last edited by LockBot on Wed Dec 28, 2022 7:16 am, edited 2 times in total.
Reason: Topic automatically closed 6 months after creation. New replies are no longer allowed.
User avatar
clem
Level 12
Level 12
Posts: 4308
Joined: Wed Nov 15, 2006 8:34 am
Contact:

Re: Round Login HTML5 mdm theme

Post by clem »

It's nice to see new themes, especially when they introduce new layouts like this one.

Here's my feedback:

- Try to avoid space chars in names and paths (I had issues importing that theme initially)
- Add keyboard navigation
- I find the layout very attractive and the colors on the screen as well, but it's let down by the choice of colors for the input field and the menus.
Image
killer de bug

Re: Round Login HTML5 mdm theme

Post by killer de bug »

It's interesting. I should definitely try it. :)
chmeleon

Re: Round Login HTML5 mdm theme

Post by chmeleon »

clem wrote:It's nice to see new themes, especially when they introduce new layouts like this one.

Here's my feedback:

- Try to avoid space chars in names and paths (I had issues importing that theme initially)
- Add keyboard navigation
- I find the layout very attractive and the colors on the screen as well, but it's let down by the choice of colors for the input field and the menus.
Thanks! I didn't had a look at existing themes. I just heard that you could create mdm login screens with html and I went for a layout that felt logic and comfortable to me :)
Now that I've red around these forums a bit more I indeed notice most themes do have keyboard support. I'll keep it in mind for the next version.

Not sure what you mean by space chars? I've checked the scripts but can't seem to find where I'm using spaces?

As on the colors, I'm not really a designer. I just went with a nice wallpaper I found online and matched white text with this. I couldn't really find a good background color for the menu's so i just left them transparent (You mean the session and language menu right ?).

For the input background and border color i just used a color picker on the wallpaper and used those colors :P
If you have a better idea for colors please do tell me! It's an easy change (you can even do a pull request on github for the CSS file).

To be honest... I'm actually colorblind haha! So I mostly make the wrong decisions on combining them ;)
killer de bug wrote:It's interesting. I should definitely try it. :)
Great! Please tell me what you think if you tried :)
User avatar
clem
Level 12
Level 12
Posts: 4308
Joined: Wed Nov 15, 2006 8:34 am
Contact:

Re: Round Login HTML5 mdm theme

Post by clem »

Not sure what you mean by space chars? I've checked the scripts but can't seem to find where I'm using spaces?
Sorry I found out more about this since. It's not space chars, but the theme won't load by default because its name (as defined in the info file) doesn't match the name of its directory.
Image
philer

Re: Round Login HTML5 mdm theme

Post by philer »

I like the layout and the idea for the central image. The colors are actually pretty nice (apart from the missing menu backgrounds. How about white? :D)

Personal Feedback (i.e. opinions)
  • Like clem I feel that it should be possible to log in without using a mouse (just the basic login, language selection etc. are a different matter)
  • The various buttons could use a subtle hover effect
  • Your code is kinda all over the place. :p
Some details that may benefit from improvement:
  • The password input field has an outline when focused. Try input { outline: none; }
  • Error messages seem to glitch out a little, the text is all over the place (I looked at it on a 1280x800 screen). Also repeated errors don't cause any sort of "refresh", so there is no visual feedback the second time a wrong password is typed in.
  • You are using jQuery 1.x which has legacy support. Since MDM uses a rather up-to-date webkit engine you can safely use jQuery 2.x which has better performance. (I concede that the difference probably won't be noticable. ^^)
Locked

Return to “Your Artwork”