Tumblr 主题 - 每种 post 类型的不同风格

Question

我正在创建一个 Tumblr 主题，但我运行遇到了某种问题。我喜欢我所有的 post 都是这些大圆圈，每个 post 类型都有不同颜色的边框。我不知道该怎么做。现在我可以让所有 post 有一个边框并四舍五入到我想要的大小，但是，例如，我想要文本 posts 有一个红色边框，照片 posts 有橙色边框。我试过在编码中的文本 posts 周围放置一个 div 并以这种方式添加边框，但它创建了一个辅助边框（围绕我已经为所有 posts 设置的边框) 并且不包括 post 的信息（即日期和标签等）。

有谁知道如何在包含整个 post 的每个 post 类型周围添加不同的边框？

这里是主题直播供参考https://rainbowdotsinspiredthemetestblog.tumblr.com/

这是我目前的编码（我的 post 被标记为东西）

#stuff {
                float:left;
                width:400px;
                height:400px;
                margin-top:25px;
                margin-left:25px;
                text-align:justify;
                font-size:11px;
                line-height:90%;
                padding:5px;
                letter-spacing:0px;
                border:5px #24E4D8 solid;
                border-radius:200px;
                overflow:scroll;
                overflow-x:hidden;
                }
<!--TEXT POSTS-->
<div class="testingtext">
{block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}</div>

这就是我累了但行不通的方法

#stuff .testingtext{
        border:5px red solid;
    }
#stuff>.testingtext{
            border:5px red solid;
        }
#stuff:.testingtext{
            border:5px red solid;
        }

Answer 1

您可以为 CSS 中的每种颜色创建类。

.red { border: 5px red solid }
.orange { border: 5px orange solid }
/* and so on */

然后将类分配给 HTML 中的 post 类型。

{block:Text}
<div class="post red">
    {block:Title}<h3>{Title}</h3>{/block:Title}
    {Body}
</div>
{/block:Text}

{block:Photo}
<div class="post orange">
    {LinkOpenTag}<img src="{PhotoURL-500}" border="0" alt="{PhotoAlt}">{LinkCloseTag}
    {block:Caption}{Caption}{/block:Caption}
</div>
{/block:Photo}

依此类推，适用于所有 post 类型。希望这对您有所帮助！

Answer 2

首先，您应该使用 class stuff 而不是 ID。 ID 应该是唯一的，不能在页面上的任何地方重复。

其次，你可以用这样的方式解决你的问题：

<div class="stuff {PostType}-post">
    [post stuff]
</div>

{PostType}是当前post类型的名称。

那么你的 CSS 就像：

.text-post { border-color: red; }
.photo-post { border-color: orange; }
.chat-post { border-color: yellow; }

等等

Tumblr 主题 - 每种 post 类型的不同风格

Tumblr Theme - Different Style for each post type

html

css

tumblr

tumblr-themes