New MDM theme: Shid

Style your desktop
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Locked
shideneyu

New MDM theme: Shid

Post by shideneyu »

Hi ! I made my first MDM theme, and I've ended making something that is the best anime GDM/MDM theme ever :mrgreen: :mrgreen: I'm not very modest I recognize :lol: But I do really love my work.

I'm so happy that I wanted to share it with you. I spent many hours in order to make it perfect. Enjoy :D

Image

I will have only one question, how to send it to the official Linux Mint's team in order to make it a part of the next realeases available themes to be chosen by the user (now, there are around 15 themes that are availables on /usr/share/mdm/themes) :) ?

If you have any request concerning the theme, let me know ;)

Others infos are available on gnome-look : http://gnome-look.org/content/show.php/ ... ent=156429

Click here to download the theme.
Last edited by LockBot on Wed Dec 28, 2022 7:16 am, edited 3 times in total.
Reason: Topic automatically closed 6 months after creation. New replies are no longer allowed.
viking777

Re: New MDM theme: Shid

Post by viking777 »

I must say that anime is not my thing, come to think of it I don't even bother with themes, but even I can see that is good work.

Well done :D
shideneyu

Re: New MDM theme: Shid

Post by shideneyu »

Thanks you :)
ljonesj
Level 1
Level 1
Posts: 18
Joined: Tue Jun 26, 2012 10:22 am

Re: New MDM theme: Shid

Post by ljonesj »

i know this is sort of old since its late february but this is a great theme. question can i change the wallpaper for the theme and put another anime character in its place
ljonesj
Level 1
Level 1
Posts: 18
Joined: Tue Jun 26, 2012 10:22 am

Re: New MDM theme: Shid

Post by ljonesj »

i have made a theme based off shideneyu theme i have gave him credit on gnome look here is a link to my theme

ok can a mod do the right trimming for this i have no clue what i am doing and this coming from my computer not the internet


http://gnome-look.org/content/show.php?content=157184

MIne is on Hinata from naruto

and to note on both our themes the login for mdm has a theme manager you do not have to place this in the right folder you just have to install it from mdm at local tab the second tab
screen.jpg
Last edited by ljonesj on Mon Feb 25, 2013 2:36 pm, edited 9 times in total.
GeneC

Re: New MDM theme: Shid

Post by GeneC »

ljonesj wrote:.....
ok can a mod do the right trimming for this i have no clue what i am doing...
Hi lj.. :)

Just edit your post and change the

Code: Select all

[img][/img]
tags to

Code: Select all

[rimg][/rimg]
That will post a nice sized clickable thumbnail... :wink:
Jessey Lawson
Level 3
Level 3
Posts: 105
Joined: Sat Oct 06, 2012 10:42 pm

Re: New MDM theme: Shid

Post by Jessey Lawson »

i love your Anime theme.It is the only one availale on gnome look as the others were on megaupload and no longer exist. I might use the template to create some other MDM's. Keep up the good work as you got some good talent.
samriggs

Re: New MDM theme: Shid

Post by samriggs »

Just noticed this when it came to the front of the main board.
Excellent work.
Maybe you can change it to add some anime animations as well for the html mdm section, would be an excellent one to add since no one has made one with anime yet.
you can check out the thread for the html5 mdm here : http://forums.linuxmint.com/viewtopic.php?f=25&t=126979
I know there's a lot of anime lovers out there that would love this one as a html mdm theme, even if it didn't animate.
Sam
Jessey Lawson
Level 3
Level 3
Posts: 105
Joined: Sat Oct 06, 2012 10:42 pm

Re: New MDM theme: Shid

Post by Jessey Lawson »

I used your MDM to create two of my own for Gnome-look.
samriggs

Re: New MDM theme: Shid

Post by samriggs »

Jessey Lawson wrote:I used your MDM to create two of my own for Gnome-look.
Do you have a link to them?
samriggs

Re: New MDM theme: Shid

Post by samriggs »

Thank you, very nice work :D
You should try some html mdm that animates or not animate, I'm sure a lot of folks would love to see some anime on a html mdm.
Jessey Lawson
Level 3
Level 3
Posts: 105
Joined: Sat Oct 06, 2012 10:42 pm

Re: New MDM theme: Shid

Post by Jessey Lawson »

samriggs wrote:Thank you, very nice work :D
You should try some html mdm that animates or not animate, I'm sure a lot of folks would love to see some anime on a html mdm.
I Only know HTML 4 and I have not used that in over 2 years. XD I have no idea how HTML 5 Backgrounds work. If I do one though it would be of the breadfish http://www.breadfish.co.uk/
Imagion loging into you desktop with that in an endless loop. XD
Jessey Lawson
Level 3
Level 3
Posts: 105
Joined: Sat Oct 06, 2012 10:42 pm

Re: New MDM theme: Shid

Post by Jessey Lawson »

Code: Select all

<!DOCTYPE html>
<html>
<head>	

		<style type="text/css">

			body {
				background-color: #326696;
				margin: 0px;
				overflow: hidden;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;
				text-align:center;
			}

			a {
				color:#0078ff;
			}

		</style>

	<script src="js/bootstrap.min.js"></script>	
	<script src="js/jquery-1.9.1.min.js"></script>	
	
	<!-- bootbox code -->
	<script src="js/bootbox.min.js"></script>

	<script src="js/mousetrap.min.js"></script>

	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">	
	<link href="theme.css" rel="stylesheet" media="screen">					

</head>
<body>	 	 	
		<script type="text/javascript" src="js/three.min.js"></script>
		

		<script>	
			
		var selected_row = -1;
	
		// Called by MDM to disable user input
		function mdm_disable() {
			document.getElementById("entry").value = "disabled";
			document.getElementById("entry").disabled = "disabled";
			document.getElementById("ok_button").disabled = "disabled";
		}
		
		// Called by MDM to enable user input
		function mdm_enable() {
			document.getElementById("entry").value = "";
			document.getElementById("entry").disabled = false;
			document.getElementById("ok_button").disabled = false;
		}
		
		// Called by MDM to set the welcome message
		function set_welcome_message(message) {			
			document.getElementById("welcome_message").innerHTML = message;
		}
		
		// Called by MDM to update the clock
		function set_clock(message) {			
			document.getElementById("clock").innerHTML = message;
		}
		
		// Called by MDM to allow the user to input a username		
		function mdm_prompt(message) {	
			mdm_enable();		
			document.getElementById("label").innerHTML = message;
			document.getElementById("entry").value = "";
			document.getElementById("entry").type = "text";
			document.getElementById("entry").focus();
		}
		
		// Called by MDM to allow the user to input a password
		function mdm_noecho(message) {	
			mdm_enable();		
			document.getElementById("label").innerHTML = message;
			document.getElementById("entry").value = "";
			document.getElementById("entry").type = "password";
			document.getElementById("entry").focus();
		}
		
		// Called by MDM to show a message (usually "Please enter your username")
		function mdm_msg(message) {			
			document.getElementById("message").innerHTML = message;			
		}
		
		// Called by MDM to show a timed login countdown
		function mdm_timed(message) {
			if (message != "") {
				document.getElementById("timed").style.display = 'block';
			}
			else {
				document.getElementById("timed").style.display = 'none';
			}			
			document.getElementById("timed").innerHTML = message;			
		}
		
		// Called by MDM to show an error		
		function mdm_error(message) {						
			if (message != "") {
				document.getElementById("error").style.display = 'block';
			}
			else {
				document.getElementById("error").style.display = 'none';
			}
			document.getElementById("error").innerHTML = message;
		}	
						
		// Send user input to MDM
		function send_login() {
			// read the value before we disable the field, as it will be changed to "disabled"
			var value = document.getElementById("entry").value;
			mdm_disable(); 
			alert("LOGIN###" + value);
			return false;
		}
		
		function init() {
			document.getElementById("error").style.display = 'none';			
			document.getElementById("timed").style.display = 'none';			
			document.getElementById("current_session_picture").width = 16;				
		}
		
		// Called by MDM to add a user to the list of users
		function mdm_add_user(username, gecos, status) {
											
			var link1 = document.createElement('a');	
				link1.setAttribute('href', "javascript:alert('USER###"+username+"')");

			var link2 = document.createElement('a');	
				link2.setAttribute('href', "javascript:alert('USER###"+username+"')");
				
			var picture = document.createElement('img');
				picture.setAttribute('class', "user-picture");
				picture.setAttribute('src', "file:///home/"+username+"/.face");
				picture.setAttribute('onerror', "this.src='file:///usr/share/pixmaps/nobody.png';");
				
			var realname_div = document.createElement('div');
				realname_div.setAttribute('class', "usergecos");
				realname_div.innerHTML = gecos;
				
			var username_div = document.createElement('div');
				username_div.setAttribute('class', "username");
				username_div.innerHTML = username;

			if (status != "") {
				var userstatus_div = document.createElement('div');
				userstatus_div.setAttribute('class', "userstatus");
				userstatus_div.innerHTML = status;
			}
																																			
			link1.appendChild(picture);														
			
			if (gecos != "") {
				link2.appendChild(realname_div);	
			}
			else {
				link2.appendChild(username_div);	
			}
						
			if (status != "") {
				link2.appendChild(userstatus_div);	
			}
						
			var table = document.getElementById("users");
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
          	row.username = username;          	
 
            var cell1 = row.insertCell(0);           
            cell1.width = "50px";
            cell1.appendChild(link1);                   			

            var cell2 = row.insertCell(1);           
            cell2.appendChild(link2);                   
		}	
		
		// Called by MDM to add a session to the list of sessions
		function mdm_add_session(session_name, session_file) {
			
			session_name = session_name.replace("Ubuntu", "Unity");
			
			var filename = session_name.toLowerCase();
			filename = filename.replace(/ /g, "-");
			filename = filename.replace(/\(/g, "");
			filename = filename.replace(/\)/g, "");
													
			var link1 = document.createElement('a');	
				link1.setAttribute('href', "javascript:alert('SESSION###"+session_name+"###"+session_file+"');select_session('"+session_name+"','"+session_file+"');");

			var link2 = document.createElement('a');	
				link2.setAttribute('href', "javascript:alert('SESSION###"+session_name+"###"+session_file+"');select_session('"+session_name+"','"+session_file+"');");
				
			var picture = document.createElement('img');
				picture.setAttribute('class', "session-picture");
				picture.setAttribute('src', "../common/img/sessions/"+filename+".svg");
				picture.setAttribute('onerror', "this.src='../common/img/sessions/default.svg';");
							
			var name_div = document.createTextNode(session_name);				
																																			
			link1.appendChild(picture);
			link2.appendChild(name_div);
				
			var table = document.getElementById("sessions");
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var cell1 = row.insertCell(0); 
            cell1.width = "28px";          
            cell1.appendChild(link1);
          
            var cell2 = row.insertCell(1);           
            cell2.appendChild(link2);
		}	

		function select_session(session_name, session_file) {
			var filename = session_name.toLowerCase();
			filename = filename.replace(/ /g, "-");
			filename = filename.replace(/\(/g, "");
			filename = filename.replace(/\)/g, "");
			document.getElementById("current_session_picture").src = "../common/img/sessions/"+filename+".svg";
			document.getElementById("current_session_picture").title = session_name;
			document.getElementById("current_session_picture").width = 16;
			$('#sessionSelection').modal('hide');
		}

		// Called by MDM to add a language to the list of languages
		function mdm_add_language(language_name, language_code) {

			var filename = language_code.toLowerCase();
			filename = filename.replace(".utf-8", "");
			bits = filename.split("_");
			if (bits.length == 2) {
				filename = bits[1];																	
			}			
				
			var link1 = document.createElement('a');	
				link1.setAttribute('href', "javascript:alert('LANGUAGE###"+language_code+"')");

			var link2 = document.createElement('a');	
				link2.setAttribute('href', "javascript:alert('LANGUAGE###"+language_code+"')");

			var picture = document.createElement('img');
				picture.setAttribute('class', "language-picture");
				picture.setAttribute('src', "../common/img/languages/"+filename+".png");
				picture.setAttribute('onerror', "this.src='../common/img/languages/generic.png';");
				picture.setAttribute('title', language_name);				
											
			var name_div = document.createTextNode(language_name);				
																																			
			link1.appendChild(picture);		
			link2.appendChild(name_div);							

			var table = document.getElementById("languages");
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount); 
            
            var cell1 = row.insertCell(0);  
            cell1.width = "25px";         
            cell1.appendChild(link1);
            
            var cell2 = row.insertCell(1);           
            cell2.appendChild(link2);

		}	

		function mdm_set_current_language(language_name, language_code)	{
			var filename = language_code.toLowerCase();
			filename = filename.replace(".utf-8", "");
			bits = filename.split("_");
			if (bits.length == 2) {
				filename = bits[1];																	
			}
			document.getElementById("current_language_flag").src = "../common/img/languages/"+filename+".png";			
			document.getElementById("current_language_flag").title = language_name;
			document.getElementById("current_language_flag").width = 16;
		}
		
		// Called by MDM if the SHUTDOWN command shouldn't appear in the greeter
		function mdm_hide_shutdown() {
			document.getElementById("shutdown").style.display = 'none';
		}	
		
		// Called by MDM if the SUSPEND command shouldn't appear in the greeter
		function mdm_hide_suspend() {
			document.getElementById("suspend").style.display = 'none';
		}
		
		// Called by MDM if the RESTART command shouldn't appear in the greeter
		function mdm_hide_restart() {
			document.getElementById("restart").style.display = 'none';
		}
		
		// Called by MDM if the QUIT command shouldn't appear in the greeter
		function mdm_hide_quit() {
			document.getElementById("quit").style.display = 'none';
		}
		
		// Called by MDM if the XDMCP command shouldn't appear in the greeter
		function mdm_hide_xdmcp() {
			document.getElementById("xdmcp").style.display = 'none';
		}			
		
		function select_user(index) {					
			var table = document.getElementById("users");
			var rowCount = table.rows.length;
			var row_to_select = index % rowCount;
			if (row_to_select < 0) {
				row_to_select = rowCount - 1;
			}

			for (var i = 0, row; row = table.rows[i]; i++) {				
				row.style.backgroundColor = 'rgba(80,80,80,0.0)';
			}

			var row = table.rows[row_to_select];
			row.style.backgroundColor = 'rgba(80,80,80,0.5)';     

			selected_row = row_to_select;   

			alert('USER###'+row.username);
		}		

		function quit_dialog() {			
			bootbox.dialog("$areyousuretoquit", 
			[
				{
					"label" : "<i class='icon-off'></i> $shutdown",
					"class" : "btn btn-small",
					"callback": function() {
						alert('FORCE-SHUTDOWN###');
					}
				},

				{
					"label" : "<i class='icon-download-alt'></i> $suspend",
					"class" : "btn btn-small",
					"callback": function() {
						alert('FORCE-SUSPEND###');
					}
				},

				{
					"label" : "<i class='icon-refresh'></i> $restart",
					"class" : "btn btn-small",
					"callback": function() {
						alert('FORCE-RESTART###');
					}
				},

				/*{
					"label" : "<i class='icon-ban-circle'></i> $quit",
					"class" : "btn btn-small",
					"callback": function() {
						alert('QUIT###');
					}
				}, 

				{
					"label" : "<i class='icon-share-alt'></i> $remoteloginviaxdmcp",
					"class" : "btn btn-small",
					"callback": function() {
						alert('XDMCP###');
					}
				},*/ 

				{
					"label" : "Cancel",
					"class" : "btn-small"
				}
			]);
		}

		
	
	</script>

	 <!-- Language selector -->
    <div id="languageSelection" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    		<h3 id="myModalLabel">$selectlanguage</h3>
    	</div>
    	<div class="modal-body">
    		<table class="table-striped table-bordered table-hover table-condensed" id="languages"></table>
    	</div>
    	<div class="modal-footer">
    		<button class="btn" data-dismiss="modal" aria-hidden="true">$close</button>    		
    	</div>
    </div>

    <!-- Session selector -->
    <div id="sessionSelection" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    		<h3 id="myModalLabel">$selectsession</h3>
    	</div>
    	<div class="modal-body">
    		<table class="table-striped table-bordered table-hover table-condensed" id="sessions"></table>
    	</div>
    	<div class="modal-footer">
    		<button class="btn" data-dismiss="modal" aria-hidden="true">$close</button>    		
    	</div>
    </div>
    
	<div class="box">

		<div id="welcome_message"></div> 
		<div id="clock"></div>

		<div id="logo">
			<img src="img/logo.png"/><br/><br/>
			<p><b>Linux Mint 15 "Olivia"</b></p>
		</div>

		<div id="error" class="alert alert-error"></div>
		<div id="timed" class="alert alert-info"></div>		
								
		<div id="table-wrapper">
  			<div id="table-scroll">
    			<table class="table-condensed" id="users">       
    			</table>
  			</div>
		</div>
		

		<div id="buttons">
			<a href="#languageSelection" role="button" class="btn btn-small" id="language_button" data-toggle="modal" title="$selectlanguage"><img src="../common/img/languages/generic.png" height="16" id="current_language_flag"/></a>

			<a href="#sessionSelection" role="button" class="btn btn-small" id="session_button" data-toggle="modal" title="$selectsession"><img src="../common/img/sessions/default.svg" height="16" id="current_session_picture"/></a>

			<a class="btn btn-small" href="#" onClick="quit_dialog();" title="$quit" id="quit_button"><i class="icon-off"></i></a>			

		</div>																						
		
		<div id="message"></div>
		
		
		<div id="form">
			<img src="img/text.png" width="300" height="350" id="text_img"/>
			<form class="form-inline" onSubmit="return send_login();">
				<fieldset>			
					<label id="label"></label>
					<input type="text" class="input-medium mousetrap" id="entry">
					<button type="submit" class="btn-small btn-inverse" id="ok_button">$ok_label</button>
				</fieldset>
			</form>
		</div>

	</div>		
	
</body>
</html>

<script src="js/bootstrap.min.js"></script>

<script>
	init();

	Mousetrap.bind('up', function() {		
    	select_user(selected_row - 1);
	});

	Mousetrap.bind('down', function() {
    	select_user(selected_row + 1);
	});

	Mousetrap.bind('ctrl+l', function() {
    	$('#languageSelection').modal('show');
	});

	Mousetrap.bind('ctrl+s', function() {
    	$('#sessionSelection').modal('show');
	});

	Mousetrap.bind('esc', function() {
    	quit_dialog();
	});

	Mousetrap.bind('tab', function() {
    	document.getElementById("entry").focus();
	});
</script>



Man this code is messy. I have no clue where ot being in the index.html
Last edited by Anonymous on Sat Jun 29, 2013 8:45 pm, edited 1 time in total.
Reason: please use code tags
samriggs

Re: New MDM theme: Shid

Post by samriggs »

:lol: can't believe you pasted the whole file in here, that's Clem's clouds and it's actually very nice.
anything in script tags is java script which in this one has all the javascript pretty much in one big gulp, some like it that way some like separated more, all depends on your preference, plus this one uses webgl and triple js.
If you want a more basic one to work from grab the one labeled mdm in the html-mdm themes section instead.
It has a basic core to start from.
In the html5 mdm thread there are tons of links to learn this stuff. You can get it all here: http://forums.linuxmint.com/viewtopic.php?f=25&t=126979
I also added some js code snippets here: http://forums.linuxmint.com/viewtopic.php?f=25&t=128396
you'll namely have to get used to css and html to do some basic stuff and if animations they can be done in css also you can learn all about it here: http://www.w3schools.com/css3/css3_animations.asp
it doesn't take long to get the hang of it.
Jessey Lawson
Level 3
Level 3
Posts: 105
Joined: Sat Oct 06, 2012 10:42 pm

Re: New MDM theme: Shid

Post by Jessey Lawson »

Ill pass. I made a few more though.
ljonesj
Level 1
Level 1
Posts: 18
Joined: Tue Jun 26, 2012 10:22 am

Re: New MDM theme: Shid

Post by ljonesj »

Jessey Lawson wrote:http://gnome-look.org/content/show.php/Cheerleader+Cutie+Pies?content=158903 Anime Cheerleaders
http://gnome-look.org/content/show.php/Firefoxshid?content=158894 Firefox
http://gnome-look.org/content/show.php/Hot+Anime+Cheerleader?content=158902 It is LGPL as I don't own the image.
http://gnome-look.org/content/show.php/React+OS+Backgrounds?content=158896 One for us who love ROS
the first link is this aria the scarlet ammno as the pink haired girl and the dark haired girl with the ribbon reminds me of them
Locked

Return to “Themes, Icons & Wallpaper”