1

我正在创建一个 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;
        }
4

2 回答 2

2

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

等等

于 2017-06-04T11:37:28.110 回答
1

您可以为 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}

依此类推，适用于所有帖子类型。希望这可以帮助！

于 2017-06-04T03:38:55.607 回答