Tumblr主题 - 每种帖子类型的不同样式

Question

我正在创建一个tumblr主题，我遇到了一个问题。我喜欢我所有的帖子都是这些大圆圈，每个帖子都有不同的彩色边框。我不知道该怎么做。现在，我可以将所有帖子放在边界上，并将其四舍五入到我想要的尺寸上，但是，例如，我希望文字文章具有红色边框和照片帖子，以便具有橙色边框。我已经尝试在编码中将文本帖子围绕一个div放置并以这种方式添加边框，但是它创建了一个次要边框(围绕我已经为所有帖子设置的一个边界(，并且不包括帖子的信息(即日期和日期和标签等(。

有人知道如何在包含整个帖子的每个帖子类型周围添加不同的边界？

这是参考的主题https://rainbowdotsinspiredthemetestblog.tumblr.com/

我到目前为止的编码(我的帖子被标记为东西(

#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

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

其次，您可以通过这样的问题解决问题：

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

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

那么您的CSS就像：

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

等。

Answer 2

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

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

然后将类分配给您的html中的帖子类型。

{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}

等等，适用于所有帖子类型。希望这会有所帮助！