CSS improvements I made to XFCE Notes

sadfa · 8 April 2021 19:28

Hi,

I guess you can say I made a custom theme for xfce4-notes

Before applying it:

After applying it:

Unfortunately, there doesn’t seem to be a method to apply these changes locally, and so I make changes to the icon files and css in /usr/share/xfce4-notes-plugin/

The following changes are reversible, they also might not persist after upgrades so you may need to run these commands after an upgrade. It assumes you have Papirus icons installed too.

Instructions

Step 1 ) Change Font

You can do this in the settings provided in the application. I chose ‘Noto Sans Regular 10’

Step 2 ) Save patch

In whatever folder, make a file css-for-xfce4-notes.patch and place the following patch content into it:

Index: /usr/share/xfce4-notes-plugin/gtk-3.0/gtk-main.css	2021-04-07 14:00:03.512765114 +0000
Index: /usr/share/xfce4-notes-plugin/gtk-3.0/gtk-main.css	2021-04-07 17:04:44.694806281 +0000
@@ -13,29 +13,26 @@
 @define-color notebook_selected_tab_color shade (@theme_base_color, 0.9);
 
 * {
+	margin:1px;
 	border-width: 0px;
 }
 
 /* window and frame */
 window {
-	background-image: linear-gradient(to bottom,
-	                                  shade (@theme_base_color, 0.8),
-	                                  shade (@theme_base_color, 0.95) 87px);
+	background: @theme_base_color;
 }
 
 window frame {
-	padding: 1px 2px 4px 2px;
-	border: 1px solid shade (@theme_base_color, 0.7);
+	padding: 2px;
 }
 
 /* icon buttons in window title bar */
 window widget#notes-icon-button {
-	color: black;
+	color: #4d4d4d;
 	background-color: transparent;
 }
 window widget#notes-icon-button:active {
 	color: darker (@theme_fg_color);
-	text-shadow: 1px 1px lighter (@theme_bg_color);
 }
 window widget#notes-icon-button:disabled {
 	color: shade (@insensitive_fg_color, 1.2);
@@ -126,15 +123,13 @@
 }
 
 textview > text {
-	color: @theme_text_color;
-	background-image: linear-gradient(to bottom,
-	                                  shade (@theme_bg_color, 1.2),
-	                                  shade (@theme_bg_color, 1.3) 20em);
+	color: #4d4d4d;
+	background: @theme_base_color;
 }
 
 textview > text > selection {
 	color: @theme_selected_fg_color;
-	background-color: @theme_selected_bg_color;
+	background-color: #2eb398; /* for default sea theme (azul theme: #3498db, aliz:#f0544c) */
 }
 
 scrollbar {

Step 3 ) Apply patch and use Papirus icons

Run the following in the terminal:

cd /usr/share/xfce4-notes-plugin/pixmaps/
## Rename
sudo mv notes-menu.png notes-menu--BEFORE.png
sudo mv notes-menu-active.png notes-menu-active--BEFORE.png
## Create a symlink to the correct icon
sudo ln -s /usr/share/icons/Papirus/16x16/apps/accessories-notes.svg notes-menu.png
sudo ln -s /usr/share/icons/Papirus/16x16/apps/accessories-notes.svg notes-menu-active.png
cd ../gtk-3.0/

## Patch the file saving a (-b)ackup of the original. Change path/to/ to the path you stored the patch file.
sudo patch -b -i  ~/path/to/css-for-xfce4-notes.patch gtk-main.css

## Get the PID of xfce4-notes...
ps -ef | grep 'xfce4-notes\|PID'
## ...and kill it (replace XXX with the PID)
kill XXX
## Reopen xfce4-notes

Step 4 ) After an update you may be compelled to add the above to a bash script.

You’ll just need to use a rewriting tool like sed to automatically extract the PID, if you want to automate that.

Maybe you like it? I definitely prefer it, anyway.

stargazer · 9 April 2021 02:18

I’m still learning the XFCE way, but even in KDE if a user wanted to modify/tweak GTK applications, the changes were written to $HOME/.config/gtk-3.0/gtk.css.

imho, the difficult part is knowning what the CSS nodes, ids or classes are for an app. I don’t know if there is a better way, but I use something like GTK_DEBUG=interactive xfce4-notes and review the Objects. What’s nice about GTK_DEBUG is that you can test the CSS by clicking on the CSS button at the top.

Also these locations might be helpful: $HOME/.config/xfce4/xfce4-notes.css & xfce4-notes.rc

sadfa · 9 April 2021 14:28

Thanks @stargazer,

I didn’t know the ~/.config/gtk-3.0/gtk.css could do the job. Using your instructions I tried the following CSS, which should produce bad but obviously results, but nothing happened:

/* Notes application */
#notes-window * { margin:20px; }
/* window and frame (flat-style) */
#notes-window window { background-color: blue; }

Maybe you can see what I’m doing wrong.

Those files cannot be changed. If you change them your efforts will be overwritten! ToZ looked at the code and his findings are here.

stargazer · 11 April 2021 00:19

As I mentioned, I’m still learning the XFCE-way and was very interested in your project. But, imho, changing a system file should truly be a rare event. I did read some XFCE bug reports, and XFCE said change the file.

I got the css to work in the user’s $HOME/.config/gtk-3.0/gtk.css. I’m not unfamilar with gtk.css, because I used it all the time when I was a KDE user

At first, xfce4-notes did not appear to read/apply the user’s gtk.css. However, I’m not sure if this is by design or a remnant from converting from gtk2 to gtk3 , but as of today, the process below worked and was repeatable.

If you add a property to XFCE settings, xfce4-notes will use the user’s gtk.css.

# Add
xfconf-query -c xfce4-panel -p /plugins/notes/global/background-color -t string -s "ff0000" --create

# Reset
xfconf-query -c xfce4-panel -p /plugins/notes/global/background-color -r

You can see this value in the XFCE Settings Manager > Settings Editor and drill-down the xfce4-panel channel.

Two files will be updated

$HOME/.config/xfce4/xfce4-notes.css
$HOME/.config/xfce4/xfconf/xfce-perchannel-xml/xfce4-panel.xml

I used the GTK Inspector to find the appropriate selectors and tested the CSS in the GTK Inspector. Hit the enable/disable button if you don’t see the affects of your CSS. It didn’t work in the user’s gtk.css until I did the above. I was actually going down another path when I came across this. imho, this seems a little nonstandard and I suspect it could be changed in a future release. I did have to logoff/logon to get the gtk.css to be read and applied. I’ve seen some tricks that user’s use to make the css dynamic, but I didn’t pursue any of those.

sadfa · 11 April 2021 04:59

Nice, thanks! Will look into doing this, because I actually have the CSS “ready” to go here. I put ‘ready’ in inverted commas because I’m not sure if gtk.css handles @define.

/* better for ui elements (not black, not too light) */
@define-color theme_sadfa__text_color #4d4d4d; 

/* space around elements */
#notes-window * { margin:1px; }

/* window and frame (flat-style) */
#notes-window window { background: @theme_base_color; }


/* consistant padding and not distinct border */
#notes-window window frame {
	padding: 2px;
	border: none;
}

/* icon buttons in window title bar (not black, no glow) */
#notes-window window widget#notes-icon-button {
	color: @theme_sadfa__text_color;
}
#notes-window window widget#notes-icon-button:active {
	text-shadow: none;
}

/* text as above, and no white background */
#notes-window textview > text {
	color: @theme_sadfa__text_color;
	background: @theme_base_color;
}

/* match text selection to your theme */
#notes-window textview > text > selection {
	background-color: #2eb398; /* for default sea theme (azul theme: #3498db, aliz:#f0544c) */
}

I just don’t have a chance to do this now.

Gnisha · 29 July 2021 05:21

Sorry to bump and old thread, but I came across this while I was searching for another issue I’m having with XFCE4-Notes.

I use a darker background, and any notes that have hyperlinks in them turn blue. I’m trying to figure out how I can change the font color of links.