全球主机交流论坛

标题: 简单的hostloc论坛主题样式 [打印本页]
作者: terryxu    时间: 2020-5-8 21:50
标题: 简单的hostloc论坛主题样式
本帖最后由 terryxu 于 2020-5-9 07:57 编辑

试着简单美化了一下论坛样式，去掉了很多的功能。
主要修改-列表页面


详情页面

投票


主页基本没做修改


原来的logo在高清屏下有点模糊，就重新做了一个

如果你不喜欢，可以自己diy喜欢的logo，替换代码第9行的url就行了
.hdc h2 a {
                display: inline-block;
                background: url(https://i.loli.net/2020/05/08/RExn3PoNsQ7Gv8r.png) /*这里是logo地址*/;
                background-size:100%;
                width: 250px;
                height: 70px /*调整一下高度*/;
}


比如改成#16楼@李多多 提供的logo，搭配上dark reader的效果

chrome装个样式插件开启一下就行
  1. @-moz-document domain("www.hostloc.com") {
  2.         body {
  3.                 background: none;
  4.                 background: #e2e2e2;
  5.         }

  7.         .hdc h2 a {
  8.                 display: inline-block;
  9.                 background: url(https://i.loli.net/2020/05/08/RExn3PoNsQ7Gv8r.png);
  10.                         background-size:100%;
  11.                 width: 250px;
  12.                 height: 70px;
  13.         }

  15.         #scbar {
  16.                 display: none;
  17.                 border-top: none;
  18.                 border-radius: 2px;
  19.         }

  21.         #um .showmenu {
  22.                 margin-right: 5px;
  23.         }

  25.         #threadlist .th {
  26.                 margin-top: 0;
  27.         }

  29.         .hdc h2 img {
  30.                 display: none;
  31.         }

  33.         .bmw {
  34.                 border: none;
  35.                 box-shadow: 0 2px 3px rgba(0,0,0,.1);
  36.                 border-radius: 3px;
  37.                 overflow: hidden;
  38.         }

  40.         #thread_types,
  41.     #scbar_hot,
  42.     #nv,
  43.     .bml,
  44.     #toptb,
  45.     .pipe,
  46.     a[href="connect.php?mod=config"],
  47.     #pgt,
  48.     .tns,
  49.     .pil,
  50.     .pls p span,
  51.     .authi img,
  52.     #p_btn,
  53.     .pm2 a,

  55.     .vwthd .xg1 {
  56.                 display: none;
  57.         }

  59.         #threadlisttableid   tbody:first-child {
  60.                 display: none;
  61.         }

  63.         .authi,
  64.     .authi a,
  65.     #fj .z {
  66.                 color: #999;
  67.         }

  69.         .pls .o li {
  70.                 text-indent: 0;
  71.         }

  73.         .pls .o .pm2 {
  74.                 background-image: none !important;
  75.                 text-align: center;
  76.                 float: none;
  77.         }

  79.         .pm2 a {
  80.                 vertical-align: top;
  81.                 display: inline-block;
  82.                 font-size: 0;
  83.                 background: url(https://443502.xyz/static/image/common/pmto.gif);
  84.                 width: 16px;
  85.                 height: 16px;
  86.         }

  88.         .pi em {
  89.                 vertical-align: top;
  90.         }

  92.         .tdpre {
  93.                 visibility: hidden !important;
  94.         }

  96.         .tl th, .tl td {
  97.                 border-bottom: 1px solid #e2e2e2;
  98.         }

  100.         .tl tr:hover th, .tl tr:hover td {
  101.                 background: none;
  102.         }

  104.         .pg a, .pg strong, .pgb a, .pg label {
  105.                 border-radius: 3px;
  106.         }

  108.         .tl th a:visited, .tl td.fn a:visited {
  109.                 color: #999;
  110.         }

  112.         .pg a:hover, .pgb a:hover {
  113.                 border-color: #007cd5d1;
  114.                 color: #007cd5d1;
  115.         }

  117.         #separatorline tr td:first-child,
  118.     .icn,#forumnewshow,
  119.     #separatorline {
  120.                 display: none;
  121.         }

  123.         th.common em,
  124.     th.new em {
  125.                 display: none;
  126.         }

  128.         th.common,
  129.     th.new,
  130.     th.lock {
  131.                 padding-left: 5px;
  132.         }

  134.         #ft {
  135.                 color: #999
  136.         }

  138.         #ft a {
  139.                 margin: 0 2.5px;
  140.                 color: #999;
  141.         }

  143.         .xg1, .xg1 a {
  144.                 margin-left: 5px;
  145.         }

  147.         .bm {
  148.                 border: none;
  149.                 border-radius: 3px;
  150.                 overflow: hidden;
  151.         }

  153.         .xw1 {
  154.                 color: #666 !important;
  155.         }

  157.         .pgbtn a,
  158.     .bm_h {
  159.                 border: none;
  160.         }

  162.         .pi {
  163.                 border-bottom: 1px dashed #e2e2e2;
  164.         }

  166.         .po {
  167.                 border-top: 0;
  168.         }

  170.         .pob a {
  171.                 color: #999;
  172.         }

  174.         .pi strong a {
  175.                 color: #999;
  176.         }

  178.         .t_f {
  179.                 line-height: 1.5rem;
  180.         }

  182.         .pls p {
  183.                 text-align: center;
  184.         }

  186.         .pls p a {
  187.                 color: #999;
  188.         }

  190.         .pbg,.pbr {
  191.                 border-radius: 0;
  192.         }

  194.         .avt img {
  195.                 border-radius: 100%;
  196.                 border-color: #f2f2f2;
  197.                 box-shadow: 0 2px 3px rgba(0,0,0,.1);
  198.         }

  200.         .pls .avatar img {
  201.                 padding: 2px;
  202.                 background: #FFF;
  203.                 width: 70px;
  204.                 height: 70px;
  205.                 font-size: 0;
  206.                 border-radius: 100%;
  207.                 box-shadow: 0 2px 3px rgba(0,0,0,.1);
  208.         }

  210.         .pl .quote {
  211.                 border-radius: 3px;
  212.         }

  214.         .tl td em, .tl td em a {
  215.                 color: #eaeaea
  216.         }

  218.         #autopbn {
  219.                 border: none;
  220.         }

  222.         .pls .avatar {
  223.                 text-align: center;
  224.         }

  226.         .pls .pi {
  227.                 padding: 10px;
  228.                 text-align: center;
  229.         }

  231.         .pls p,.pls .o {
  232.                 margin: 5px 10px;
  233.         }

  235.         .xl2 li {
  236.                 width: auto;
  237.         }

  239.         .bui .m img {
  240.                 height: 120px;
  241.                 border: 3px solid #fff;
  242.                 border-radius: 100%;
  243.         }

  245.         .psta img,
  246.         #tath img {
  247.                 border-radius: 100%;
  248.         }
  249.             .sign{
  250.                         background:none;
  251.                         border-top:1px dashed #e2e2e2;
  252.                         /*display:none;*/
  253.                         font-size:12px !important;
  254.              }
  255.              .sign font{
  256.                     font-size:12px !important;
  257.              }
  258.         #ft {
  259.                 border-top: 0;
  260.         }
  261. }
复制代码


觉的好的，给个赞啊

作者: tir    时间: 2020-5-8 21:51
哇哦，战略性Mark了
作者: work    时间: 2020-5-8 21:51
logo有点辣眼睛  
作者: Lemon0    时间: 2020-5-8 21:51
mark mark mark zsbd zsbd zsbd!!!
作者: b66667777    时间: 2020-5-8 21:51
战略性帮顶
作者: camboo    时间: 2020-5-8 21:53
有望打包成app
作者: 俩猫    时间: 2020-5-8 21:54
支持一下
作者: kzklot    时间: 2020-5-8 21:54
提示: 作者被禁止或删除 内容自动屏蔽
作者: ghostloc    时间: 2020-5-8 22:14
我一直用的 https://userstyles.org/styles/154705/hostloc
稍微改动下 再配合 dark reader 扩展 自动夜间模式

light


dark

作者: Andrey    时间: 2020-5-8 22:16
看上去不錯
作者: aeox    时间: 2020-5-8 22:19
马克马克一下
作者: 老狼    时间: 2020-5-8 22:21
这LOGO把全球降成了全村了
作者: 独存    时间: 2020-5-8 23:12
大佬还是大佬
作者: skysf    时间: 2020-5-8 23:18
作者: terryxu    时间: 2020-5-9 07:08
ghostloc 发表于 2020-5-8 22:14
我一直用的 https://userstyles.org/styles/154705/hostloc
稍微改动下 再配合 dark reader 扩展 自动夜间 ...

也在用dark reader  夜间满舒服的
作者: 李多多    时间: 2020-5-9 07:12
    logo换成这个还差不多。
作者: 某猫猫    时间: 2020-5-9 07:39
不错不错就是logo有点....



欢迎光临 全球主机交流论坛 (https://443502.xyz/) Powered by Discuz! X3.4