[Solved] Font Shadows

[JerryF]

I think if found the file you'll need to edit.

It all depends on your theme that you're using. For example if you're using Mint X Grey theme, you'd go to /usr/share/themes/Mint-X-Grey/gtk-3.0

Try editing the file named gtk-main-common.css The first section at the top says "Desktop Items". If memory serves, that's the one. You may need to add some things to do what you want.

Hope this helps.

[murray]

Good point JerryF! Mumrik93, make sure you're editing the correct .css file if you're using a theme. Also, you may well need to restart the desktop in order to see the changes. According to https://www.makeuseof.com/tag/spice-up- ... -its-easy/, which has lots of useful info so might be worthing have a read of, you can refresh the desktop by pressing Alt+F2 to bring up the Run dialog, typing r and pressing Enter.

[Mumrik93]

I think if found the file you'll need to edit.

It all depends on your theme that you're using. For example if you're using Mint X Grey theme, you'd go to /usr/share/themes/Mint-X-Grey/gtk-3.0

Try editing the file named gtk-main-common.css The first section at the top says "Desktop Items". If memory serves, that's the one. You may need to add some things to do what you want.

Hope this helps.

I am in fact using the Adapta-Eta theme and i found it in my 'Home' folder (hidden of course) and i entered the Cinnamon.css there, but now i'm instead stuck whereas i'm not sure which settinh to change, there are a lot of 'text-shadow' settings to change, but i cant seem to find any that's named "Desktop", I've narrowed them down to;

• .keyboard-key { min-height: 26.66; min-width: 26.66; border-radius: 2px; border: none; background-color: #222d32; color: rgba(207, 216, 220, 0.87); box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none;

• .menu-favorites-button:hover { border-color: transparent; color: #263238; background-color: rgba(38, 50, 56, 0.12); box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; }

• .applet-box { color: #CFD8DC; text-shadow: none; }

• .applet-icon:hover, .applet-box:hover > .applet-icon, .applet-box:checked > .applet-icon { color: #FFFFFF; text-shadow: none; }

• .workspace-osd { font-size: 30pt; padding: 0.2em 0.8em; border-radius: 2px; background-color: rgba(34, 45, 50, 0.9); color: #CFD8DC; box-shadow: 0 10px 14px rgba(0, 0, 0, 0.44); font-weight: 400; text-shadow: none; }

Could any of these be the right one? I haven't tried any of them yet.

[JerryF]

I am in fact using the Adapta-Eta theme and i found in in my 'Home' folder (hidden of course) and i entered the Cinnamon.css there, but now i'm instead stuck whereas i'm not sure which settinh to change, there are a lot of 'text-shadow' settings to change, but i cant seem to find any that's named "Desktop", I've narrowed them down to;

• .keyboard-key { min-height: 26.66; min-width: 26.66; border-radius: 2px; border: none; background-color: #222d32; color: rgba(207, 216, 220, 0.87); box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none;

• .menu-favorites-button:hover { border-color: transparent; color: #263238; background-color: rgba(38, 50, 56, 0.12); box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; }

• .applet-box { color: #CFD8DC; text-shadow: none; }

• .applet-icon:hover, .applet-box:hover > .applet-icon, .applet-box:checked > .applet-icon { color: #FFFFFF; text-shadow: none; }

• .workspace-osd { font-size: 30pt; padding: 0.2em 0.8em; border-radius: 2px; background-color: rgba(34, 45, 50, 0.9); color: #CFD8DC; box-shadow: 0 10px 14px rgba(0, 0, 0, 0.44); font-weight: 400; text-shadow: none; }

Could any of these be the right one? I haven't tried any of them yet.

From what I remember, cinnamon.css isn't the one you want for changing the desktop icons and fonts.

Try the gtk-3.0 folder or if there is one, the gtk-3.22 folder and look for the file gtk.css

[Mumrik93]

From what I remember, cinnamon.css isn't the one you want for changing the desktop icons and fonts.

Try the gtk-3.0 folder or if there is one, the gtk-3.22 folder and look for the file gtk.css

I found a GTK-3.22 folder and a .css file in it, and it this one seemes a bit easier, only seven entries where 'text-shadow' is mentioned;

1.)

• * { padding: 0; background-clip: padding-box; outline-style: solid; outline-width: 2px; outline-color: alpha(currentColor, 0.2); outline-offset: -0.21rem; -gtk-outline-radius: 2px; -gtk-secondary-caret-color: #00BCD4; text-shadow: none; -gtk-icon-shadow: none; }

2.)

• .menu menuitem, .context-menu menuitem, menu menuitem { min-height: 1.05rem; min-width: 2.1rem; padding: 0.28rem 0.42rem 0.35rem; color: rgba(38, 50, 56, 0.87); font: initial; text-shadow: none; transition: none; }

3.)

• .nautilus-desktop.nautilus-canvas-item, .nemo-desktop.nemo-canvas-item, .nautilus-desktop.nemo-canvas-item { color: #FFFFFF; text-shadow: 0 0 2px rgba(0, 0, 0, 0.26), 0 1px 2px rgba(0, 0, 0, 0.26), 0 2px 3px rgba(0, 0, 0, 0.32); }

4.)

• .nautilus-desktop.nautilus-canvas-item:selected, .nemo-desktop.nemo-canvas-item:selected, .nautilus-desktop.nemo-canvas-item:selected { text-shadow: none; }

5.)

• .lightdm-gtk-greeter #panel_window { background-image: image(#13191c); color: #CFD8DC; box-shadow: none; font-weight: 700; text-shadow: none; }

6.)

• .lightdm-gtk-greeter #panel_window menubar menu menuitem, window.background.lightdm window.background.popup > menu menuitem { padding: 0.28rem 0.42rem 0.35rem; font-weight: 400; text-shadow: none; }

7.)

• window.background.lightdm menubar { padding-top: 2.5px; font-weight: 700; text-shadow: none; }

I guess the last three ones can be counted out since they are connected to LightDM.. May it be options 3-4? Or maybe the first one?

[JerryF]

I found my thread regarding changing font colors:

viewtopic.php?f=208&t=245198

Coldboot's answer was what worked for me then.

That was for version 18, so I'm not sure if it will work.

[Mumrik93]

We're getting closer! The code make me able to change the font color, but that's sadly all I made the font color white again and then increased the text-shadow up to 5px, but it made no difference in the desktop.

[JerryF]

That's as far as I can take you. Some googling may be in your immediate future.

[Mumrik93]

That's as far as I can take you. Some googling may be in your immediate future.

Sadly most likely, i made some alteration to the code;

Code: Select all

.nemo-desktop.nemo-canvas-item {
color: #FFFFFF;
text-shadow: 10px 10px rgba(0, 0, 0, 0.26)@desktop_item_text_shadow;
}

I increased the shadow to 10px but it still left no viable change (the original code you sent me to Did make my font red before i altered it, so i know the file works!) I'm a lot closer to my goal so thank you for all the help! Really appreciate it!

[MrEen]

That's as far as I can take you. Some googling may be in your immediate future.

Sadly most likely, i made some alteration to the code;

Code: Select all

.nemo-desktop.nemo-canvas-item {
color: #FFFFFF;
text-shadow: 10px 10px rgba(0, 0, 0, 0.26)@desktop_item_text_shadow;
}

I increased the shadow to 10px but it still left no viable change (the original code you sent me to Did make my font red before i altered it, so i know the file works!) I'm a lot closer to my goal so thank you for all the help! Really appreciate it!

Hi Mumrik93. I'm not sure if this'll help, but why not try deleting the code you've added, and changing the code you already had here:

3.)

• .nautilus-desktop.nautilus-canvas-item, .nemo-desktop.nemo-canvas-item, .nautilus-desktop.nemo-canvas-item { color: #FFFFFF; text-shadow: 0 0 2px rgba(0, 0, 0, 0.26), 0 1px 2px rgba(0, 0, 0, 0.26), 0 2px 3px rgba(0, 0, 0, 0.32); }

Just want to make sure they're not conflicting with each other

I don't know how to work with this stuff, but maybe try increasing by 1 everything with px after it for starters?

EDIT: I've never worked with css, but I'd guess the middle section is for nemo specifically: 0 1px 2px rgba(0, 0, 0, 0.26). I'd try changing just that section and see what happens.

[Mumrik93]

That's as far as I can take you. Some googling may be in your immediate future.

Sadly most likely, i made some alteration to the code;

Code: Select all

.nemo-desktop.nemo-canvas-item {
color: #FFFFFF;
text-shadow: 10px 10px rgba(0, 0, 0, 0.26)@desktop_item_text_shadow;
}

I increased the shadow to 10px but it still left no viable change (the original code you sent me to Did make my font red before i altered it, so i know the file works!) I'm a lot closer to my goal so thank you for all the help! Really appreciate it!

Hi Mumrik93. I'm not sure if this'll help, but why not try deleting the code you've added, and changing the code you already had here:

3.)

• .nautilus-desktop.nautilus-canvas-item, .nemo-desktop.nemo-canvas-item, .nautilus-desktop.nemo-canvas-item { color: #FFFFFF; text-shadow: 0 0 2px rgba(0, 0, 0, 0.26), 0 1px 2px rgba(0, 0, 0, 0.26), 0 2px 3px rgba(0, 0, 0, 0.32); }

Just want to make sure they're not conflicting with each other

I don't know how to work with this stuff, but maybe try increasing by 1 everything with px after it for starters?

EDIT: I've never worked with css, but I'd guess the middle section is for nemo specifically: 0 1px 2px rgba(0, 0, 0, 0.26). I'd try changing just that section and see what happens.

I did try that, but changing in the original code didnt cause any differences, hence why i tried using the new code.. sadly in terms of text-shadows, that didnt cause any changes either.

[MrEen]

Sorry. My only other suggestion is look in gtk* folders inside the ~/.config folder to see if there's a gtk.css file there that may be conflicting. If a gtk.css file exists in one of those folders, try renaming it to gtk.css.bak then see if your other edits work after restarting nemo.

[smurphos]

Step by step and some example ~/.config/gtk-3.0/gtk.css contents here...

viewtopic.php?p=1599945#p1599945

[Mumrik93]

So i asked this question in the "Suggestion" thread, hoping that maybe this could be a future feature;
viewtopic.php?f=29&t=285306&p=1600045#p1600045

And it turns out that someone who was more well versed in this subject saw this and answered!

It's not hard. And it does actually still work - I just wasn't taking the right steps to get the over-ride to take in testing. Screens are from Cinnamon 4.0.9 / Mint 19.1

In all cases you need a file in your home folder called ~/.config/gtk-3.0/gtk.css with the following content and save.

One saved press Alt-F2 to bring up the run dialog. Enter pkill nemo-desktop. Press Alt-F2 again and enter nemo-desktop. Repeat this after any edits.

Example 1

Code: Select all

.nemo-desktop.nemo-canvas-item {
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

Example 2

Code: Select all

.nemo-desktop.nemo-canvas-item {
    color: #fff;
    text-shadow: 2px 2px 3px #000;
}

Example 3

Code: Select all

.nemo-desktop.nemo-canvas-item {
    color: #fff;
    text-shadow: 0px 0px 2px #000, 0px 0px 2px #000;
}

And

For your chosen Controls/GTK theme theme to have more control over the hover and selected effects you can also try this content for ~/.config/gtk-3.0/gtk.css (buildng on example 3 above).

Code: Select all

.nemo-desktop.nemo-canvas-item {
    color: #fff;
    text-shadow: 0px 0px 2px #000, 0px 0px 2px #000;
}
.nemo-desktop.nemo-canvas-item:hover {
    background-color: alpha(@theme_selected_bg_color, 0.33);
    background-image: none;
}
.nemo-desktop.nemo-canvas-item:selected {
    background-color: @theme_selected_bg_color;
    background-image: none;
    color: @theme_selected_fg_color;
    text-shadow: none;
}

Mint-Y theme - Hover....


Selected

So yeah, i tried it out and it works! I got more apparent text-shadows on my desktop, i can use really bright backgrounds and still read what the icons are without straining my eyes. It works!
Thanks for all the help people, now my Cinnamon desktop looks perfect!

[Moem]

That is great Mumrik, now you can finally mark this topic as solved!