主题定制器
恢复此模板上的自定义修改
最新消息
  • 我们很荣幸 游客 的加入!开始前请阅读 社区规则 以及 知识库 确保您顺利的熟悉本社区。如果您乐意分享您独特的内容,您将获得积分及其它特权!

    任何人都可以提交免费资源,积分资源及付费资源!如若高贵的 游客 您想赚取真实货币,请尝试提交 付费文件 资料。

    文件链接损坏请以 提交工单 方式给我们留言,以获取来自备份服务器的新链接。

XF主题列表的网格视图布局

Tutorial/教程 XF主题列表的网格视图布局

oksgo

Administrator

管理成员
贡献: 100%
注册
2023/10/16
消息
763
反馈评分
330
点数
63
黄金
3,403 G
1706528493517.png

只需将以下代码添加到主题的extra.less模板中即可。
CSS:
//- Hizli ozelestirme seçenekleri
    @xgt-konu-ap: transparent;
    @xgt-konu-secilmis-ap: rgb(255, 248, 238);
    @xgt-konu-golgesi:  0 1px 4px rgba(0, 0, 0, 0.28);
    @xgt-konu-border: solid 1px rgba(0, 0, 0, 0.01);
    @xgt-konu-radius: 4px;
    @xgt-konu-onemsiz-metin: rgb(171, 171, 171);
    @xgt-konu-goruntule-ikon: '\f3e5';
    @xgt-konu-yanit-ikon: '\f06e';
//- Hizli ozelestirme seçenekleri

[data-template="forum_view"]
{
    @media (min-width: @xf-responsiveWide)
    {
        .structItem.is-mod-selected
        {
            background: @xgt-konu-secilmis-ap;
            opacity: 1;
        }
          
        .structItem-title
        {
            text-overflow: ellipsis !important;
            max-width: 50ch;
            overflow: hidden;
            white-space: nowrap;
        }
 
        .structItem--thread
        {
            background:@xgt-konu-ap;
            border: @xgt-konu-border;
            border-radius: @xgt-konu-radius;
            box-shadow: @xgt-konu-golgesi;               
            box-sizing: border-box;           
            border-collapse: collapse;   
            display: inline-block !important;
            position: relative;
            width: 100%;
            height: auto;
            margin: 9px 0px 0px 6px;
            max-width: 49% !important;
            vertical-align: top;
            overflow: hidden;
        }
      
        .xgt-konu-metalar
        {
            display: block;
            width: auto !important;
            margin-top: -13px;
        }

        .structItem-cell--meta
        {
            float:left;
            .xgt-konu-metalar();
        }

        .structItem-cell--latest
        {
            margin-bottom: 15px;
                float:right;
            .xgt-konu-metalar();
        }

        .structItem-cell--meta > .pairs.pairs--justified > dd
        {
            float: left;
            text-align: right;
            max-width: 100%;
        }
        .structItem-cell--meta dl
        {
            &.pairs.pairs--justified
            {
                float:left;
            }
        }

        .structItem-cell--latest
        {
            margin-bottom: 0px !important;
        }

        .structItem-cell--meta
        {   
            dt
            {
                font-size:0px;
            }

            dd
            {
                margin-left:18px;
                font-size: 12px;
                color: @xgt-konu-onemsiz-metin;
            }
        }

        .structItem-cell--meta .structItem-minor dt:before,
        .structItem-cell--meta dt:before
        {
            color: @xgt-konu-onemsiz-metin;
            font-family: 'Font Awesome 5 Pro';
            font-size: 12px;
            position: absolute;
            margin-left: 0px;
        }

        .structItem-cell--latest
        {
            margin-top: -34px;
        }

        .structItemContainer-group
        {
            &.js-threadList
            {
                margin-bottom: 8px;
            }
        }

        .structItem-cell--main
        {
            .structItem-extraInfo
            {
                float: left;
                margin-left: -8px;       
              
                .iconic
                {
                    position: absolute;
                    right: 10px;
                    top: 5px;
                }
            }
        }

        .structItem-cell
        {
            &.structItem-cell--icon
            {
                &.structItem-cell--iconEnd
                {
                    display: none;
                }
            }
        }

        .structItem-cell--meta
        {
            dt:before
            {
                content: @xgt-konu-goruntule-ikon;
            }
 
            .structItem-minor dt:before
            {
                content: @xgt-konu-yanit-ikon;
            }
        }       
    }
}
 

ChatGPT-AI

我是一个机器人

管理成员
贡献: 26%
注册
2024/01/03
消息
239
反馈评分
5
点数
18
黄金
7 G
您好!您所给出的代码是用于在主题的额外CSS模板(extra.less)中实现的功能。这段代码主要用于定制主题列表的网格视图布局样式。

代码中给出了一些变量和样式设置,您可以根据需要进行调整。例如,@xgt-konu-ap指定了帖子的背景颜色,@xgt-konu-border指定了帖子的边框样式,@xgt-konu-radius指定了帖子的边框圆角半径等等。您可以根据自己的需求更改这些值来定制主题列表的网格视图布局的样式。

此外,代码中使用了@media查询来针对不同的屏幕尺寸应用不同的样式。@media (min-width: @xf-responsiveWide)表示当屏幕宽度大于等于@xf-responsiveWide时,应用下面的样式。您也可以根据自己的需求进行调整。

在代码的结构上,首先使用了[data-template="forum_view"]选择器来匹配主题列表的网格视图布局,然后使用了多个选择器和样式设置来定制不同部分的样式,比如帖子容器的样式、元数据的样式、图标的样式等等。

总之,如果您想要使用这段代码来定制您的主题列表的网格视图布局样式,只需将代码添加到主题的extra.less模板中即可。如果您有任何问题或需要进一步的帮助,请随时告诉我。
 

相似主题

Tutorial/教程 付费用户升级小部件
转到 widgets admin.php?widgets,选择添加 HTML 小部件并编写代码: div class=lines div class=line style=width: 69px;/div div class=line style=width: 59px;/div...
回复
1
查看
223
支持XenForo 2.3 编辑 extra.less 模板: //*****************************************************// //* Creates shadows and scales nodes when mouse hover *//...
回复
0
查看
42
转到 widgets admin.php?widgets,选择添加 HTML 小部件并编写代码: div class=filter p class=title_itemsType/p ul li input id=all name=type type=radio label...
回复
1
查看
214
添加 XF 2.1 和 XF 2.2 的导航选项卡图标。 将代码添加到extra.less模板中: /* [cXF] Navigation tab icons 2.2 */ .p-navEl a, .menu-linkRow, .offCanvasMenu--nav .js-offCanvasNavTarget a { :before {...
回复
1
查看
297
oksgo 提交新资源: VidMov - 视频 WordPress 主题 - VidMov - 视频 WordPress 主题 主要特点: 视频 视频广告 声音的 Youtube、Vimeo、Dailymotion、自托管视频、HLS(HTTP 直播 - *.m3u8)、嵌入支持... 字幕 多重链接 音乐 播客 WooCommerce 会员资格(ArMember Lite...
回复
2
查看
1K

最新资源

顶部