dol吧 关注:197,142贴子:1,151,694
  • 19回复贴,共1

[教程] 超简单修改侧边栏、套、温度计、防狼喷雾等图标UI位置.

只看楼主收藏回复

我也是第一次修改,也没看过教程,纯摸索出来的. 因此可能讲的不太专业.
先放效果图:

准备工具 Visual Studio Code


IP属地:河北1楼2025-09-18 19:52回复
    准备工具:
    Visual Studio Code
    任意浏览器
    dol (理论上什么版本都能改 我这里直接下的GOOSE美化整合包)


    IP属地:河北2楼2025-09-18 19:54
    回复
      2025-11-24 14:24:16
      广告
      不感兴趣
      开通SVIP免广告
      1.先把软件改成中文 安装打开VsCode,按Ctrl+Shift+P
      2.点击左上角文件 选打开文件夹 文件夹位置选择存放 "Degrees of Lewdity.html" 的地方. 最好先备份一份


      IP属地:河北3楼2025-09-18 20:19
      收起回复
        赶上直播了


        IP属地:中国香港4楼2025-09-18 20:30
        收起回复
          这里还是先交大家方法吧 过程中会把要改的地方列出来 . 这样可以自己把想改的东西移动到自己想要的位置.就算看不懂也可以直接抄作业.


          IP属地:河北5楼2025-09-18 22:20
          回复
            感谢教程


            IP属地:重庆来自Android客户端7楼2025-09-18 22:26
            回复
              正篇开始 :
              接着3楼
              3.左边资源管理器点击"Degrees of Lewdity.html" 出来一大页代码先不用管(VsCode 目前先这样).
              3.5 (3~5都是在讲方法)觉得太麻烦直接跳到 "6"
              4.打开浏览器(这里用的edge 其他应该也可以) 启动 Degrees of Lewdity.html 随便进个存档 之后按下 F12


              5.我们可以看到修改之后"打开/关闭导航栏"的底框就消失了, 这里是修改"打开/关闭导航栏"底框和边框的颜色.如果还想保留就可以在这里修改它的颜色.
              6.到此为止强调一个重点 !!! 在浏览器中进行修改是没办法保存的,这里用浏览器只是为了方便大家快速找到UI对应的代码,并修改预览. 觉得满意我们就可以回到VsCode中进行修改 ,我们知道了修改什么地方有效可以复制他"#ui-bar-toggle {" 引号不算 ,在VsCode中按 "Ctrl+f" 搜索

              数值自然是"#00000000"
              7.按"Ctrl+s"进行保存 保存好后去浏览器中看看有没有成功.
              第一节课 下课


              IP属地:河北8楼2025-09-18 23:21
              收起回复
                我们可以修改很多地方,不值局限左上角那一块,不过我的教程可能讲不到别的地方,大家搞懂后可以分享一下修改经验。


                IP属地:河北来自Android客户端9楼2025-09-18 23:33
                回复
                  2025-11-24 14:18:16
                  广告
                  不感兴趣
                  开通SVIP免广告
                  下一步我们讲,历史回溯按钮怎么改位置,改颜色。


                  IP属地:河北来自Android客户端10楼2025-09-18 23:35
                  收起回复
                    我们继续 接着8楼
                    8.我们在来改收回侧边栏按钮的位置大小
                    这里就可以突出用浏览器的优势了,我们点0px 用滚轮上下移动 可以看见我们左侧的"收回侧边栏按钮"也在跟着移动.
                    我们可以这样把按钮移动到我们想要的位置,甚至可以放到侧边栏外.如图 位置定在哪里看大家喜好(尽量不要太靠左侧不然可能关闭侧边栏后按钮按不到),楼主习惯原版一样放在右上角,

                    这里不细讲 Padding这个是改按钮框的大小 我这里改的都是三个都是 0.1em 大家看完效果记得回VsCode中改一下保存. (记得加px 如:top: -4px 或 right: 1px )
                    9:历史回溯按钮的颜色和位置, !!! 个人感觉很重要的一项 原版完全看不清,同样我们先右键检查

                    这里下面我添加了 text-shadow 会给文字或图型下面加阴影 可以自己设置距离颜色 .
                    VsCode里保存
                    10 这里我们的"回溯历史前进按钮"还是深灰色,我们试着按下"后退按钮" 你会发现他俩都成了白色(或是你更改的颜色) 表达已经是目前最新的历史了. 我们可以保留这一点,这里我要给它改为浅灰色. 我们右键点击是深灰色的历史前进按钮点检查,找到合适的颜色,记得VsCode里保存.
                    11 移动它位置的代码不是很好找,我怕各位找不到这里推荐直接框里搜"#ui-bar-history特定性:(1,0,0) {" 引号不算 如图修改里面的数字 ,建议改成17em 刚好卡在天气图层上面
                    VsCode里保存


                    IP属地:河北12楼2025-09-19 01:57
                    回复
                      来了!!!这就去下软件准备跟练


                      IP属地:浙江来自iPhone客户端13楼2025-09-19 15:05
                      收起回复
                        来交作业了!!!教程真的非常易读易懂,像我这样零代码基础的小白也能快速上手顺便举一反三把报错图标那个刺眼的大红色给改了,LZ配享太庙你是我的神!!


                        IP属地:浙江14楼2025-09-19 16:49
                        收起回复
                          等晚上有时间,交大家修改套和温度计,喷雾位置也可改,不过原版位置就很合适,这里里就不讲了。


                          IP属地:河北来自Android客户端15楼2025-09-19 17:26
                          回复
                            有大肚子吗


                            IP属地:黑龙江来自Android客户端16楼2025-09-22 10:17
                            回复