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

Html Tumblr主题-每种帖子类型的不同风格,html,css,tumblr,tumblr-themes,Html,Css,Tumblr,Tumblr Themes,我正在创建一个Tumblr主题,我遇到了一些问题。我喜欢我所有的帖子都是这些大圆圈,每个帖子类型都有不同颜色的边框。我不知道怎么做。现在,我可以将所有帖子设置为有边框,并四舍五入到我想要的大小,但是,例如,我希望文本帖子设置为红色边框,照片帖子设置为橙色边框。我曾尝试在编码中的文本帖子周围放置一个div,并以这种方式添加边框,但它会创建一个辅助边框(在我为所有帖子设置的边框周围),并且不包括帖子的信息(即日期和标签等) 有人知道如何在包含整个帖子的每个帖子类型周围添加不同的边框吗 以下是现场主题

我正在创建一个Tumblr主题,我遇到了一些问题。我喜欢我所有的帖子都是这些大圆圈,每个帖子类型都有不同颜色的边框。我不知道怎么做。现在,我可以将所有帖子设置为有边框,并四舍五入到我想要的大小,但是,例如,我希望文本帖子设置为红色边框,照片帖子设置为橙色边框。我曾尝试在编码中的文本帖子周围放置一个div,并以这种方式添加边框,但它会创建一个辅助边框(在我为所有帖子设置的边框周围),并且不包括帖子的信息(即日期和标签等)

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

以下是现场主题供参考

这是我到目前为止的编码(我的帖子被标记为stuff)


您可以为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}
{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}
{块:照片}
{LinkOpenTag}{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

等等,对于所有的帖子类型。希望这有帮助

首先,您应该使用class
stuff
而不是和ID。ID应该是唯一的,并且不在页面上的任何位置重复

第二,你可以用这样的方法解决你的问题:

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

等等。

这不起作用,因为在问题中,它说他们在整个文本块周围尝试了一个
div
,但它不包括公共代码(即日期和标记)。这可以通过
简化。来源:@mikeddt谢谢!我现在就编辑我的答案,我总是略过这个变量,但它会帮助我在我自己的主题哈哈
{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}
<div class="stuff {PostType}-post">
    [post stuff]
</div>
.text-post { border-color: red; }
.photo-post { border-color: orange; }
.chat-post { border-color: yellow; }