Theme Brainstorming for Gnome3

[samriggs]

Howdy all
I didn't feel like filling up the main gnome 3 thread and decided to start another one just for themeing for gnome3 if thats alright.
I decided to try my hand at it to make a steampunk one, one issue I came up with already is adding an image for panel instead of grads or solid colors.
I was wondering if anyone knew how to tile this, instead of making one long image which would take up more memory then it should it would be better to repeat it or stretch it or both.
I noticed you can or should be able to this with panel borders but it does not work for panel backgrounds.
I tried the normal css codes

Code: Select all

background-image: url("panel.png") repeat;
//even tried the code for the borders
background-image: url("panel.png") 0 200 0 200 repeat;
//just to test it and it makes it disapear on both.

Is this even possible for panel backgrounds?
It would be nice if there is a list of what is allowed and what isn't I only found one small one about panel borders but not the panel background-image properties at all except normal css properties which seems to not apply.
The reason is this can create some really interesting looking gnome-shell themes if it is possible.
I know it is IF you make one really long image to fit all screen resolutions, but it would be nice to avoid this.
Normal css properties are the following in case anyone wants to know

Code: Select all

//repeats both x & y positions
background-image: repeat;
//repeats only x (horizontal) postion
background-image: repeat-x;
//repeats only y (vertical) postions
background-image: repeat-y;
//no repeat it just makes one image
background-image: no-repeat;

I'll keep trying this and see if I can find an answer and will post it if I find one.
Sam

[zerozero]

sam, i found now a small tips&tricks by half-left,
might help you

Here are some tips and tricks that might making theming easier:

Use box-shadow : inset to do borders if you have trouble with padding and elements move.


Use SVG images if you cannot do the desired effect you want in CSS. background-image: url("myimage.svg");


Try and workaround an issue, since more often than not you can find another way to do such effect.


What the CSS says is not set in stone. This means you can add your own CSS, say your own hover state if there is none.


Try things. If for example, you are unsure if you can set the width or height of something , try setting it manually. This works on the dash for example.


boxpointer does not have to be an arrow like menu. If you want to do a GTK+ like menu, then just get rid of the -arrow- part


You cannot use gradients with images. So if you do a gradient and then add your own image to the same part, it will not work. Use an SVG or plain background


Use Alt, F2, rt to reload your theme on the fly so you can see the changes. You will have to use r to reload SVG images


Use border-image to make your SVG scale. Images will not scale using background-image


Use background-position to position your background-image

http://gnome-shell.deviantart.com/blog/42941432/

[samriggs]

Thanks zero that helps in quite a few areas.
I checked out the border-image but that doesn't fix it for the background-image for the panel (I tried) I am trying to avoid svg for the repeat (dont want it to stretch) but I am using svg for other parts where resizing is a must.
The only thing is I can make better graphics with pngs then in vectors (svgs), I can add image patterns into the vecotrs but if they scale a lot bigger it looks horrible so its better to use straight vectors for anything scaleable that has to go from small to huge.
I checked out the theme page at gnome and they only have that repeat working for the border-image by the looks of it, which kind of makes it ccrappy for background-images.
Oh well I'll try a long thin bar and see how low I can make the image in memory size.
One thing I found pretty cool is the alpha that can happen with pngs in the panel (at leaast when I did a small image that only took up a small part of the panel background, the rest was transparent) I haven't tested it yet but that should mean that if you put groves on the borders of the background-image that are transparent they should show up as transparent on the panel also. Something I could not do with metacity. Very cool indeed and opens up some good possibilites. (Example a stone panel background with notches in it, the notches would be transparent instead of a black patch) I like that idea.

[zerozero]

if it helps it's good i'll be waiting for that theme

[wyrdoak]

I was snooping around and found this if it helps:
https://bugs.launchpad.net/ubuntu/+sour ... bug/532309


gtk-3.0/apps/gnome-panel.rc

Code: Select all

  style "panel"
  {
          ...
          bg_pixmap[NORMAL] = "img/panel.png"
  # bg[NORMAL] = "#4b4a46"
  }

where as in Orta the code is:

  style "panel"
  {
        xthickness = 1
        ythickness = 0

        bg_pixmap[NORMAL] = "/Panel/panel.png"

        engine "pixmap"
        {
                image
                {
                        function = FOCUS
                        recolorable = TRUE
                        file = "Fixes/none.png"
                        border = { 0, 0, 0, 0}
                        stretch = TRUE
                }
        }
  }

In which case, hopefully:

  stretch = TRUE

[samriggs]

Howdy wyrdoak
Thats gtk2 Thats what I am used to themeing in.
Gnome3 uses gtk3 and uses css instead for the gnome-shell. Its a bit different.
But heres a little tip for you if your themeing in gtk2

Code: Select all

function = FOCUS
                        recolorable = TRUE
                        file = "Fixes/repeat.png"
                        border = { 0, 0, 0, 0}
                        stretch = FALSE
                        overlay_file = "Fixes/stretch.png"
      			overlay_border = { 0,0,0,0 }
      			overlay_stretch	= TRUE

the first one repeats an image so you can make an image that tiles, which allows you to include patterns or textures, then you can overlay the same tiled image with a transparent png that has your highlights and shadows in it but it allows the tiled image to come through, which gives some nice effects, I've used this in all my themes for the metacity and the gtk files (metacity is coded different and uses xml you can snag one of mine if you want to tear it apart, some of my metacity has more in then others. I used this method to overlay transparent plasma colors also instead of highlights and shaows which also gives cool effects (you can add highlights and shadows ontop of the plasma in a very transparent layer also, its pretty much endless what you can do with this small chunk of code, you can even tile a transparent tile over a another tileby making them both stretch = FALSE. You can fool around with the borders on the overlay allowing the tile underneathe to come through stronger etc etc etc.
Have fun
Sam

[wyrdoak]

Sorry I might have got too excited and picked up the wrong code.

I haven't seen what the code looks like yet. but is this it?

https://launchpadlibrarian.net/68809265/gnome-panel.rc

I've been playing with some code, might get brave when I get more used to it a try creating something.

[samriggs]

Nope that's Gtk2 Here I'll show you an example of gtk3 for gnome3 its all css instead, which I love working in because I am used to it from making templates for websites but its a bit different I am finding out.
Here's a section of the css code for themeing the gnome-shell, this is the section I am currently working on

Code: Select all

#panel {
    /*background-gradient-direction: vertical;
    background-gradient-start: #f1f1f1;
    background-gradient-end: #cdcdcd;*/
   /*Trying using an image instead of grads*/
    background-image: url("panel.png");
    border: 1px solid rgba(0,0,0,0.2);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    color: rgba(22,22,22,0.8);
    font-size: 10.5pt; 
    box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.6);
    height: 1.86em;
}

I made a quick rough stempunky image and made it 2560x 25 thinking well I want it 25 px high and as long as I have it longer then my resolution screen it should fit, ahaaa but I am finding out it all depends how long it is now and if its too long it shrinks the height, as in the image below

Screenshot-3.png

Weird I guess but it does make sense although I don;t like it at all.
Next idea, to use a border-image that is the same height 25px, and use that as a background-image instead, then put button images over top of that and make the panel background-image transparent and hopefully that will instead and I should be able to tile (hopefully)
I'll post once I find a solution to this issue.
Sam
EDIT: alrighty the border-image works I don't like using it but it works, I will add hovers and buttons etc etc and change the panel bar obviously but it does allow transparencies I was happt to see that.
Here is the code I used in case anyone wants to try it out.

Code: Select all

#panel {
    /*try using border-image instead and tile it*/
    /*2560 for the longest resolution I think is out there for the right side*/
    /*most themers know this but just in case the numbers are top, right, bottom,left*/
    border-image: url("panel1.png") 0 2560 0 0 repeat;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    color: rgba(22,22,22,0.8);
    font-size: 10.5pt; 
    box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.6);
    height: 1.86em;
}

Notice I wiped out the background totally and only used border-image instead, this leaves me with a transprent back so if I have cut marks like in the example (although small ones) the back wallpaper comes through instead, kind of a cool effect and can be used to maybe leave the middle sides a transparent color and some solid well just let your imagination go crazy because the possibilities are almost endless with transparencies included.
Heres the new sample

Screenshot-4.png

Well this works so far too bad I couldn't use background-image I perfer that instead.
Also I tried to change the 2560 to 100% it borked on me so percentages don't work, thought I try it though though because it would be better to use, but nope it don't, had to log into fallback to change it back. (although it can be manually changed to your screen width resolution.)

[samriggs]

Been fooling around some more with the panel to test it's limits (haven't borked it yet today but I am sure thaat will happen again at some point as I test everything out.
I made some crappy images (just green blobs actually) to test some positioning out.
I made one for the left and right side I used border-image for both, and a background-image for the middle. I left the background clear for this test although you can use border-image to put something back there.

Screenshot-5.png

Heres how I did this lousy looking piece of work

Code: Select all

#panel {
    background-image: url("mid.png");
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    color: rgba(22,22,22,0.8);
    font-size: 10.5pt; 
    height: 1.86em;
}

#panelRight{
    border-image: url("right.png")0 0 0 0;
}

#panelLeft {
    border-image: url("left.png")0 0 0 0;
}

The right and left panels make the images scale according to what is open on that side to fill it, the middle one does not grow or move or scale so its positioned stays at all times.
For the right and left it might be better to use a svg then a png since it scales but the middle one a png is better to allow more details.
I tried to make the left and right to be absolute in size but no go, even tried z-index and some positioning, I haven't found an answer to that one yet but it might be better to stretch anyhow to fill all the icons and labels as they open.
One thing I do find is png's look a bit blurry even though I got them saved at 300 for resolution, which is why anything stretchable svg would be better although it knocks out the details you can use.
Just thought I'd add what I tried for other themers if they were wondering.

[cbowman57]

Coming along nicely Sam.

I use quite a few of Finn Murphy's extensions, so in particular I've been messing with the stylesheet.css for eureka & use a slightly modified Atolm theme.

The icon spacing & coloration of the workspace selector have been bugging me, this is what I came up with to suit this theme.

Code: Select all

/* stylesheet.css */
.panel-launcher-box {
    spacing: 7px;
}

.panel-apps-menu-box {
    spacing: 8px;
}

.panel-apps-menu-icon {
    icon-size: 24px;
}

.panel-apps-button {
    padding: 0px;
    margin: 0px;
    font-weight: bold;
    color: #ccc;
    transition-duration: 10; 
}

.workspaces-button {
    padding: 0px 6px;
    font-weight: bold;
    background-color: #445060;
/* background-color: rgba(240,240,240, 0.9); */
    color: white;
    transition-duration: 10; 
}

.workspaces-menu {
    color: #ffffff;
    font-size: 10.5pt;
    min-width: 25px;
}

.activities_box {
   spacing: 24px;
}

[samriggs]

Nice it looks good and you got me thinking some more, you got the weather beside the time, my middle one might look lousy if there is two of them side by side like that, I'll have to rethink that one.
Thanks for showing me that.

[cbowman57]

Yeah, I think I tweaked the simone wx extension some to place it there (Can't remember). Also relocated the mediaplayer extension icon, looked stupid next to the weather in the center.

Of course since there is an extension for moving the time to the right I may be the exception.

[samriggs]

ok thats throws another idea out the window
I was thinking of making the mid image fit tight to the time and make it look like a steampunk clock but if folks can move everyhting around then that changes things unless I force the issue on them through the panel design
I just might do that anyhow.
If they dont like it they can take thaat part out in the css.

[cbowman57]

They can figure it out if it bugs them I suppose. The little things I like to tweak probably make me the exception.

Do you have to position the images by location or can you link them to shell position? i.e. Main.panel._statusBox etc.

[samriggs]

Right now I am positioning by location I'm just working on the panel right now, I am putting one as background-image in the middle for the time, just finsihed the artwork for that one here it is

Screenshot-6.png

I made it to just fit the time but its fri hopefully another day won't be longer or I'll have to fix that and I might change the color of the font or make it darker or lighter, I'll try both.
The sides are positioned in leftPanel and rightPanel so they will scale with whatever icons or windows show open,so I guess they are tied to the system that way it will cover them on both sides.
EDIT
Got the panel art finished finally. Next I got to fool around with those fonts and colors. I am really liking how gnome3 allows you theme, although I dont like that bright white selected color, that will be gone, I am using another theme as a base to start me off on since this is the first one I made for gnome3 and I am not sure how it all works yet, just learning it as I go along and seeing how much is the same from normal css and the gtk 2 and metacity.
Here it be so far without the fonts fixed.

Screenshot-7.png

I am curious to see how it would react to your panel layout, I am wondering if the right side would strech all the way over to the weather extension or not. That might pose a problem if it does.

[cbowman57]

I'd be happy to try it out when you're ready Sam.

[samriggs]

Thanks I'll take you up on that.
I got the panel done, not sure about the blue I chose might try orange instead, and am trying to get the rest done, most of the time is just trying to figure out what does what in the code, its the first time I looked at the css for the gnome-shell, most of it is self explanitory but alot I have to throw in a color to see where it lands , maybe after I get all this done I'll make a diagram tutorial on what does what in that code, it sure would be helpful then just guessing at it.

[zerozero]

sam, i wanted to say earlier, but.. it's coming along very very nice

[samriggs]

Thanks zero
This one is fun, I like using images in my themes alot, and I found most all gnome-shell themes don't use them, which makes learning this a bit harder, trying to locate things but its fun. I'm about halfway done, soon as I get the shell done, I'll add it to deviantart for a download and put it on gnome look since its for more then the mint, just redoing the the left dash panel now, the third time to try and get it the way I want to did the system tray twice now I got it looking like a rock wall but that might change to something metal instead.
After I get the shell done I'll tackle the gtk/css and the metacity file since I take it there different too now since version 3.
Here it is so far, just got to fix that left dash panel to look more steampunk.

Screenshot-8.png

Sam

[cbowman57]

I'm speechless. That's beautiful Sam, I don't know what you do for a living but you've definitely got talent in design.

I would bet a dollar to a donut that will be one of the most popular themes for G-S.