Theme Brainstorming for Gnome3

Discuss non-support related topics related to LMDE.
Forum rules
Before you post please read this

Re: Theme Brainstorming for Gnome3

Postby samriggs on Sun Aug 07, 2011 9:09 pm

Thanks a bunch.
I changed the left dash panel to make it more steampunk grungy looking, same base just added stuff to it.
Actually Im unemployed right now which is why I have time to waste right now :lol:
Taking a break to let my body heal from a left shoulder injury.
I am an artist by trade, paintings, computer art, signs, designs, logos blah blah blah, been doing it professionally all my life (over 30 years now).
So since I'm taking time for this shoulder to heal up I'm having some fun creating themes and some wallpapers and learning java and android programming so I can start making some apps and live wallpapers, then I might try the market to see how that goes, if all goes good I'll just continue doing it instead.
Glad you like the theme, still got a ways to go with it.Whether or not its the most downloaded one doesn't matter to me I just have fun creating these things and put them up for whoever wants them. :)
Heres that dash panel, I think I'll make the workspace window look the same and the menus I finished also, thought I'd give a sneak peak.
Screenshot-9.png
Screenshot-9.png (39.44 KiB) Viewed 1760 times
Screenshot-11.png
Screenshot-11.png (112.72 KiB) Viewed 1746 times


If I get some extra time, I'm going to hopefully make a tutorial with screen shots for what all the css means and where everything is located for themers, trying to figure it all out takes too much time.
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Linux Mint is funded by ads and donations.
 

Re: Theme Brainstorming for Gnome3

Postby samriggs on Mon Aug 08, 2011 9:42 pm

Ok I think I got it finished for now, I'm sure I'll be tweaking it off and on especially after I get any issues from other users trying this out.
Here is an image of the final product
desktop2.jpg
desktop2.jpg (197.96 KiB) Viewed 1738 times


It can be downloaded and tested the heck out of it at
http://samriggs.deviantart.com/gallery/#/d45x2o9

Next (if theres not too many bugs with this, i tried to test it myself but you never know) I'll try and get a gtk and metacity together to go with this, maybe a dock theme for cairo dock (sorry I don't use avant) and maybe if I ever get enough time a steampunk icon theme, which I been threatning myself to do for months.

Please let me know if there is any bugs in the machine (I left the chat alone, maybe I'll change that part later).
I also tried to make an image based scrollbar but theres not a heck of a lot you do with this one, maybe I can make a better one with the gtk, I usually can.
The lg is also changed to matched the theme.
ps: in case your trying to use this with gnome 2 please do not, it is made for gnome 3 and tested with gnome 3.0, it will not work with gnome 2 at all.

Enjoy and please let me know if anyone that tries it out if there is any gremlins in it.
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Mon Aug 08, 2011 10:51 pm

Nice Sam. I pieced together a Firefox, cursor & metacity theme from gnomelook & Firefox personas. Just lacks gtk2 & 3 themes to be complete.

I'm sure there is an icon set somewhere that would fit it too.


Image
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby samriggs on Mon Aug 08, 2011 11:09 pm

Thanks glad you like it,
Does the menu act up with the weather extension? I was worried about that one.
I am going to get working on a gtk and metacity theme next, I should quickly make a cursor for it with the pointy arrow I guess.
I made a steampunk metacity theme before but it might be too much artwork, I might make a cleaner one for this one, the old one I went nuts on it and tried to put as much as I could for a frame and buttons, plus the new way of coding might not work with the old way, I'll test it out.
I'll eventually make an icon theme for it just everytime I look at how many images I have to create for one I turn to make something else instead, so maybe I'll do a few every now and then and hopefully it'll eventually get done :lol:
Your image didnt show I wouldn't mind seeing it with what you put togeather
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Mon Aug 08, 2011 11:18 pm

I wouldn't want to stifle your creativity, & the metacity theme I'm using might be yours. It certainly complimented the shell theme. The screenshot didn't catch it but I did find a nice steam punk cursor theme.

The center image could use a stretch (maybe just put 3-4 sizes with the theme) with everything I've got in the top panel but the weather extension worked just fine. Didn't interfere with how it operated at all & it looks real good.
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby samriggs on Mon Aug 08, 2011 11:39 pm

Thanks for the input, I was wondering if that middle image was too small, I'll do up a couple more sizes to add to the theme and let the user decide which size they want and tell them where to change it in the css.
I still might make my own cursor theme for it, just for the heck of it, never done one before , gives me something new to fool around with when I get bored.
I quickly made a longer one for you, I'll add this to the package later one and add an even longer one later.
Here it be (make sure you change the name either on the this one or in css (if in the css you can keep both that way to make it easier to switch them around)
middle250x25.png
middle250x25.png (10.18 KiB) Viewed 1722 times


Ahh I just made them both so heres the other size for you.
middle350x25.png
middle350x25.png (12.22 KiB) Viewed 1721 times
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: Theme Brainstorming for Gnome3

Postby secipolla on Tue Aug 09, 2011 6:41 am

Last edited by secipolla on Tue Aug 09, 2011 6:57 am, edited 1 time in total.
secipolla
Level 4
Level 4
 
Posts: 356
Joined: Sun Sep 05, 2010 5:19 pm

Re: Theme Brainstorming for Gnome3

Postby randomizer on Tue Aug 09, 2011 6:54 am

Sam, you should put a bigger screenshot on dA so we can see the detail better. Having looked at the most popular and most downloaded GTK3/GS themes on gnome-look.org, I have to say that this is one of my favourites. There are precious few decent themes at the moment. This is something really different, but not really weird (there are a lot of really weird GTK2/Metacity themes). Most of the GTK3/GS themes look like something that belongs with Openbox, are loaded up with crappy faux glass effects or are just a bunch of gradients (which are nice, but not very interesting).
User avatar
randomizer
Level 5
Level 5
 
Posts: 871
Joined: Mon May 03, 2010 7:15 am

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Tue Aug 09, 2011 8:27 am

Sam, that was quick. :)

I installed the 350x25, looks amazing.

Screenshot-2.png
Screenshot-2.png (313.44 KiB) Viewed 1705 times
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby secipolla on Tue Aug 09, 2011 8:29 am

Sam, it seems this theme is commented to show what affects what. Don't know if it will add to what you already learned, though.
secipolla
Level 4
Level 4
 
Posts: 356
Joined: Sun Sep 05, 2010 5:19 pm

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Tue Aug 09, 2011 9:03 am

Sam, I don't know if you mentioned it or not, but are you using the Adwaita engine? If so, how about a simple find & replace with your colors applied to the Adwaita gtk-2 & 3 themes in the interim.

I know that some themes are using the Unico engine but that doesn't get installed by default & Adwaita is solid.
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby karashata on Tue Aug 09, 2011 11:08 am

cbowman57 wrote:...
I know that some themes are using the Unico engine but that doesn't get installed by default & Adwaita is solid.


As far as I know, the Unico engine is something being worked on for the Ubuntu default "Light" themes, and any themes using it were probably created by people using GNOME 3 on Ubuntu. While a version of it can be installed on Debian without any serious issues (currently up to version 0.69 can be installed because of dependencies, 0.74 is the most recent but requires newer components than Debian is shipping...), it isn't provided in the Debian repos, probably due to it still being in development and currently only being an Ubuntu component. The Adwaita engine is the default supplied by GNOME and as such is included with any distro shipping GNOME 3, therefore it would be the ideal engine to use for anyone doing GNOME 3 theming.

I recall reading somewhere online that GNOME would actually like to eliminate the need for theme engines altogether some time down the road, however I can't recall exactly how that would end up working out, and I doubt that theme engines will disappear any time in the short term.

Anyway, just thought I'd throw my two cents in there, for what they're worth.
Linux Mint user since 2010, fluffy dragon forever!
Registered Linux User #473695
Image
User avatar
karashata
Level 4
Level 4
 
Posts: 441
Joined: Tue May 10, 2011 2:53 pm
Location: Stratford, Ontario, Canada

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Tue Aug 09, 2011 11:42 am

Hey Sam, this looks like it might be helpful. http://gnome-look.org/groups/?id=377

It's a gui theme maker for gtk-3.0, pre-alpha but I think it might be useful to you.
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Tue Aug 09, 2011 12:29 pm

I'm really digging this theme. Found a metacity theme called dragon_by_grynays-d39ihjp, and there is a cursor theme called SteamPunk. There is supposed to be an icon theme for Mac's called "Old Library" that was referenced by someone that had a cool Gnome 2.* steam punk themed desktop a few years ago but I haven't been able to find it. iGoogle theme Steampunk, Firefox theme glowygold.

All it lacks is an icon set & the gtk themes I think, though you probably won't be content until you've created your own metacity theme. :)

BTW, feel free to use these as previews on DeviantART &/or gnomelook.org, or anything else you might want to do with them.

Screenshot-4.png
Screenshot-4.png (203.4 KiB) Viewed 1690 times


Screenshot-3.png
Screenshot-3.png (285.56 KiB) Viewed 1690 times
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby secipolla on Tue Aug 09, 2011 1:02 pm

Yours is much better cbowman, but here's me using it:
Image
Image
Image

BTW, Sam, something that maybe could be worked on is that the highlighted items in the drop-down panel menus make the whole menu enlarge (it's like that element should be made smaller so the drop-down menu keeps its size). The same but more slightly when hovering items in the dash (like if the hover image was made a few pixels smaller maybe the dash wouldn't change size, but IDK if it just works this way by default) or when clicking some panel item like the ones at left or the Activities button the whole background image for them shrinks a bit. I'm being a bit meticulous but maybe these size issues could be refined.
(I would record the desktop but it's broken for some reason)
secipolla
Level 4
Level 4
 
Posts: 356
Joined: Sun Sep 05, 2010 5:19 pm

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Tue Aug 09, 2011 1:21 pm

secipolla, what icon set are you using & how did you get that dusty look in Adwaita?

Looks very nice BTW, I rather like the background.
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby samriggs on Tue Aug 09, 2011 1:46 pm

WOW thats a lot of comments to start my morning off :lol:
Good morning everyone, glad you like it, ok here comes the answers.

BTW, have you tried it with the Buuf icon themes. I think it has a somewhat similar look


I checked out some icon packages last night but didn't see anything I liked yet so I will check these out thanks, if I can't find one I like I'll just maake my own eventually.

Sam, you should put a bigger screenshot on dA so we can see the detail better.


Tried it wouldn't take it for some reason, I find using 600 It never gives me any issues, I added more screenshot at gnome look HERE

I installed the 350x25, looks amazing.


That looks better and thanks for the image I was so curious how that weather would fit, it fits better then I thought it would :D no more tweaking for that part anyhow, the image was easy to make, just split it in half, copy paste small tiled chunks inbetween presto its bigger, only took me about a minute or two for each one.

Sam, it seems this theme is commented to show what affects what. Don't know if it will add to what you already learned, though.


I know diddly squat this is the first time I used gnome3 or the way it uses css, mind you I do know css, only took a day and one theme to learn that years ago, its a pretty simple language to learn, the only thing I have trouble with is what name belongs to what in the theme and whats diferrent with this css then normal css for themes, I got locked out of my system about 20 times making this one trying to find out my limits :lol: of course I pushed it all the way along but thats how you learn (the hard way mind you), glad I have the fallback to fix it every time :D I'll check it out, if its not a full explaination I just might make my own and put it on my site which I will eventually get to making one day :lol: (its supposed to be a support site for my android apps and live wallpaper once I get that going eventually), but Im thinking of adding some tutorials and other stuff eventually right now its pretty much blank page.

Sam, I don't know if you mentioned it or not, but are you using the Adwaita engine?


Yup, I just used that as base, until I get to making my own.

Anyway, just thought I'd throw my two cents in there, for what they're worth.


Most times two cents worth is more like a two dollars worth, always appreciated and always added knowledge is good for learning :D

It's a gui theme maker for gtk-3.0, pre-alpha but I think it might be useful to you


Cool little app, I might try it, might save me from getting locked out so much and using ctl + F2 then r (I create my themes right in the .themes folder so it's live when I make them), I tried to install gursor last night to test that out to make a cursor packgae but it had issues working so I might have to do that part the hard way (which I'll have to learn), found out making cursors is more then just pngs or ico's, I tried to find a package I liked last night but didn't see any I wanted so I'll have to make my own.

All it lacks is an icon set & the gtk themes I think, though you probably won't be content until you've created your own metacity theme.


:lol: yup! already got one in mind, Im going to use some the same artwork that I used in the gnome-shell panel for the metacity so it matches it and maybe the the close button (I might make all those buttons the same, like old typewritter keys).
I tried an old metacity theme I made but it doesn't fit as you can see
metacity.png
metacity.png (78.1 KiB) Viewed 1687 times

You can get this one HERE
Its just too orangy for this theme.
So yup I'm making a new metacity theme and a new gtk theme to fit this one, I'm still trying to figure out what to add in the gtk part but hopefully it'll look good and match it and hopefully I can add one for firefox to match also, the gtk always takes me the longest because what looks good in one part messes up in another program (like eveolution or firefox or libreoffice) so I have to tweak the heck out of it usually to fit everything nicely and add more widgets to make everything fit properly, plsu I never used gtk3 before so it'll be a learning curve and many erros along the way, I'm sure of it.
I am happy for fallback mode :lol:
And yes I am going to make an icon set this time, I am to frustrated trying to find one that matches what I want so I'll give in finally and make my own.
I added the extra images for the middle panel already in the download with a read me how to chenge them. Thanks for the input for that I would of gotten a lot of complaints about that one, so its good you pointed that out so I could nip that one early, I thanked you for that one in the read me file :D .

BTW, Sam, something that maybe could be worked on is that the highlighted items in the drop-down panel menus make the whole menu enlarge (it's like that element should be made smaller so the drop-down menu keeps its size)


Yes I noticed that when I was making it.
Heres the chunk of code that runs that part
Code: Select all
/*font color on mouse over on popups*/
.popup-menu-item:active {
    border: 1px solid rgba(20,14,2,0.9);
    border-radius: 8px;
    background-gradient-direction: vertical;
    background-gradient-start: rgba(65,46,7,0.5);
    background-gradient-end: rgba(20,14,2,0.5);
    box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.4);
    color: #01d8f7;
}


Also the spacing and padding parts

Code: Select all
.popup-menu-content {
    padding: 1em 0em;
    padding-left: 4px;
    padding-right: 4px;
}

.popup-menu-item {
    font: 12px sans-serif;
    font-weight: bold;
    padding: .4em 1.75em;
    spacing: 1em;


Maybe by changing the spacing and padding might fix this, I am still learning this part, but it scales automatically, since it creates a gradient with a border around whats selected or hovered it becomes bigger, so maybe bringing everything in a notch might fix this as long as it does not come in too much to make it too tight so it interfers with the lettering it might work, I'll test it out and see what happens. It sort of annoyed me also when I seen this happened although I understand why it happens, I just forgot to go back and fool around with it to see if I can make it not increase the whole pop-up when hovering.
Thanks for reminding me about it.

or when clicking some panel item like the ones at left or the Activities button the whole background image for them shrinks a bit.


You'll haver to explain this one more for me, either Im not awake it or I dont uinderstand what you mean by this, can you provide a screen shot?
I noticed in your image the metal basket behind the icons don't show either unless there just not in use (then it wouldn't show) do you mean when the metal basket (dashbutton.png) shows up the icons become smaller inside it to fit it?
If thats the case, it only has so much room to fit in that side panel so it would shrink the icon to fit inside that dashbutton image unless I increase the size of the dashbuttons and give less padding, then you would only see the outline and not the dashbutton mesh part, it does this also with the icons in the application in activities so it can fit the icons within the dashbutton which also gives it some padding so you can see the mesh part also, that whole part only has so much room to show everything and when the dashbutton is there it puts the icon inside it (shrinking it abit).
Is this what you mean? Let me know and thanks for the input, I will try and stop the pop-up from scaling so much on hovers as long as it looks ok when I do.
Sometimes you got to sacrifice some things for design purposes (which ain't always good) but sometimes I can find a happy compromise. :D


Hopefully I got all the answers for you all and glad you like it, maybe I'll try a metal one next and see how far I can take it, I want to add images in the corners and side of the workspace and left side panel but they stretch so it might look wonky, but hopefully I can find a way around this, I layered an image behind the pop ups (don't know if you noticed that because its really subtle), underneath the dark shadow of those pops up is a very faint image of grunge abd scratches, I tried to make it all a solid image but it went right to the top and covered the arrow so I had to opt for this method instead.

I'll add the full package once I get the gtk and metacity finished :D

Thanks for all the comments and links and help, much appreciated.
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Tue Aug 09, 2011 2:45 pm

I'd like to offer this for the gtk-2.0 theme:

Code: Select all
gtk-color-scheme = "base_color:#dcca9a\nfg_color:#dcca9a\ntooltip_fg_color:#dcca9a\nselected_bg_color:#a9895b\nselected_fg_color:#382b1b\ntext_color:#382b1b\nbg_color:#382b1b\ntooltip_bg_color:#382b1b"


Screenshot-Transmission.png
Screenshot-Transmission.png (106.05 KiB) Viewed 1679 times
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Re: Theme Brainstorming for Gnome3

Postby samriggs on Tue Aug 09, 2011 2:49 pm

@secipolla
Ok I just fooled around with the code abit heres how to fix that pop menu from going bigger

change this
Code: Select all
.popup-menu-item {
    font: 12px sans-serif;
    font-weight: bold;
    padding: .4em 1.75em;
    spacing: 1em;
}


To this
Code: Select all
.popup-menu-item {
    font: 12px sans-serif;
    font-weight: bold;
    padding: .2em .5em;
    spacing: 1em;
}


I just changed the padding on the width from .4 to .2 you can fool around with the settings to get it the way you want, also I changed the 1.75 to .5 this still make it move a touch but not as nearly as much as before, hopefully it wont make it too tight and that will solve that issue for you. :D
I'll change this in the main download once I get through more bugs that should pour in and some more tweaks I have to make to it, I want to change the activites background also from one color to either a gradient or a gradient with some metal bars (like the holding the icons or something like that), and maybe putting the words (windows, applications, themes) incased in a metal frame, if this is even possible, time to get locked out of my system more :lol:

Thanks for the gtk looks great, I like the color scheme, I might add some images where all the dark brown is to give it some textures but in the same brown tone just to give it a bit of more oommphh, what do you think of old typewritter keys as close, min, max, restore buttons? like the ones I got in the activites for the close button under windows?

Can someone tell me if the loading icon work on there system, I made my own (image process-working) it doesn't load on mine but reverts back to the main one instead, just wondering if it works at all or if I have to make changes on it to get it working properly, I forgot to delete the svg one (its horrible) but the png one should work. Thanks in advance for all the help you have provided and are going to provide.

Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: Theme Brainstorming for Gnome3

Postby cbowman57 on Tue Aug 09, 2011 5:34 pm

Ok, I've hit a wall with the gtk themes. Been working on the gtk-3.0 theme too, I've attached it so anyone that cares to can play with it. Still has that gray Adwaita patch that I can't locate.

Old Steampunk Gtk.tar.gz
(17 KiB) Downloaded 70 times


Sam, I'm glad to offer what I can & flattered that you find it useful. I think the typewriter keys would look super. :)

Gtk-3.0 on left, gtk-2.0 on right.

Screenshot-5.png
Screenshot-5.png (54.57 KiB) Viewed 1673 times
cbowman57
Level 2
Level 2
 
Posts: 90
Joined: Mon Mar 14, 2011 7:46 pm

Linux Mint is funded by ads and donations.
 
PreviousNext

Return to Open Discussion

Who is online

Users browsing this forum: No registered users and 2 guests