dol吧 关注:197,207贴子:1,154,311
  • 8回复贴,共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-25 04:04:53
      广告
      不感兴趣
      开通SVIP免广告
      1.先把软件改成中文 安装打开VsCode,按Ctrl+Shift+P
      2.点击左上角文件 选打开文件夹 文件夹位置选择存放 "Degrees of Lewdity.html" 的地方. 最好先备份一份


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


        IP属地:河北5楼2025-09-18 22:20
        回复
          正篇开始 :
          接着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
            回复
              下一步我们讲,历史回溯按钮怎么改位置,改颜色。


              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
                回复
                  2025-11-25 03:58:53
                  广告
                  不感兴趣
                  开通SVIP免广告
                  等晚上有时间,交大家修改套和温度计,喷雾位置也可改,不过原版位置就很合适,这里里就不讲了。


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