Changing the theme colors

All Gurus once were Newbies
Forum rules
There are no such things as "stupid" questions. However if you think your question is a bit stupid, then this is the right place for you to post it. Please stick to easy to-the-point questions that you feel people can answer fast. For long and complicated questions prefer the other forums within the support section.
Before you post please read how to get help
Post Reply
efest
Level 1
Level 1
Posts: 8
Joined: Sat Nov 02, 2013 3:15 pm

Changing the theme colors

Post by efest » Sat Nov 02, 2013 3:18 pm

I wonder if it is possible to change the theme colors?
I chose the theme ambiance minty, but just wanted to change the shadow color (orange to another color)!

Attached is a picture of what I want to change!
http://s22.postimg.org/sdpwwq8sx/Captura_de_ecra_de_2013_11_02_17_06_47.png

I have Linux Mint 15 Olivia (Cinnamon)

User avatar
kyphi
Level 9
Level 9
Posts: 2627
Joined: Sat Jul 09, 2011 1:14 am
Location: The Hunter Valley, Australia

Re: Changing the theme colors

Post by kyphi » Sat Nov 02, 2013 6:27 pm

It is a css (cascading style sheet) file that you have to alter in order to change the highlighter colour. In your Home directory, press Ctrl+h to make your hidden files visible and locate the file .themes. Within you will find the stylesheet file that governs the behaviour and colours of the theme. Use the GIMP program to identify the colour. Locate the appropriate entry in the stylesheet and change to suit. Save before exit.

I suggest that before you start making any alterations that you save a copy of the theme so that you can restore it if things go awry. Good Luck!
Linux Mint 19.2 Cinnamon - 64bit

efest
Level 1
Level 1
Posts: 8
Joined: Sat Nov 02, 2013 3:15 pm

Re: Changing the theme colors

Post by efest » Sat Nov 02, 2013 6:55 pm

that is the file "cinnamon.css or gdm.css" ?

anyone know where to change?

efest
Level 1
Level 1
Posts: 8
Joined: Sat Nov 02, 2013 3:15 pm

Re: Changing the theme colors

Post by efest » Tue Nov 05, 2013 9:44 am

can someone help me?

caribriz
Level 5
Level 5
Posts: 938
Joined: Mon Nov 28, 2011 7:43 am

Re: Changing the theme colors

Post by caribriz » Tue Nov 05, 2013 11:56 pm

Hi efest,

I'm experimenting with themes myself (I'm no expert) - this is just what I did - try it if you like.

As kyphi has said, it's a good idea to work on a copy of the theme ...

Go to /home/your-user-name/.themes (click View > Show hidden files)
Click Ambiance Minty folder
Click Edit > Copy
Click Edit > Paste
Rename copy Ambiance-Minty-2

Open Ambiance-Minty-2 > cinnamon > cinnamon.css
Scroll down the file a little way to the section

Code: Select all

StScrollBar StButton#vhandle:hover
{
    background-gradient-direction: vertical;
    background-gradient-start:#f58254;
    background-gradient-end: #ea703f;
    box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.3);
    border: 1px solid rgba(95,110,75,0.2);
}
Those are the colors you want to change throughout the file
#f58254 (light orange color)
#ea703f (darker orange color)

I changed it to blue, so used
#648fb3 for the lighter color
#446bae for the darker color
(Of course, change these to your choice.)

Click Search > Replace

In Search for: field, enter
#f58254

In Replace with:
#648fb3

Click Replace All

Do the same for the next color:
Search for: #ea703f
Replace with: #446bae
Click Replace All

Save the file > Close

Go to System Settings > Themes > choose Ambiance-Minty-2 > Apply theme

This should replace most of the orange color you wanted to replace in the theme.
LM15 Cinnamon Ambiance Minty edited.png
It doesn't change the color of the hot corner "ripple" or of the arrows (when you hover on them) in the calendar.
If you wanted to go further and change them, you would have to edit the image files in ~/.themes/Ambiance-Minty-2/cinnamon, in gimp.

Again, this is what I did - there may well be an easier way :lol:

Right-click corner-ripple-ltr.png > Open with GIMP Image Editor
Render Scalable Vector Graphics window opens, just click ok (don't know why this happens - it's a .png file ?, but anyway ...)
In the menubar, click Colors > Colourise ...

For my example, I moved the Hue slider from 180 to 209
Click ok
Click File > Overwrite corner-ripple-ltr.png > Close the file > click Close without Saving

Do the same steps for other image - corner-ripple-rtl.png

Restart cinnamon (press Alt+F2, press r, press enter) or logout/in to see the change in hot corner.

For the arrows in the calendar (hover), so you also need to do similar for the images:
calendar-arrow-left-hover.svg and calendar-arrow-right-hover.svg

Right-click calendar-arrow-left-hover.svg > click Open with > GIMP Image Editor
(note: these files should open with the Render Scalable Vector Graphics window as they are .svg files but they don't ????)
Again, click Colors > Colorise ... change Hue to 209
Click ok

This time (because GIMP can't save .svg files you need to do a workaround) -
click File > Export to (should already be in folder ~/.themes/Ambiance-Minty-2/cinnamon)
in Name: change end of name from .svg to .png so it reads
calendar-arrow-left-hover.png
click Export > again click Export
click Close > click Close without saving

Do the same steps with image: calendar-arrow-right-hover.svg

Close GIMP

Go back to ~/.themes/Ambiance-Minty-2/cinnamon
Rename the images:
calendar-arrow-left-hover.svg to calendar-arrow-left-hover-old.svg
and
calendar-arrow-right-hover.svg to calendar-arrow-right-hover-old.svg

Then, rename
calendar-arrow-left-hover.png to calendar-arrow-left-hover.svg
and
calendar-arrow-right-hover.png to calendar-arrow-right-hover.svg

It's a messy workaround, but the image names have to correspond to what's in the file cinnamon.css.

Restart cinnamon to see the changes.

If there are any more colors you want to change - you'll have to find and alter them similarly - that's all I changed.

EDIT: Note that the above is specific to the Ambiance Minty theme - other themes may be different.
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 18.3 Cinnamon)

choochooal
Level 1
Level 1
Posts: 21
Joined: Tue Jun 28, 2011 7:54 pm

Re: Changing the theme colors

Post by choochooal » Fri Dec 13, 2013 1:10 pm

Great ideas. I'm running mint 16 Cinnamon with Ambiance Minty and have found the items I'm looking for but am having issues with the desktop icon colors. Not so much the white normal display but when you try to edit the desktop icon text, it turns black in a transparent box. So if you have a dark wallpaper its impossible. Goes along with when you hover over panel items, the description pops up in black on transparent.

I've fixed the translucent to opaque in panel and menu and a few other minor issues, but these two items elude me. Any ideas.

caribriz
Level 5
Level 5
Posts: 938
Joined: Mon Nov 28, 2011 7:43 am

Re: Changing the theme colors

Post by caribriz » Sat Dec 14, 2013 1:23 am

choochooal wrote:Great ideas. I'm running mint 16 Cinnamon with Ambiance Minty and have found the items I'm looking for but am having issues with the desktop icon colors. Not so much the white normal display but when you try to edit the desktop icon text, it turns black in a transparent box. So if you have a dark wallpaper its impossible. Goes along with when you hover over panel items, the description pops up in black on transparent.

I've fixed the translucent to opaque in panel and menu and a few other minor issues, but these two items elude me. Any ideas.
Hi choochooal - I've responded to this in your other thread:
[url]http://forums.linuxmint.com/viewtopic.php?f=90&t=152878&p=795828#p795815[/url]
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 18.3 Cinnamon)

Post Reply

Return to “Newbie Questions”