MDM HTML5 Themes

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

Re: MDM HTML5 Themes

Post by hb1547 »

anandrkris wrote:
hb1547 wrote:I made another login theme today -- this one's a Matrix-style login one:
Wanted to share something funny that happened on applying Matrix theme. I set it as the login theme in my laptop and left for work. My dad uses same laptop (dual-boot wit Win 7, he is comfortable with Windows but does not mind using Linux sometimes and am slowly acquainting him). So he selects Mint in GRUB and then pops the matrix login, seeing that he was scared that something went wrong with system since it was displaying all black and green screen with gibberish text. He packed the laptop and was about to take it to service centre to get it rectified but thankfully Mom prompted him to check with me before doing that. Then over phone I asked him to look for blinking username and password in middle to enter credentials. He did login but was puzzled why I would want a theme like that! He is old school and dont think he ever saw the Matrix movie. :)
Haha good story!

I had to let someone use my computer recently, and realized that if they booted into Mint (I also dual-boot), they'd see a confusing Matrix-style login page and be clueless about what the hell to do.
saruman13

Re: MDM HTML5 Themes

Post by saruman13 »

[url=http://www.imagebam.com/image/071a6e261761580][img]http://thumbnails105.imagebam.com/26177/071a6e261761580.jpg[/img][/url] [url=http://www.imagebam.com/image/9ea3cf261777572][img]http://thumbnails103.imagebam.com/26178/9ea3cf261777572.jpg[/img][/url]

eleMINTary by cdustybk with Mint Blue wallpaper
killer de bug

Re: MDM HTML5 Themes

Post by killer de bug »

Ahhh nice !

Is it the modified one ? (http://forums.linuxmint.com/viewtopic.php?f=25&t=126979&start=220#p728526)

Or is it the normal theme plus the wallpaper ?
saruman13

Re: MDM HTML5 Themes

Post by saruman13 »

It the normal theme, i just change the picture/wallpaper.
User avatar
manyroads
Level 5
Level 5
Posts: 578
Joined: Wed Mar 30, 2011 11:14 am
Location: just around the corner
Contact:

MDM HTML5 Themes editor problem.

Post by manyroads »

I think I committed a stupid user problem. A little help, please.

I was making some edits in MDM Login Screen editor from within the Control Panel in Mint 15 (Cinnamon) and managed to loose any/all evidence of the user icon on my Login screen (.face simply disappeared as did its 'container'). Is there a place/ way to reset the MDM settings to the original default or will I simoly have tolive with the errors of my ways?default
Pax vobiscum,
...mark
SwayWM, i3wm, bspwm, hlwm, dwm
Professional Genealogist & Technologist
(http://eirenicon.org & http://many-roads.com)
hb1547

Re: MDM HTML5 Themes

Post by hb1547 »

Finished up another one today. This one is called ASCII:
ascii_screen_full.png
Download it here: [url]http://xatal.com/ascii.tar.gz[/url] (v1.0)

What It's Like: Converts each user's account picture to ASCII art, and puts all user names on a line. Changing the active user loads the next user's ASCII art and allows input of password.

Notes:
- As always, no guarantees! If you have problems I'm happy to help fix any bugs.
- Most photos don't look great when converted to ASCII, so animated account pictures will look better here. Hopefully in the future I'll find/make a better conversion method.
- If you have enough users and/or a low resolution, the list of users might extend into a second row. This will probably look bad.
- Left/right arrow keys cycle through users, but only if you're not typing in the password box.
- If you edit 'index.html' in the folder, you can set the default user by changing the line "var firstUser = 'Paul';". The text in quotes should be the displayed username (eg, "Paul"), not the actual username (eg, "paul"). If this is unset, it'll just pick the first user.
User avatar
clem
Level 12
Level 12
Posts: 4303
Joined: Wed Nov 15, 2006 8:34 am
Contact:

Re: MDM HTML5 Themes

Post by clem »

Hi everyone,

The next MDM will bring user pre-selection. In other words, the last user who was logged in, will be automatically selected by MDM and the user will only have to input his password.

When MDM selects the user, it will tell your theme by calling the following new function:

mdm_set_current_user(username)

You need to add that function to your HTML theme and basically highlight the selected user.

The link below shows how this was done in the Cloud theme:

https://github.com/linuxmint/mint-mdm-t ... 4048fdfd7b

As you can see, in mdm_add_user(), for each user, I put the username in the row object (in row.username). At the bottom I use mousetrap to call my own select_user_at_index() (to browse through the table of users), and in mdm_add_user() I also make it so clicking on a user calls alert('USER###'+username); ... wherever you call alert('USER', username) that will tell MDM who the user you want to select is, and MDM will come back to you by calling mdm_set_current_user(username)... so you only need to worry about highlighting the user graphically in mdm_set_current_user().

One last detail, mdm_prompt is called when the user presses escape or the login screen is reset. In there, I reset my selected_row to -1... so next time I press up or down, it doesn't start from where I previously was.

Support for this is in MDM 1.3.2 available in git. Let me know if you need debs for it.
Image
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Thanks Clem
I'll get to it as soon as I can for all of them, I had to reinstall LMDE, after the UP7 (I guess all the stuff I added gave it issues so it's a fresh one now and works after some -f install and dist-upgrade, just have to shove everything back in again :)
and since I have a fresh install, it needs a spanking new mdm theme to go with it, one I started but never got done yet, plus cinnamon/gtk/metacity theme.
But I will add all that to the ones I have done.
I'll post it here once done.
Sam
Maybe if I can grab some extra time, I'll make some clean simple mdm ones also for those who want some of those with the options for them to choose their own colors for some things to fit their own themes, (something I had in mind before for clean simple ones).
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

clem wrote: Support for this is in MDM 1.3.2 available in git. Let me know if you need debs for it.
Wouldn't mind a deb for lmde if you got one kicking around for the mdm so I can test things.
Also since the reinstall and upgrade I can't seem to get the users list to show up in the login screen, this happened once before to me and I fixed it, I tried all the old methods that worked before but no go on the list showing up anymore.
Not sure what to do now to get the users list to show up in lmde
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

My concept MDM theme! Can anyone make it real :D

[url=http://postimg.org/image/3l3p0zddx/][img]http://s10.postimg.org/3l3p0zddx/Cinema21x9_lifestyle_4.jpg[/img][/url]

What about this too :D :D

[url=http://postimg.org/image/rr77zqmf5/][img]http://s16.postimg.org/rr77zqmf5/MDM.jpg[/img][/url]per:

well thanks this is the wallpaper bro :

[url=http://postimg.org/image/nhouqt3lx/][img]http://s18.postimg.org/nhouqt3lx/Cinema21x9_lifestyle_4.jpg[/img][/url]
Last edited by Brahim Salem on Fri Oct 04, 2013 2:12 am, edited 1 time in total.
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Nice ideas Brahim
Give it a go, start learning this stuff, I keep pushing you towards it because you got a lot of great designs and ideas floating around in that head of yours, :lol:
Get er done! it won't take ya long to learn how to code in html, css and some basic javascript, (which you probably won't need much of)
I personally don't have time right now, I am making one for my new install but that's personally for me, (which I'll also share once done.
Don't know about the other folks making these, (right now I have about ten games on the go at the same time so my time is taken up for the next six months or so along with a full time job)
The html is simple to learn (think of it like a book and use tags
(the book all off it from front to back)

Code: Select all

<html></html>
then the begining of the book goes inside the html tag, where the book title is and the contents etc go inside the head tag like so

Code: Select all

<html><head></head></html>
if you want a title (for the mdm themes we don't use but I'll add it to show you

Code: Select all

<html><head><title></title></head></html>
the content section of a book or index is like the links to the css files or javascript files we use that go inside the head like so

Code: Select all

<html>
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">	
<link href="theme.css" rel="stylesheet" media="screen">		
 <link href="gears.css" rel="stylesheet" media="screen">			
<script src="js/bootstrap.min.js"></script>
<script src="js/mousetrap.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>	
<script>	
</head>
</html>
These links allow the whats in the body or other parts to communicate with these scripts.
Then at last the body, this is like the body of the book, the story part you read and the layout of it.

Code: Select all

<html>
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">	
<link href="theme.css" rel="stylesheet" media="screen">		
 <link href="gears.css" rel="stylesheet" media="screen">			
<script src="js/bootstrap.min.js"></script>
<script src="js/mousetrap.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>	
<script>	
</head>
<body></body>
</html>
all the pages stuff and layouts of the page goes in the body part, you set up the measurements, colors, images, positions, animations mostly in css files for the pages to be displayed but the final link goes into the html body part usually under class of div tags.
This is an extreme short tutorial but I found when I showed folks in the past to think of html as a book it helped them to understand it easier for some reason, so hopefully it'll help ya out.
css is where the display parts are mostly done now.
Here's a link to teach you all this stuff.
http://www.w3schools.com/css3/css3_animations.asp
they have all the css, html, javascript tutorials you'll need to get ya going and make some mdm themes.
Hope it helps ya out.
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

Thanks Sam for the thorough explanation :D I'm learning this stuff now :D Expect something big bro :D
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Since it seems a lot of folks with art skills but lack the coding skills to make a mdm theme here might be some suggestions that seemed to work well for making cinnamon, gtk/metacity themes.
Take a mdm already made by someone else, choose the layout that resembles the layout you got in mind for your design and just change the name of it and change the artwork (keeping the size the same, ** this is important**) to your artwork.
No coding invloved, the only thing your doing is changing the artwork itself to your design.
The more layouts that get created by developers in the future the more choices for a layout you'll have to use as a base for art creations, again no coding involved for this method.
Why miss out showing and sharing your creations because you never learnt how to develop in web design.

Here's how to do it.
Grab a theme already made by someone else.
I'll use one of mine as an example. BlimpCity
Grab the BlimpCity folder from /usr/share/mdm/html-themes/
copy paste it to where you want to work on it.
1: Change the folder name from BlimpCity to a name you want to call your creation
2: open the folder and open the theme.info file
it looks like this inside:

Code: Select all

[Theme]
Encoding=UTF-8
Name=BlimpCity
Description=A boostrap HTML theme
Screenshot=screen.jpg
change the name to the same name you renamed the folder, add a description, what the theme is about (keep it very short or it won't all show up in the login preferences) and save it. (leave screenshot alone)

next start making your own artwork creations.
The bg.jpg is the background, if not all artwork is found in the main folder look in the img folder for the rest to change to make your own.
Keep the image extensions the same (example: jpg or png), because they are typed this way in the css files, changing that will not show your image)
If it's an animation sprite sheet make sure you keep the same distance between each image (to figure this out just take the width of the image and divide it by how many images there are, this will give you the width of each image).
Make sure all images are the same size as the original or it will not show all the of the image or leave spaces as the sizes of the images are also coded in the css.

To test your newly created theme:
Open a terminal and type “mdm-theme-emulator”
Click “open” and select your index.html file
Click “Add dummies” to add random users and sessions to your theme

Take a screenshot of it (from the emulator) resize the screenshot to the same size as the screenshot in the main folder and replace that original with your own.

To install your theme zip it up as tar.gz extension, open up the login preferences screen and drag the tar.bz file into the html section and it will install it for you.

Then once done upload it so others can share your creation. :D


Another method we used to use in the old days is get artist and developers together.
If your a developer that is not an artist offer your skills to the artist who cannot develop but want to make some themes and team up together to make some awesome work together.

Sam
passerby

Re: MDM HTML5 Themes

Post by passerby »

Brahim wrote:My concept MDM theme! Can anyone make it real :D

[url=http://postimg.org/image/3l3p0zddx/][img]http://s10.postimg.org/3l3p0zddx/Cinema21x9_lifestyle_4.jpg[/img][/url]
If you can send me the individual images you used in that concept art, I could give it a go.
I'm one of those aforementioned coders who can't draw to save his life :lol:
I've never made an mdm theme before though, so I can't make any promises.
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Whoohoo I see the makings of a mdm team forming :D
slowly but forming yet the same.
Thanks passerby glad to have ya aboard :)
Brahim send him the artwork :)
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

Check my new plymouth theme I called it "freshmint"

Get them at [url]http://kde-look.org/content/show.php?content=160977[/url]

[url=http://postimg.org/image/jz53csa59/][img]http://s14.postimg.org/jz53csa59/background.jpg[/img][/url]

grub background:

[url=http://postimg.org/image/fs931wvzr/][img]http://s15.postimg.org/fs931wvzr/backgroundffff.jpg[/img][/url]
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Wrong thread to show that at Brahim, this ia about html5 mdm themes, but Passerby (in threads above) is willing to take your designs and make some mdm themes out of them, I think he's waiting for some art from you.
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

passerby wrote:
Brahim wrote:My concept MDM theme! Can anyone make it real :D

[url=http://postimg.org/image/3l3p0zddx/][img]http://s10.postimg.org/3l3p0zddx/Cinema21x9_lifestyle_4.jpg[/img][/url]
If you can send me the individual images you used in that concept art, I could give it a go.
I'm one of those aforementioned coders who can't draw to save his life :lol:
I've never made an mdm theme before though, so I can't make any promises.

I'm glad you're doing this theme. here grab the wallpaper [url]http://www.artleo.com/pic/201106/1920x1080/artleo.com-4164.jpg[/url]
passerby

Re: MDM HTML5 Themes

Post by passerby »

Brahim wrote: I'm glad you're doing this theme. here grab the wallpaper [url]http://www.artleo.com/pic/201106/1920x1080/artleo.com-4164.jpg[/url]
Is the box and its frame in CSS, or did you draw it up? (doesn't matter, just want to match it best I can)
I'll start playing around when I get home from work.
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

actually i took it from anMDM theme can't remember it's name :lol: :lol: :lol: Thanks man add some magic to it man :D
Locked

Return to “Your Artwork”