Question

我正在创建一个Tumblr主题，而且我遇到了各种各样的问题。我喜欢我的所有帖子都是这些大圆圈，每个帖子类型都有不同颜色的边框。我不知道该怎么做。现在我可以把所有帖子放到一个边框并四舍五入到我想要的大小，但是，例如，我喜欢文字帖子有红色边框，照片帖子有橙色边框。我已经尝试在编码中添加文本帖子并添加边框，但是它会创建一个辅助边框（围绕我为所有帖子设置的边框）并且不包含帖子＆＃39 ; s信息（即日期和标签等）。

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

这里的主题是参考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

首先，您应该使用类 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}

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

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

2 个答案: