Zim-desktop-wiki: Option to Change background and font color

[Nick222]

How user can change background and font color Zim 0.70 ?

[jaap-karssenberg]

See https://zim-wiki.org/manual/Help/Config_Files.html

Probably you need to use the CSS file in this case

On Wed, Apr 3, 2019 at 3:28 PM Nick222 [e-mail] wrote:

How user can change background and font color Zim 0.70 ?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/zim-desktop-wiki/zim-desktop-wiki/issues/755, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABMMHnIMm8IQ9mDcasj62A6Mqa4ROx1bks5vdKyEgaJpZM4cag-0
.

[Nick222]

It is not simple, as I see...

Can You create options for it ?

[jaap-karssenberg]

Anything is possible, but my personal time is limited. If anyone wants to
work on a good patch I'm more than willing to merge it.

On Wed, Apr 3, 2019 at 3:36 PM Nick222 [e-mail] wrote:

It is not simple, as I see...

Can You create options for it ?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/zim-desktop-wiki/zim-desktop-wiki/issues/755#issuecomment-479492309,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABMMHq7JNJ8wIJw4YQkgQfcsqrLt4Lwfks5vdK5vgaJpZM4cag-0
.

[Nick222]

But why in ~/.config/zim/style.conf

[TextView]
background=#cccccc

do not work ?

[jaap-karssenberg]

The reason that that doesn't work is that the "Styles" config only controls gtk.TextTag style. The background color and font color are controlled by the Gtk theme, so it is a different type of configuration.

[vivasteve]

If you are using zim on linux you can change the gtk theme - this is now easier than before v.0.70 since Jaap has so spent so much time refactoring zim to use gtk-3 (much appreciated!)

gtk3 settings are in ~/.config/gtk-3.0
you can change the theme with gtk-theme-name
available themes are in /usr/share/themes/
check in each theme dir that a gtk-3.0 dir is present - then those themes are avail for gtk-3.0

not sure how this might work in windows ...

[Nick222]

vivasteve
But I want to change background colour only in Zim - not in all software...

[sojusnik]

@Nick222 You can try the TextView plugin.

[vivasteve]

But I want to change background colour only in Zim - not in all software...

I see your point - for me it is ok because zim is the only gtk app I use!

[lucvtzel]

vivasteve
But I want to change background colour only in Zim - not in all software...

You can do it by creating a ~/.config/gtk-3.0/gtk.css file like this (tested with GTK3.18-Ubuntu16.04):

#zim-pageview {
    background-color: #2E3436;
    color : #FFFFFF;
    /* font  : "Ubuntu Mono"; NO !: the right place for the font setting is in '~/.config/zim/style.conf' */
}

#zim-pageview:selected {
  background-color: #6699cc;
}

#zim-pageindex {
    color : #FFFFFF;
    background-color : #2E3436;
}

#zim-tags-tagcloud {
    background-color : #2E3436;
}

#zim-tags-tagcloud GtkLabel {
    color: #EDD400;
}

[Nick222]

Very good! :)
But where can I get all used by Zim style`s name (zim-pageview and so on)?

[lucvtzel]

jaap-karssenberg told us to see in the manual (see section Gtk configuration in the 'Config Files' page or at https://zim-wiki.org/manual/Help/Config_Files.html) :

To identify these in the code, search for use of widget_set_css(...) and widget.set_name(...). The name used will be accessible from the CSS config as an "id".

For instance, if we examine the code in the pageview.py file we will find this line in the constructor:

self.set_name('zim-pageview')

We can also see all the ID names from the GTK Inspector. These links can be helpful:

• How do I open GTK Inspector?
• GTK+ CSS Overview
• Using the CSS file format

Below a way to explore the code and find the use of widget_set_css(...) and widget.set_name(...):

$ grep -rn -e "\(\.set_name(\s*['\"]zim\)" && grep -rn -e "\(\widget_set_css(.*,\s\+['\"]\)"

zim/gui/pageview.py:3524:       self.set_name('zim-pageview')
zim/gui/widgets.py:2072:        self.set_name('zim-sidepane')
zim/plugins/pathbar.py:477:     self.set_name('zim-pathbar')
zim/plugins/pageindex/__init__.py:361:      self.set_name('zim-pageindex')
zim/plugins/tags.py:347:        self.set_name('zim-tags-tagcloud')
zim/gui/insertedobjects.py:58:      widget_set_css(self._vbox, 'zim-inserted-object', 'border: 1px solid #ccc')
zim/gui/insertedobjects.py:70:      widget_set_css(widget, 'zim-inserted-object-head', 'border-bottom: 1px solid #ccc')
zim/gui/widgets.py:750: widget_set_css(button, 'zim-statusbar-button',  '''
zim/plugins/pathbar.py:189:     widget_set_css(child, 'zim-pathbar-path-button', 'padding: 2px 6px 2px 6px;')
zim/plugins/pathbar.py:467:     widget_set_css(self, 'zim-pathbar-scroll-button', 'padding: 2px 2px 2px 2px;')
zim/plugins/tableofcontents.py:484:     widget_set_css(self, 'zim-toc-widget', 'border: 1px solid @fg_color')
zim/plugins/tableofcontents.py:485:     widget_set_css(self.head, 'zim-toc-head', 'border-bottom: 1px solid @fg_color')
zim/plugins/distractionfree.py:130:     #widget_set_css(self._maxwidth, 'zim-distractionfree-bin',

[Foxblade]

@Nick222 You can try the TextView plugin.

I installed the plugin to the correct folder but don't seem to see it appear in the plugins list in order to be enabled. Any ideas?

Plugins window after placing the files in the plugins folder

[Nick222]

Any ideas?

There are two versions of this plugin - for Zim 0.68 and for Zim 0.71 (downloads from same page)

[asdfqy]

You can do it by creating a ~/.config/gtk-3.0/gtk.css file like this (tested with _GTK3.18-Ubuntu16.04_):

#zim-pageview {
    background-color: #2E3436;
    color : #FFFFFF;
    font  : "Ubuntu Mono";
}

#zim-pageview:selected {
  background-color: #6699cc;
}

#zim-pageindex {
    color : #FFFFFF;
    font : "Ubuntu Mono";
    background-color : #2E3436;
}

#zim-tags-tagcloud {
    background-color : #2E3436;
}

#zim-tags-tagcloud GtkLabel {
    color: #EDD400;
}

somehow for me the syntax had to be a little bit different
the hint to use selection is from https://developer.gnome.org/gtk3/stable/GtkTextView.html
the usage of the stars is from trial-and-error .. maybe someone can explain on this

#zim-pageview* {
    background-color: #2F4F4F;
    color : #8FBABE;
}
#zim-pageview selection {
  background-color: #6699cc;
  color: #FFFFFF;
}
#zim-sidepane*  {
    background-color: #2F4F4F;
    color : #8FBABE;
}
#zim-sidepane*:selected {
  background-color: #6699cc;
}

[lucvtzel]

This commit 547f2750fba... from arigit is also interesting.
I would add that to launch the GTK+ Inspector, we can use the Control-Shift-I or Control-Shift-D keyboard shortcuts as it it is mentioned in the GTK documentation.