htmlcsstumblrtumblr-themes

Tumblr Theme - Different Style for each post type


I'm creating a Tumblr theme, and I've run into a problem, of sorts. I like all of my posts to be these big circles with a different coloured border per post type. I don't know how to do this. Right now I can put ALL post to have a border and be rounded to the size I want, but, for example, I'd like text posts to have a red border, and photo posts to have an orange border. I've tried putting a div around text posts in the coding and adding the border that way, but it creates a secondary border (around the one I already set for ALL posts) and doesn't include the post's info (i.e the date and tags and such).

Does anyone know how to add different borders around each post type that includes the WHOLE post?

Here's the theme live for reference https://rainbowdotsinspiredthemetestblog.tumblr.com/

Heres the coding I have so far (my posts are labeled as stuff)

#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>

This is what I tired and does NOT work

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

Solution

  • Firstly, you should be using a class stuff and not and ID. An ID should be unique and not repeated anywhere on a page.

    Secondly, you can solve your problem with something like this:

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

    {PostType} is the name of the current post type.

    Then your CSS would just be like:

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

    etc.