How to customize Mint-X GTK theme colours

Forum rules
Before you post please read this

How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 10:11 am

I have made a green version of Mint-X gtk3 theme and now it looks like this on nemo:

Image

but on firefox itlookslike this:

Image

and when I log in as root I get this:

Image

How can I apply the green colour to all the grey section on firefox and nemo in the last two screenshots above? :D

How can I do the same for the GTK2 theme?



Theme attached below :D
Attachments
Mint-X.zip
(55.22 KiB) Downloaded 36 times
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Linux Mint is funded by ads and donations.
 

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 12:29 pm

I found this tool here https://apps.ubuntu.com/cat/applications/gnome-color-chooser/

Image


and now firefox colour has changed but the window decoration colour on some apps did not and it looks like this now

Image

Image

"open as root":

Image

but I still can't make the changes I made permanent!

I hve uploaded the theme here http://gnome-look.org/content/show.php?content=162478
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 2:25 pm

Where is every one??
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 3:14 pm

I want to add the attached metacity theme to it Image

Image

Image
Attachments
metacity-1.zip
(26.12 KiB) Downloaded 24 times
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby austin.texas on Tue Dec 24, 2013 3:31 pm

Brahim,
Getting the root Nemo (and Synaptic) to use your theme colors is simple.
When you open those programs, you are no longer operating as user, you are operating as root. That is why they are not using your theme.
All you have to do is create a link in /usr/share/themes like this:
Code: Select all
sudo ln -s /home/user/.themes/YourTheme /usr/share/themes/YourTheme

That's it! Done. Now root will use your theme.
Or you can just copy your whole theme into /usr/share/themes as root. But then you have to edit both locations to make changes.
Mint 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3617
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How to customize Mint-X GTK theme colours

Postby caribriz on Tue Dec 24, 2013 3:45 pm

Hi Brahim,

I like your new theme(s) :)

I've been doing something similar - experimenting with the colors of Mint-X gtk3 (Controls) theme.

It looks like you're nearly there - but you're combining a couple of different methods to do it.

You can have a look at a tutorial I made from my notes (these were made in LM16 Cinnamon).
Keep in mind, I'm no expert - this is just what I did with my "experiments" and may not be perfect - but you may get something from it (?)

EDIT: These tutorials only deal with changing the colors of the Mint-X gtk theme (Controls) - not the cinnamon theme (panel, menu etc.).
The instructions are specific to Linux Mint 16 Cinnamon


Part 1 - changing the selected background color (the green "highlights")
http://www.mediafire.com/view/egq7qwlhbj7sikw/HOW-TO-CHANGE-THE-COLORS-OF-MINT-X-GTK-THEME-IN-LM16-CINNAMON-PART-1.pdf

Part 2 - changing the background color (from light-grey background)
http://www.mediafire.com/view/9tvs6ys9nz063wd/HOW-TO-CHANGE-THE-COLORS-OF-MINT-X-GTK-THEME-IN-LM16-CINNAMON-PART-2.pdf

Part 3 - changing nemo's sidebar color
http://www.mediafire.com/view/3uo9mueq8yg21lj/HOW-TO-CHANGE-THE-COLORS-OF-MINT-X-GTK-THEME-IN-LM16-CINNAMON-PART-3.pdf

I didn't use gnome-color-chooser, so using it (in combination with the notes above) may "confuse" things.

PS. As for the metacity theme:
I downloaded your .zip file, extracted it and just copied the folder metacity-1 to my current gtk theme folder (I renamed the existing metacity-1 folder to metacity-2)
logged out/in to get this:

Screenshot.png


You should be able to tweak it some more to remove the colored window bar. I'll have a go myself, later ....
Last edited by caribriz on Thu Dec 26, 2013 8:44 pm, edited 2 times in total.
Image
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17 Cinnamon)
caribriz
Level 5
Level 5
 
Posts: 891
Joined: Mon Nov 28, 2011 7:43 am

Re: How to customize Mint-X GTK theme colours

Postby austin.texas on Tue Dec 24, 2013 3:54 pm

As for Firefox, I don't use it so I don't have any firsthand info, but here are some Firefox-specific settings from Crunchy-blue/gtk-2.0/apps/ff.rc:

# ==============================================================================
# FIREFOX SPECIFIC SETTINGS
# ==============================================================================

style "ff-default" {
GtkCheckButton::indicator-size = 14
}

style "ff-statusbar" {
}

#widget "MozillaGtkWidget*Toolbar*" style "theme-toolbar"
#widget "MozillaGtkWidget*Statusbar*" style "ff-statusbar"


widget "MozillaGtkWidget*" style "ff-default"

# ------------------------------------------------------------------------------
# Some Firefox (3.0/3.5) GTK widgets hierarchy (maybe useful for someone)
# ------------------------------------------------------------------------------

# Top toolbars (and maybe others)
#widget "MozillaGtkWidget.GtkFixed.GtkHandleBox.GtkToolbar" style "theme-dark-toolbar"

# Findbar entry, gecko (all html) entry
#widget "MozillaGtkWidget.GtkFixed.GtkEntry" style "theme-dark-entry"

# ALL buttons
#widget "MozillaGtkWidget.GtkFixed.GtkButton" style "theme-dark-button"
Mint 17 v2 Cinnamon (64 bit), Quad core AMD A8-3870 with Radeon HD Graphics 6550D, 8GB DDR3, Ralink RT2561/RT61 802.11g PCI
Microsoft-free environment since 1996

To help Linux Mint with a donation, please visit http://www.linuxmint.com/donors.php
User avatar
austin.texas
Level 11
Level 11
 
Posts: 3617
Joined: Tue Nov 17, 2009 3:57 pm
Location: at /home

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 4:04 pm

Thank you guys for your support I'm trying to change Firefox colour to match the overall theme! If anyone knows it plz do it for me :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 4:06 pm

BTW I want to submit that to the Mint dev team :D

By the way you can call it "Minty" if you want :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby caribriz on Tue Dec 24, 2013 4:18 pm

Part 2 of the tutorial will show you how - you need to edit some image files as well to change the background color in the theme completely.
For one example, menubarbg.png in your theme's gtk-2.0/Bars folder.

Then you should get this -

Screenshot2.png


But unless you follow all of the tutorials, you might not change all the grey background color throughout the theme - the results won't look like the
picture above.
Image
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17 Cinnamon)
caribriz
Level 5
Level 5
 
Posts: 891
Joined: Mon Nov 28, 2011 7:43 am

Re: How to customize Mint-X GTK theme colours

Postby hexdef101 on Tue Dec 24, 2013 4:27 pm

I would be glad to help out. unfortunately unless you need art I'm not your guy. I can only make tiny tweaks to themes, Usually by going to the original designer, or just getting lucky. Thats why I never implemented any of my ideas for mint myself.

Now on to the Ideas.

I like your work so far. Just one thing though. I would change the flat color to a Gradient. Top Down Light to Dark. Because you are using the forum colors something like this

Image

Colors used
Main = e4ffc9 to b2d093
Sidebar = b2d093 to 566349
Border = 444f3a
Window = ffffff

I would of course tweak the border colors to better match the Main Gradient though
Suggestion only
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How to customize Mint-X GTK theme colours

Postby hexdef101 on Tue Dec 24, 2013 4:34 pm

hey Caribriz Upload that version of the theme if you have it, and post it here. the Changes in yours from the original will let him see the exact places to edit.
Image
User avatar
hexdef101
Level 4
Level 4
 
Posts: 349
Joined: Sat Oct 09, 2010 5:43 pm

Re: How to customize Mint-X GTK theme colours

Postby caribriz on Tue Dec 24, 2013 4:43 pm

Sure -

These are the themes created after each part of the tutorials:

Edit: These themes are gtk themes (Controls).
They do not include a matching cinnamon theme - they just have the default Mint-X cinnamon theme in the theme folder.
They are also for use with LM16 Cinnamon - they may not display properly in previous/future versions of Linux Mint or with other desktop environments
.

Part 1 - Mint-blue for LM16 Cinnamon
http://www.mediafire.com/download/gvz5mofz14bjbkj/Mint-blue-LM16.tar.gz

Part 2 - Mint-blue-2 for LM16 Cinnamon
http://www.mediafire.com/download/pcbti7cn2niohhr/Mint-blue-2-LM16.tar.gz

Part 3 - Mint-blue nemo for LM16 Cinnamon
http://www.mediafire.com/download/7a8au8bkiu8g96n/Mint-blue-nemo-LM16.tar.gz

Part 2 - Mint-blue-2 deals with the background color.
Last edited by caribriz on Thu Mar 27, 2014 2:59 am, edited 4 times in total.
Image
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17 Cinnamon)
caribriz
Level 5
Level 5
 
Posts: 891
Joined: Mon Nov 28, 2011 7:43 am

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 8:22 pm

hexdef101 wrote:I would be glad to help out. unfortunately unless you need art I'm not your guy. I can only make tiny tweaks to themes, Usually by going to the original designer, or just getting lucky. Thats why I never implemented any of my ideas for mint myself.

Now on to the Ideas.

I like your work so far. Just one thing though. I would change the flat color to a Gradient. Top Down Light to Dark. Because you are using the forum colors something like this

Image

Colors used
Main = e4ffc9 to b2d093
Sidebar = b2d093 to 566349
Border = 444f3a
Window = ffffff

I would of course tweak the border colors to better match the Main Gradient though
Suggestion only



that looks great! I'll try it :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 8:25 pm

caribriz wrote:Sure -

These are the themes created after each part of the tutorials:

Part 1 - Mint-blue for LM16 Cinnamon
http://www.mediafire.com/download/gvz5m ... M16.tar.gz

Part 2 - Mint-blue-2 for LM16 Cinnamon
http://www.mediafire.com/download/pcbti ... M16.tar.gz

Part 3 - Mint-blue nemo for LM16 Cinnamon
http://www.mediafire.com/download/7a8au ... M16.tar.gz

Part 2 - Mint-blue-2 deals with the background color.


maaany thanks working on them now! :D :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Tue Dec 24, 2013 10:41 pm

Mint-blue2 is about the section i want to edit :shock: Which part do I have edit :D I've updated my theme and added a cinnamon theme to it here http://gnome-look.org/content/show.php?content=162478

Image

We are left with the background section (mint-blu2) on gtk3 and we are done with two parts of the theme (gtk3+cinnamon) :D :D :D
We should end up with something ;ike the screenshot below(made with gnome colour chooser):

Image
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby caribriz on Wed Dec 25, 2013 6:49 am

Brahim wrote:Mint-blue2 is about the section i want to edit :shock: Which part do I have edit :D I've updated my theme and added a cinnamon theme to it here http://gnome-look.org/content/show.php?content=162478


I downloaded your updated theme. Try making these edits:

In folder gtk-3.0 > settings.ini
change nbg_color:#d6d6d6 to nbg_color:#a6c37d

In folder gtk-2.0 > gtkrc (double-click the file, click Display)
change nbg_color:#D6D6D6 to nbg_color:#a6c37d

In folder gtk-2.0 > Bars
edit image files menubarbg.png and toolbarbg.png to your green color #a6c37d in gimp
(shown in tutorial part 2 - pages 6,7,8 - that's the way I did it anyway :wink: )

Logout/in

Should then look like this:

Brahim's-Mint-X.png
Image
Desktop: C2D E6400 / Asus P5LD2SE / 2GB ram / Asus GeForce 210 / 320GB (WinXP) & 1TB (Mint - various)
Laptop: Asus A53E-SX1455V - i5 2450M / 4GB ram / Intel HD 3000 / 500GB (Win7/Mint 17 Cinnamon)
caribriz
Level 5
Level 5
 
Posts: 891
Joined: Mon Nov 28, 2011 7:43 am

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Wed Dec 25, 2013 7:32 am

caribriz wrote:
Brahim wrote:Mint-blue2 is about the section i want to edit :shock: Which part do I have edit :D I've updated my theme and added a cinnamon theme to it here http://gnome-look.org/content/show.php?content=162478


I downloaded your updated theme. Try making these edits:

In folder gtk-3.0 > settings.ini
change nbg_color:#d6d6d6 to nbg_color:#a6c37d

In folder gtk-2.0 > gtkrc (double-click the file, click Display)
change nbg_color:#D6D6D6 to nbg_color:#a6c37d

In folder gtk-2.0 > Bars
edit image files menubarbg.png and toolbarbg.png to your green color #a6c37d in gimp
(shown in tutorial part 2 - pages 6,7,8 - that's the way I did it anyway :wink: )

Logout/in

Should then look like this:

Brahim's-Mint-X.png


Man maaaaaaaaaaaaaaaaaaaaany thanks :D :D :D :D :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Wed Dec 25, 2013 7:46 am

I have renamed and uploaded the theme here http://gnome-look.org/content/show.php?content=162478

Looking great men :D :D :D :D :D :D

THANK YOU caribriz, hexdef101 AND austin.texas :D :D I gave you credit here http://gnome-look.org/content/show.php?content=162478 and here http://forums.linuxmint.com/viewtopic.php?f=211&t=154050&p=800304#p800304

Image Image Image Image Image Image Image Image

What do you think of it guys :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: How to customize Mint-X GTK theme colours

Postby Zorba on Wed Dec 25, 2013 8:16 am

Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2307
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Linux Mint is funded by ads and donations.
 
Next

Return to Themes, Icons, & Wallpaper

Who is online

Users browsing this forum: No registered users and 0 guests