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.
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Sounds good, can't wait to see some of your work :D
here is a nice layout if your into it. or use the idea for other things, the animation is in flash but it can be done in html5 as well.
http://preview.game-template.com/joomla ... ernvid.com
This person makes some really nice, detailed themes (mind you there for joomla) but the concept can be used for mdm as well.
the animation is just some particles floating around, lightning showing up on a timer (you can use random times or/and random lighting) the guild part can be done with css transition animation with alphas states in the rgb.
Things that can be added, rotating moving firery clouds, lava flowing, smoke rising up etc etc.
Right now I am trying to create a real looking fire, I seen a couple of (sorry to say it) no so realistic looking ones, one came close, I'll add it to the snippets section if I can figure it out.
Hope to see your stuff soon :D

EDIT:
thought I'd add a preview of the next one I'm calling circuitboard, those little dots and lines animate, you can't see them move in the image but they do.
screenshot.jpg
I figured out the canvas to work nicely with the rest of the stuff and added the code in the snippets thread. I am going to make the middle a cpu chip with lightning at both sides hopefully the code will work and it's not too much :lol: because what I got in mind will hopefully look good. I was going to write it all in code working with lines and blurs but I might just use a random image code instead if it looks good, the code is a ton shorter but the images hopefully won't be too heavy.
I was thinking of getting rid of the drop downs for the session and language and put them on a 3d carosol but it would be more of a hassle to navigate it then it's worth for the eye candy. I'm still in debate with myself of what to do with the buttons.
steveking

Re: MDM HTML5 Themes

Post by steveking »

I really like the look of this one!

To be perfectly honest my mind is rushing full of ideas of what I could do! The only downside is that currently no desktop to work with :( Luckily as of saturday this should be resolved and I can start throwing as much into it as I can imagine! WATCH THIS SPACE!

I have been waiting for something like this to happen in the Linux world for a long time! html5 offers customizations for people with only a basic level of computer knowledge which I think is a smart move and will definately make Linux Mint stand out even more to people wanting an alternative to the Communistic ways of ubuntu. (plus my favourite colour is green :D )

Steve
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Code: Select all

the Communistic ways of ubuntu
:lol:

Ya thats what drove me away from ubuntu, when unity came out, I tried the rc of it when it first came out and went "what the heck is this crap?" and never went back, if I wanted a tablet, I'd buy a tablet. I guess I shouldn't rant off topic here but that's what got me here in the first place, and I'm glad it happened because I like Mint, I tried a few others just to fool around and see what they were like but Mint it is for me, and now that cinnamon gave me back my desktop, it has become my favorite, I like xfce which I used while they were playing with cinnamon and getting it right, but cinnamon is it for me now. Next will be back to LMDE for me also if I can get all this working on it properly, I miss my LMDE days and no reinstalls.
I agree with you on the html5, that was one of the best ideas I seen to make creating and configuring screens so easy now, just like when gnome went for css and javascript also, gnome was better then unity but I like what the Mint team did with it and made cinnamon out it to give us back our desktops :D
I'm sure there are others that like the gnome 3 look and unity, I just like my desktop like the old way, plus developing stuff, I like to find things easy and make a mess on my desktop :lol:
I constantly change codes but I like to have the old one saved to the desktop so it easy to get to in case the new one is crap I just open the file and shove the old one back in.
End of rant :lol:
Sam
steveking

Re: MDM HTML5 Themes

Post by steveking »

haha :D

I unfortunately enjoy Gnome 3 :P I quite like the hidden menu idea as I added a few keyboard shortbuts for those all important things! But I do enjoy abit of cinnamon! I have been dabbling with different distros for longer than I care to admit! I am waiting for that all perfect one that sounds like more of an urban legend! I havent tried Mint 14 yet so there is still time :D

I have been following the progress of ubuntu for awhile and I am slowly getting put off, they seem to be wanted to distance themselves from the Linux userbase and become an entity unto themselves which I do not agree with! The whole reason I used ubuntu was because it was Linux and it had a fast paced update scheme and just worked. Moving away from that is not something I would be happy with (especially now they are working on their own version of the X-Server) things are heading downhill!

I have downloaded 2 of your MDM themes to have a dig into so I know what I can do, there is one thing I know I will do which all it will require is a little css magic and changing some images, the other idea of mine will require me to dig into it alot more.

I quite like the fancy javascript animations, infact one of my ideas relies on this. But i am looking to make my sleek and styling but not too flashy. I will more than likely concentrate on using hidden divs etc etc to make it look interesting.

I was contemplating using something akin to a lightbox for user log ins so the login screen looks alot cleaner but not sure if it will work??

I noticed on a few of your that you had an MDM emulator? Where did you get this because that would be extremely useful during any testing phases! I dont particuarly want to keep loggin in and out again!

Steve
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

To get the emulator afer you install the new mdm here: http://blog.linuxmint.com/?p=2327 then just open your terminal and put this in mdm-theme-emulator and it will open the emulator.
It's a handy toy to use and saves a lot of logging out and in again, you still have to log in and out to test (especially using canvas and 3d stuff) because some work in the emulator and some don't work in the login screen for some reason, still trying to wrap my head around that one and can only mark it down to mdm stuff, it is not a browser so there will be differences some where, but at least the log in and out testing is wiped out 90% by using the emulator.
I unfortunately enjoy Gnome 3 :P
no problem with gnome 3 a lot of folks like it a lot, I did in the beginning and made some themes for the first version of it, I just like messing up my desktop a lot, I'm a desktop slob :lol: so the old ways works better for me for what I need to it for. I am on mint 14 right now, it works nice the only complaint I have about it is the loading time at start up, it's about 2 times slower if not more then xfce, but once it's loaded it's nice and I am well pleased with what the team has done with it. I'm sure they'll get the speed up later on, all things usually move slow in the beginning, but it's at a point where I am happy with it and will stay with it.
Ya the ole x-server war :lol: I'm not touching that one with a ten foot pole :lol: I'll wait and see what happens with that and what will become of it all, I know the team will choose the best option so I'm not worried about it.
Sleek and stylish is good, I love sleek and clean themes, I just have a bad habit when creating stuff that I try to jam stuff all over the place, the ole "let's see how far I can go with this stuff until it dies" :lol: then I start knocking stuff out until it's doable, like the last theme I made, it only has less then half of what I intended to put in it, it just drove my cpu insane with all the animated grads and images over 4mb :lol:
Most folks like sleek and clean, I have to train myself to stop over doing stuff and keep things simple useable and clean.
On that note I want to make one that drops bombs on things that blow up :lol: :lol: :lol: Oh well so much for sleek and clean for me :lol:
It's fun making these things. Hopefully I'll see some of your work soon, sounds like you got some ideas floating around that will look great.
Sam
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Alrighty the next one is finished.
This one is a circuit board that animates, it has lightning shooting out the sides and little balls floating around that join with lines when they get close enough.
And it's in my favorite color Blue :D sorry but I got selfish there and strayed away from minty green.
Heres a small screenshot of it:
curcuit600.jpg
This one can be gotten here: http://samriggs.deviantart.com/art/Circ ... -361955758

I might take a small break from these and play around with some codes to see what else can be done and to catch up on some other things.
Sam
steveking

Re: MDM HTML5 Themes

Post by steveking »

Wow Sam that one looks awesome! I may have to have a look at that one too!

Tomorrow is the big move for me and I think setting up my desktop will start as soon as I am there! Who needs sofas and kitchen equiptment when you have a desk!!

I am looking forward to getting some work done on this hope to be able to post some up soon! All I need to do now is make a deviantart profile so I can upload it and let people download it :D

Will dig into your code again today with this new one and try and get a better understanding of it all. I am looking forward to getting some real work done with it instead of running loads of test projects :D

Steve
steveking

Re: MDM HTML5 Themes

Post by steveking »

Sam here is one I started playing with today! Unfortunately it is being made within a web browser for now but it will get there soon! Just got to add some funky stuff to it!

My only question would be what is the best way to have the users pop into it? I was going to stick them in a more "default" area on the left but not sure how to do it!!
screen.png
Steve
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

steveking wrote:Sam here is one I started playing with today! Unfortunately it is being made within a web browser for now but it will get there soon! Just got to add some funky stuff to it!

My only question would be what is the best way to have the users pop into it? I was going to stick them in a more "default" area on the left but not sure how to do it!!

Steve
Edit: wow I must of been tired I'm fixing all the speeling errors :lol:
Hey Steve, the computer was the first I opened up on my moving day also :lol:
The user stuff doesn't show up in the browser, it has to call the mdm stuff which will not work in the browser, only the emulator where you can add users in the dropdown but to fool around with the users stuff and move it around it's all in the theme.css, anything mdm related you will need the emulator, like the drop down menu as well.
These one take care of the users

Code: Select all

.user-picture {
	border-radius: 5px;
	border:2px rgba(80,80,80,0.5) solid;
	width: 64px;
	height: 64px;
        z-index:1;	
	-webkit-transition: all .6s ease-in-out;
}

.user-info {		
	margin-left: 50px;
	margin-top: 10px;
	text-shadow: 1px 1px 1px #000;	
	
}

.user-info:hover img{
				
}

.username {
	font-style: italic;	
}

.usergecos {
	font-weight:bold;
}

.userstatus {
	font-style: italic;
	font-size: 10px;	
}

.highlight-border img{
	-webkit-transition: all .6s ease-in-out;
}

.highlight-border:hover img{
	-webkit-transition: all .6s ease-in-out;
	border:2px #ffffff solid;
}

/*TILT*/
.tilt img{
  -webkit-transition: all 0.2s ease-in-out;     
}
 
.tilt:hover img{
  -webkit-transform: rotate(-3deg);         
}

a {color:#dedede;text-decoration:none;}      /* unvisited link */
a:hover {color:#ffffff;text-decoration:none;}  /* mouse over link */

Text is for the text color, tilt and anything with ease in it and rotate is for the image to rotate slowly, you can add any effect you want in there, .tilt img is when the image is normal, tilt:hover img is when mouse is over it, you add all that stuff to the rest if you want as well, move the image with mouse do pretty much any transforn or transition in the css library.
user-info is where you move them around the screen and place them where you want, notice under user-picture I added an z-index make sure if you got any canvas stuff going on or animations that go over the picture that they have a lower z-index or you won't be able to click on them and the image will wind up behind your animations, you can also use a negative z-index if you want to like z-index: -1;

also if you want it to go horizontal instead of vertical I change it to this

Code: Select all

.user-info {
        background: rgba(80,80,80,0.5);
        display:inline-block; 
        *display: inline;
	margin-left: 20px;
	margin-top: 40px;
        font-size:10px;	
	text-shadow: 1px 1px 1px #000;	
        border-radius:5px;
	border:2px #a5a5a5 solid;
        padding-top:2px;
        padding-bottom:5px;
        padding-right:10px;
        padding-left:10px;
        vertical-align: top;	
}
I added a box in there also and this is the box code in the theme.css

Code: Select all

.box1{
        top: 0%;
	left: 50%; 
        margin-left: -26%;
	margin-top: 10px;
        width: 50%;
	height: 50px;
        position: relative;
        vertical-align: middle;
}
so it all goes into a box which then I can place anywhere I want to on the screen
in the html I change <users> to this

Code: Select all

<div align="center" class="box1">
	<div id="users"></div></div>
or you can make it cleaner if you wish, I was in a bit of hurry to get TheMachine theme done, I'll clean it up more later on and maybe add some more things to it.
Boxes are good for shoving stuff in, make it easier to move them around, you will more then likely have to shove any canvas work into a box as well so it doesn't throw off your other layout stuff, plus give it a lower z-index then the rest if its in front of any buttons or anything folks need to click or enter stuff into.
The menu toolbar stuff is all in the bootstrap.css (make sure you change bootstrap.min.css to boostrap.css in the html so you can use the readable one and make your changes, the bootstrap.min.css is the same thing but it has no whitespace in it for loading speed.)
The main thing to remember is the box stuff and z-index stuff for canvas work.
Also if your getting into the css stuff I find geany works better then the gedit as an editor, for the small stuff I use gedit, but for stuff like bootstrap I use geany because it allows me to find stuff in the side menu a lot quicker instead of scrolling through all the code to find an element I use the side bar which only names the elements themself making it a heck of a lot quicker to find them.
Have fun with it.
So much for my break, I started on a clean one I want to use for myself, an alien looking tux all in black and blue, sort of carbonite theme, I'll be making a cinnamon and gtk/metacity for the next one as well since it's for my computer :lol:
Sam
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

How to install my themes:
Just in case you have any questions installing my themes this is the simpliest way to do it.
I had no choice but to use a zip compress format for devinatart (sorry but they wouldn't allow a tar.gz)
So just extract it and recompress the extracted folder as tar.gz instead, then open up the login window Menu->Administration->Login Window (or from a terminal with “sudo mdmsetup”) and from the Local tab use the drop down and choose html.
Then just drag the tar.gz into that window and it will install it for you.
If you want to do it the hard way then just copy the folder and it's contents into
/usr/share/mdm/html-themes/
Make sure you have the new mdm installed first according to the instructions given by Clem here: http://blog.linuxmint.com/?p=2327
If Mint makes space on the cinnamon theme site later on I'll put them up there instead with tar.gz file formats instead.
Mine are too big to put up on linux mint art to allow or I would put them there instead, so for now a zipped file format has to do as well as deviantart.
Hope this helps out anyone having any issues.
Sam
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Next one is finished
This one is called BlackNBlue
Here be the screenshot
screenshot1.jpg
You can get ya this one here: http://samriggs.deviantart.com/art/Blac ... 05740&qo=0
changelog:I added a digital clock and the date to this one, the digital clock is made of images, so feel free to make your own, there in the img/artwork/ folder but the size fits perfect in the box I got them in, so if you want to change the size you'll have to make the boz so it fits.
I know a lot of folks like the date on the login screen, I wasn't going to add it but decided to. The new version is at the same link.
Sam

EDIT: I uploaded Blimp City, Galaxy, SpaceRace, The Machine again if you want to get the updated version, The alerts were moving the login entry down too much if you typed in the wrong password so I moved it above the login in it's own box now so it does nothing to the entry box now.
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Having fun with dropdowns
I got bored of the same old menus and dropdowns and the next one I'm making calls for something different, so I thought I'd share the dropdown I'm playing with, I snagged this off the net here: http://www.antsmagazine.com/web-develop ... -and-css3/
Thye have 40 different dropdowns for you to play with :D they all come with source codes as well.
Here's what I'm playing with
fun.png
I just got the mesurements right and have to tweak it abit still then make one for languages maybe on the other side going in the opposite direction or above this one and reach out further so it goes on the outside of this one.
One thing to remember about cretaing a new dropdown, don't use any of the bootstrap elements, it'll confuse it, I made a totally separate css file and bring it into with link instead and just use it's elements instead.
The parts you will need is the info it brings in
(example) for the sessions drop down you'll need these parts or find another way to display them

Code: Select all

title="$selectsession"  and <img src="img/sessions/default.svg" title="$defaultsession" width=16 height=16 id="current_session_picture"/>  and  id="sessions"
this will bring in all the session info for you, the same goes for any other ones like languages.
Just thought I'd give you folks some more choices to play with.
This next one will sort of be a mix of mad max, terminator, grunge sort of feel to it with hopefully a mechanical tux that animates if I can figure it out.
That drop down will have metal looking backgrounds in it it won't be the ole normal black with grey shades in it, to many of those now, I want to try something different.
Have fun creating some craazy dropdowns.
I put the full code in the snippets sections if you want to use this, I also put it in the bootstrap instrap, it works better in there.
http://forums.linuxmint.com/viewtopic.p ... 92#p705292
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

something like this would be great :D :D
Image

but something like this would be a killer awsome :shock: :shock: :shock: :shock:

Image


This should be the default Mint 15 login theme :D

samriggs is the best artist a "Linux Da Vinci" :D :D :D :D


I was wondering if this HTML 5 can be applied to splash screens :roll: :roll: It would be post-modern and futuristic :shock: :shock: :shock:
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

I was wondering if this HTML 5 can be applied to splash screens :roll: :roll: It would be post-modern and futuristic :shock: :shock: :shock:
Nope pretty simple answer eh? :lol:
the reson being it's not html at all, usually the splash screen is plymouth not mdm and no html at all as far as I know, the html5 stuff is and just added to the mdm, plus it would probably slow down loading time having the splash screen animating as well, they got them some small dots doing some framing but that doesn't take up much time loading at all.
As far as the Linux Da Vinci goes :lol: thanks but I'm far from that, I like the work your doing, I've been checking it out and wish you would make a animated one for mdm, I'm sure it would be fantastic with your talent.
That blimp city one I did was a livewallpaper I did for droid, I should convert some more of those over to mdm, there quick and simple cause all the artwork is already done, but I keep getting more ideas so I just go with the ideas instead, this next one is a bit tricky cause I'm fooling around with all the buttons and dropdowns to see what else I can do with it, the only problem now is how to get a freaking image inside the css boostrap to be the background for all buttons and dropdowns, I tried many things but no go yet, tried ul, a, after, background, background-image and quite a few other tricks but nope it ain't gona happen by the looks of it. Guess I'll have to come up with some insane grads instead. Css added a bunch of new toys since I played with it last time for doing web stuff so it's fun learning this stuff. My goal is to make a animated ternimator tux all out of code :shock:
I checked this one out and it can be done (this sample is freaking great) (all code except the noise background image)
Check it out: http://lab.simurai.com/monster/ it uses cursor which might be disabled later on but I'm sure this can worked around, if you download the code it's all in css a little in javascript, but it's a great piece of work made out of code.
But you should try to make one, I'd love to see some of your work animating on a screen, your good.
Sam
anandrkris

Re: MDM HTML5 Themes

Post by anandrkris »

http://www.muktware.com/5296/linux-mint ... qus_thread - Muktware has coverage on new MDM work and have posted a comment there on your work. :)
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Cool glad folks are liking it, hopefully it'll lead more over to mint :D folks always like steampunk, doesn't really matter what ya do as long as it's steampunk.
I'm gona have to do up some more steampunk for everyone, plus its my favorite thing to make any how.
This next one will be a cross between mad max, terminator and steampunk with some grunge toss in for good measure :lol: hopefully it I can actually accomplish what I got in my skull floating around. I'm just waiting to see some other folks work, it's getting lonely out here :lol:
So if anyone needs any help let me know, I like to see some others do some, I'm no expert in css and javascript but theres enough out there to make up what you need to do what ya want.
rotating, moving things around easing, scaling, skewing, opacity etc is all simple animations that can all be done with simple codes in css, including changing hues and colors on a timeline, add javascript to move other things around if it's more then one at a time or sprite sheets to animate images and you got at least 50% of what you will need to do most stuff if not 90% depending what your after. If you want hit so you make simple games that would have to be done in javascript, all a hit is if image (or item) heres the idea, not a working code but an idea of how a hit code works
lets say ya got an image that is a windows 8 icon and tux shoots a bullet at it
if(Windows.x == bullet.x && Windows.y == bullet.y){
//remove Windows image and replace it with an explosion sprite that plays once at the same x and y and removes it after
}else{ //do nothing } you have to add a get.x and get.y to keep track of them but that's about it to blow up a Windows symbol :lol:
If you want the gun to move around then some trig has to be added with what I call the ole cannon code.
But for the most part a ton of it can be done in css.
Edit: Thought I would add this site also, http://www.css3files.com/ it has pretty much everything you need to get started, also check the repeating grad section, you'll want that if you want a lot of repeating grads to fill an area, like making metal, do a small grad and it'll repeat like a pattern over the whole area, a real time saver, (just be carefule with large patterns, it can become cpu consuming if its too much).
Sam
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Thought I'd share the new button layout for my next mdm Mechanical and to show you, that you don't have to stick with the normal layout, I put the dropdowns on the left and the other buttons on the right in the metal mesh thing I made. I still got to make the rest, add a bar behind the dropdowns, change the login, move the users so they apear horizontal somewhere that will fit nicely and attempt to make my terminator tux dude and make the background and some animations, but these buttons are done now. Also the image behind the right buttons change on hover so they light up behind the button, the metal grad on the buttons is all done in css, it has a grad plus a css pattern to give it a metal look.
Here be the new button layout so far.
newbuts.jpg
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

Told ya smarrings that theme rocks :D :D
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Thanks, I'm thinking of converting three more of my live wallpapers over to mdm themes, sorry 4 I should covert the linux beats windows one over by default :lol:
I still want to ssee you make some, you know how to theme now, If you know how to make a web page you know how to make a mdm theme, I gave enough links on here to help everyone out making them.
I would love to see some of your work move around a screen.
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

I'll give it a shot but I don't think I can make something like that theme :lol: :lol:
Locked

Return to “Your Artwork”