[Share Experiences] 自己动手做一个苹果味的应用标题栏按钮
Tofloor
poster avatar
delsin
deepin
2022-04-11 03:21
Author

今天写了一贴:分享一种缩小应用标题栏(额头)高度的方法 介绍了缩小deepin/uos上第三方应用的标题栏高度的方法。缩小后,标题栏右侧关闭、还原、最小化三个按钮变得很小看不清楚,不方便点击。于是在网上找到一种把标题栏按钮改成苹果电脑颜色按钮样式的方法,操作了一下,更改成功,在此分享给大家。

————————————

本方法需下载的文件如下:myicons和TXT文件,或者myicons和ini文件,下载链接如下:

图标文件:myicons.zip

txt文本文件:titlebar.zip (提示:里面home字段后面那个delsin要改成你自己的用户名,右下角的属性要跟我配置的一样)

现成ini文件:ini版titlebar.zip (提示:里面home字段后面那个delsin要改成你自己的用户名,右下角的属性要跟我配置的一样)

图示:
截图_选择区域_20230405121839.png

————————————

  • 效果图:

titlebar4.jpg

视频教程:

方法:
1、制作关闭、还原、最小化三个按钮的svg图标:我已经做好,打包放在文章一开头的myicons.zip压缩包里,各位请自取。
2、myicons文件夹随意放在哪个文件夹里,我放在了主目录下.local/share/deepin/themes/deepin文件夹里。

截图_选择区域_20220410192329.jpg

截图_选择区域_20220410193122.jpg

3、用文本编辑器新建一个txt文件,在txt文件里录入以下内容(文件已打包放在文章一开头titlebar.zip压缩包里,各位请自取,height等号后面的数值按自己需求改,数值越小,标题栏越窄;Icon等号后内容请按自己存放svg文件的路径改),并保存退出,然后把该txt文件重命名为titlebar.ini,注意ini是后缀名。如果你看不到后缀名,需要在文件管理器设置里把“重命名时隐藏文件扩展名”前面的勾去掉。

[Active]
height=12

//最小化按钮
minimizeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg
minimizeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg
minimizeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg
minimizeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg
//最大化按钮
maximizeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
maximizeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
maximizeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
maximizeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
//还原按钮
unmaximizeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
unmaximizeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
unmaximizeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
unmaximizeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
//关闭按钮
closeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg
closeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg
closeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg
closeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg

[Inactive]
height=12

minimizeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg
minimizeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg
minimizeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg
minimizeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/minimize-delsin.svg

maximizeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
maximizeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
maximizeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
maximizeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg

unmaximizeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
unmaximizeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
unmaximizeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg
unmaximizeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/maximize-delsin.svg

closeIcon.normal=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg
closeIcon.hover=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg
closeIcon.press=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg
closeIcon.disabled=/home/delsin/.local/share/deepin/themes/deepin/myicons/close-delsin.svg

再次提醒,Icon等号后面的路径要改为你自己存放三个按钮svg图标的路径。

截图_选择区域_20220410201631.jpg

4、把titlebar.ini分别保存在主目录下.local/share/deepin/themes/deepin/light和.local/share/deepin/themes/deepin/dark两个文件下。如果你的.local/share/deepin文件夹里没有themes/deepin/light和有themes/deepin/dark文件夹的话,需要在deepin文件夹里依次新建这三层文件夹。把titlebar.ini保存在light文件夹和dark文件夹即可。

截图_选择区域_20220410163758.jpg

截图_选择区域_20220410164037.jpg

截图_选择区域_20220410165517.jpg

5、注销并重新登录系统。

截图_选择区域_20220410195205.jpg

特别说明:

本方法对系统自带应用,安卓应用无效。

——————2022/4/11更新——————

有朋友反映三个图标位置没对齐。原因是三个图标是我用Inkscape制作的,我第一次用Inkscape这款软件,对这款软件不熟悉,没找到对齐选项,所以就没对齐,三个图标的位置是我肉眼放的,因此他们仨放在一起时就能看出来他们不在一条水平线上。

为了解决这个问题,我重新研究了一下Inkscape,找到对齐选项了,把三个图标都做了居中对齐。修改后的图标已经上传到帖子开头。后面下载的朋友应该不会出现这个问题了。

修改前:

下载.png

修改后:

截图_选择区域_20220411225223.png

———————2022/4/16更新————————

经测试,本帖方法只有开启窗口特效时才会发挥作用。

开启窗口特效方法:控制中心——个性化——通用——窗口特效。

截图_选择区域_20220416100907.png

Reply Favorite View the author
All Replies
1 / 2
To page
sammy-621
deepin
2022-04-11 03:39
#1

为出色的动手能力点赞!感谢分享

Reply View the author
dxm6006
deepin
2022-04-11 04:42
#2

我按楼主帖子的教程,配置了一个,在20.5上没发现效果,还有其他要调整的内容吗?我的配制如下图。

image.png

Reply View the author
dxm6006
deepin
2022-04-11 04:42
#3
It has been deleted!
delsin
deepin
2022-04-11 04:45
#4
dxm6006

我按楼主帖子的教程,配置了一个,在20.5上没发现效果,还有其他要调整的内容吗?我的配制如下图。

image.png

你少了deepin这层文件夹。你认真核对你的文件夹和我图中的文件夹。

Reply View the author
dxm6006
deepin
2022-04-11 04:49
#5
delsin

你少了deepin这层文件夹。你认真核对你的文件夹和我图中的文件夹。

确实是,加上这层文件夹就有效果了,多谢楼主分享

Reply View the author
要讲武德
deepin
2022-04-11 07:30
#6

大额头用户们呼吁三年了。

就是不改。 恶心用户有一手的

Reply View the author
delsin
deepin
2022-04-11 08:00
#7
要讲武德

大额头用户们呼吁三年了。

就是不改。 恶心用户有一手的

大标题栏这个问题,一般不会出现在以下应用:

1、应用商店中遵守统信DTK规范的Linux软件。

大标题栏这个问题,一般出现在以下几种应用上:

1、不遵守统信DTK规范的Linux软件,一般是用户自己从应用商店以外的地方下载linux应用;

2、应用商店中的wine版、安卓版应用;

3、用户自己装的非应用商店的wine版、安卓版软件。

只要上述情形一直存在,标题栏就不会消失,因为使用标题栏那三个按钮的需求一直都要,如果取消标题栏,那三个按钮放哪里?所以本人猜想deepin/uos官方能做的,最多是像本帖一样通过一定方式把标题栏高度变窄一点,三个按钮变小、变显眼一点。

Reply View the author
135******99
deepin
2022-04-13 04:06
#8

图片.png

彩色图标没有出现

Reply View the author
delsin
deepin
2022-04-13 04:23
#9
135******99

图片.png

彩色图标没有出现

TXT文本里路径你都没改,当然不会成功。

delsin是我电脑的用户名。

请严格按照视频步骤做,不要遗漏步骤。

Reply View the author
135******99
deepin
2022-04-14 03:58
#10
It has been deleted!
135******99
deepin
2022-04-14 04:05
#11
delsin

TXT文本里路径你都没改,当然不会成功。

delsin是我电脑的用户名。

请严格按照视频步骤做,不要遗漏步骤。

截图_选择区域_20220413200325.png

谢谢大佬指点,但修改重启后还是不显示彩色图标按钮

Reply View the author
delsin
deepin
2022-04-14 05:16
#12
135******99

截图_选择区域_20220413200325.png

谢谢大佬指点,但修改重启后还是不显示彩色图标按钮

你别告诉我home文件夹以及后面的deepin文件夹,这两个文件夹是你自己新建的?你没发现我的截图里以及二楼的@dxm6006这个用户的截图里,都没这两个文件夹吗?

截图_选择区域_20220413211827.png

你确定你是按照我视频一步一步做的?我视频里可没有新建一个叫home的文件夹,也没有在你新建的home文件夹里再建一个deepin文件夹。

.local这个文件夹就在你的主目录里。

另外,你的用户名叫deepin?

我还是建议你严格按照我的视频做,不要漏步骤,也不要加步骤。

怎么给你解释呢,路径中home/用户名/这两个文件夹,从你的系统盘进去,找home——主目录(这个主目录就相当于你的用户名文件夹),你也可以直接在文件管理器左侧边栏找到主目录。后面的.local/share/deepin/这三个文件夹也是系统自带的,也不需要你自己新建。

我视频中只提及如果没有themes文件夹,需要新建themes文件夹;如果themes文件夹里没有deepin文件夹,需要新建deepin文件夹。我没有说过要新建home/用户名/.local/share/deepin这五个文件夹。

Reply View the author
delsin
deepin
2022-04-14 05:35
#13
It has been deleted!
151******69
deepin
2022-08-28 04:16
#14

好像v23下不起作用

Reply View the author
zhoubin-Chinese
deepin
2022-10-14 23:13
#15

我的图标怎么改不了
image.png
image.png

Reply View the author
delsin
deepin
2022-10-15 02:06
#16
zhoubin-Chinese

我的图标怎么改不了
image.png
image.png

你犯了跟8楼一样的错误,请看9楼解释。

请严格对照视频,一步一步走,不要一楼任何步骤。

Reply View the author
shw
deepin
2022-10-31 06:29
#17

我也是
image.png

Reply View the author
delsin
deepin
2022-10-31 20:26
#18
shw

我也是
image.png

你自己对照帖子和视频找原因吧,我给的方法已经很清楚了。

Reply View the author
强--
deepin
2023-04-04 07:44
#19

大佬 请教下,我这边有什么问题吗。注销后不起作用

image.png

image.png

image.png

Reply View the author
强--
deepin
2023-04-04 07:48
#20
强--

大佬 请教下,我这边有什么问题吗。注销后不起作用

image.png

image.png

image.png

唯一就是你的ini 文件显示的是配置文件样式,我的是文档样式

Reply View the author
1 / 2
To page