MDM HTML5 Themes

[clem]

This thread is dedicated to the design of HTML5 themes for MDM.

Don't hesitate to post your theme here or to ask the developers questions.

Good luck

[samriggs]

Working on one now, gives me a chance to play with html5 and css3, I was looking for an excuse now I have one
Clem are you going to add this for screensavers as well? This will be a huge bonus and make life a heck of a lot easier to make them using html5 and css
I hope so

Here is mine so far

Just got the back tiles done and login back, next the buttons and then some animations the fun part which is what I am really looking for forward to fooling around with. Just sort of making this one up as I go along.
Just wanted to say thanks for adding that emulator as well, makes life a heck of a lot easier for testing.
Sam

[clem]

Nice Sam,

We're considering using HTML5 for the screensaver as well, but not in Mint 15. If it happens it should come in Mint 16.

[samriggs]

Nice Sam,

We're considering using HTML5 for the screensaver as well, but not in Mint 15. If it happens it should come in Mint 16.

Looking forward to this one, gives me an excuse to play with more html5 and see what I can do with it.

[samriggs]

Alrighty I got the first one done.
I did try some extreme insane animation with particles and strings etc but it threw the whole thing off including all the top measurements, so I'll fool around with that one later one and recode some other parts to stop that from happening.
I opted for some simple css animations which makes things run a lot smoother and quicker, I took the idea of the animiation from a android nexus old wallpaper it's really simple but looks ok.
For a first one it's simple but quick, I kept a lot of the layout that previous there and didn't change much, just some colours and added some more stuff to it instead.
I want to do a full blown steampunk one with blimps and old planes flying (animated in a sprite sheet) etc etc, similar to my live wallpaper I did for android but this might better suited for a screen saver as it might slow down the login page which is what I am trying to avoid (I hate waiting for a login page to load).
So here it is for anyone that wants to take it for test run and please let me know if you find any bugs, I only tested it on my laptop so only one screen resoltion plus the emulator.
Here is a screenshot from the emulator

I added a link to the file (it was to big to put here and on linux mints art site so I had to choose a zip compression for deviantart instead of tar.gz (just unpack it and recompress it as a tar.gz if you want the ease of installing it.
You can get it http://samriggs.deviantart.com/art/Meta ... 1362540172
Enjoy
Sam

[Brahim Salem]

wow great theme

[clem]

It's a good start! Nice anim in the background.

You should replace all the bootstrap stuff (session selection, error message..etc) as it doesn't fit the theme in my opinion.

Coming up in MDM we'll add some arguments to mdm_add_user() to let the theme know which users are already logged in and which was selected last, and we'll probably add a mdm_add_language() for language selection. I'll write here to let everyone know when this happens.

Oh, and I almost forgot, you can use this to implement keyboard navigation: http://craig.is/killing/mice

[sdi03]

That's one hell of a theme Unfortunately I get an error when loading it... "Error loading MetalMint" and automatically gets a default one, Mint14 64bit here.

Is there any guide to follow to make a new working layout from scratch? I mean an explation to refer to while coding a completely new layout. I'd like to contribute

[clem]

Well, you can design the HTML part the way you want, just like you would a website. The important thing is to have the javascript functions in there since that's what MDM calls to update the theme. Within these functions, the important thing to know is that "alert" is used to send info from the theme to MDM.

[samriggs]

You should replace all the bootstrap stuff (session selection, error message..etc) as it doesn't fit the theme in my opinion.

Oh, and I almost forgot, you can use this to implement keyboard navigation: http://craig.is/killing/mice

Will do, I didn't go as far as the error messages yet in the bootstrap, I just got to the selection part and thought it was to bright, I might add a dark back to it instead but then I'll have to change some of those icons to make sure they show up (like the gnome one, it was to dark to have a dark back on it).
That keyboard script looks pretty cool, I'll have to add that one.
Oh Clem one thing also, I tried opening the bootstrap.min.css file but it took for ever in gedit (what I use for css) plus it was all budled together, I opened it up in geany instead with no problems and started separating it all to make it more readable and noticed at least the main first parts were the same as the bootstrap.css file, so I took a chance and made a copy of the bootstrap one and just renamed it bootstrap.min.css to save myself a headache of separating all the lines, is there anything different in those two files? If so I'll go back and redo it again the long way. Or just rename the html file to refer to the bootstrap.css instead of the min one, lol I guess that would of been alot easier lol.
I want top try some sprite sheets and see if it kills it or not for loading time, if so non animated only that move I guess, but not on this one.

Unfortunately I get an error when loading it... "Error loading MetalMint" and automatically gets a default one, Mint14 64bit here.

Do you have the new mdm installed? Heres where to get it and how to do it, http://blog.linuxmint.com/?p=2327 this mdm is not in linux mint yet.

Is there any guide to follow to make a new working layout from scratch? I mean an explation to refer to while coding a completely new layout. I'd like to contribute

Not really except for Clems example, but it has everything you need in it to make a new one, not how to do it though, if you made web pages before using html5 or html , javascript and css then you should know your way around this and make a new one. It's all web making stuff, not to hard at all.
But to help you along here's some links that might give you a head start.
CSS stuff
http://www.w3schools.com/css3/css3_animations.asp
HTML5 stuff, this is a book worth buying if you want to learn, get the source code from firefox development tools
http://lamberta.org/html5-animation/
some more stuff
http://www.webmaster-source.com/2012/06 ... avascript/
http://addyosmani.com/blog/jquery-sprite-animation/
A great sprite sheet animation code but uses an insane javascript engine (probably to much for a loading page)
http://blogs.msdn.com/b/davrous/archive ... seljs.aspx

Hope it helps you help.
Sam

[clem]

Sam, the .min.css file is basically the same but all in one line. It's more condensed to make it faster to load that's all

For more info on bootstrap: http://twitter.github.com/bootstrap

I used it in my theme because it was convenient, but if it doesn't integrate with your theme, you're better off not using bootstrap at all.

[samriggs]

Sam, the .min.css file is basically the same but all in one line. It's more condensed to make it faster to load that's all

For more info on bootstrap: http://twitter.github.com/bootstrap

I used it in my theme because it was convenient, but if it doesn't integrate with your theme, you're better off not using bootstrap at all.

I like it, it makes my life easier to code it, I just jumped the gun with the min file and instead of just linking the bootstrap css file I made a copy and renamed it instead (stupid on my part but it was late lol)
The only problem I'm having right now is adding a canvas to do some crazy html5/javascript animation on, it throws off some of the other measurements, but I'll find a way around it with more time while containing the bootstrap file as well (that way it might make it easier for anyone else wanting to use use it for their own stuff)
If I get more time away from my android stuff maybe I'll come up with an animated framework engine for everyone to use, that way they can just implement a few lines of code and drop in the artwork and it's done, just takes a bit of time to come up with an engine, hopefully I can steal away some to do it.
Plus it will be great for making some screensavers when and if that gets implemented in the future .
Hmmm maybe I'll come up with some css layouts as well for top,right,left,bottom layouts , put it all in separate files and just link that css file and it automatically switches layouts. Lots of potential with this one, I like it.
Sam

[Brahim Salem]

When will this theme be backported to LM 14

[samriggs]

When will this theme be backported to LM 14

It won't, (unless Clem adds the new mdm to it) without the new mdm you cannot have any animations, this is strickly for the new mdm.
It only takes a couple of minutes to install the new mdm into lm14 if you want to, I'm using lm14 and just installed the new mdm to get it to work.
Here's where to get it and how to do it if you want it, plus then you can make some yourself and add to the new mdm
I'm sure a lot more themes made for this new mdm will be great.
It's all explained here: http://blog.linuxmint.com/?p=2327
I am making a cinnamon and gtk,metacity to go with the mdm, it's just going to take a bit to finish it all. it will be good for lm 14 no backporting needed for that one.

I changed the dropdown to hopefully make it look it together with the rest of the theme here's how it looks now.

The only thing I couldn't find to change is the language section and the rest of the warnings (restart, quit etc), still not sure where those are to change them.
I tried changing other things thinking it was them but no go, Clem do you know if they can be changed or what id their under in the bootstrap?

Thanks
Sam

[anandrkris]

@ Sam - Nice work. I've some wild ideas for another theme. Am no designer. So take f there is something good in it.

Can we "The Matrix" text animation in login screen? The garbled horizontally flowing text could be random plus fused with names related to Mint such as Clem, Olivia, Cinnamon, etc. It will be fun to pick the words. Of course, without cluttering the login window.


- From http://www.matrixtext.com/

In my opinon, will look awesome in your color theme.

[samriggs]

lol I was thinking of the matrix idea when I was making this one actually but thought it was passe by now, ya it shouldn't be too difficult to make a matrix animation, might have to be a javascript instead of a css animation though, mainly because of the randomness of the letters or an array of them (never thought about how to code it until this very second lol), I'm sure theres probably a few matrix javascripts codes floating around out there somewhere that could be used without creating one from scratch, if you know anything about coding in javascript, it's pretty simple stuff (a cut down version of java) you should be able to put one together yourself if you find a script laying around on the net somewhere, all that would have to be done is make a vertical string of so many chars that move downward from the top or a += operator from the top that will move it on down and when it goes pass the bottom or > height renew it in a random x position at the top again so it reappears at a different spot next time, (make sure it's minus the length of it so it starts from the bottom of the string instead of the top) make a few of these at different lengths, brightness, speed etc some a bit blurred or transparent with different alpha states and your done. Thats a short version of how it might work just thinking of it off the top of my head here, but yup it's very doable and as I said I'm sure theres probably quite a few scripts flotaing around that you might be able to just shove in the html file and you should be done. Good ole copy paste javascript lol. Check it out do a search and you might come up with one that you can use
If you want the wallpaper I made or the tile I made for it I uploaded it under wallpapers in here.
Soon as I get some more time here I'm going start coming up with some css animations and put them in a separate file for those that don't know how to do it that much, all you'll have to do is add an id in the html for which one you want and the images or drawn graphics you want etc, still thinking how to do it to make it as simple as possible for folks and some javascript animations as well so it will be simple for folks to make there own from that don't know how to code animations. Hopefully I can get at it soon.
Sam
Edit:
I found one in one second lol
here ya go htere probbaly a thousand more probably a lot easier coded; http://code.activestate.com/recipes/576 ... ix-effect/

[anandrkris]

Sam - Yeah, its been years (ages in digital world) and the Matrix movie is definitely not the in-thing but your theme colors reminded me.
Thanks for the link, will dig up leisurely. I will wait for some MDM themes to emerge and will see if i can come up with anything that works.

[clem]

Hi,

- The language, quit confirmation etc.. can't be changed at the moment. Mdmwebkit uses the same GTK dialogs as the other greeters for these at the moment and doesn't let the theme handle them. We'll add support for these.
- Be aware that there is a bug in MDM 1.1.3 which causes the desktop to freeze. So if your desktop is freezing don't panic... I wouldn't say it's "normal", but we're aware of it, it's a problem which was introduced by https://github.com/linuxmint/mdm/commit ... e865c0c152 and we're currently working on fixing it.

[Brahim Salem]

by samriggs on Thu Mar 07, 2013 1:29 am

Brahim wrote:When will this theme be backported to LM 14



It won't, (unless Clem adds the new mdm to it) without the new mdm you cannot have any animations, this is strickly for the new mdm.
It only takes a couple of minutes to install the new mdm into lm14 if you want to, I'm using lm14 and just installed the new mdm to get it to work.

I will give it a shot But this theme needs a better splash screen as an intro . Actually I have made a theme that might go with this mdm theme and published at http://kde-look.org/content/show.php?content=157316 Thanks for this artwork

[samriggs]

Thanks for letting me know Clem, and about the freezing part, that did happen once I thought it was something I did lol.

Brahim that theme looks good with animation added it'll be great.
Sam