CODEWITHSUNDEEP
htmlcsscss-gridtumblrtumblr-themes
stephi
stephi

Reputation: 11

Tumblr different pages need different layouts html/css - columns page vs single post/container page

This is my first ever question on stackoverflow so I apologize if I'm not following standard etiquette.

I'm working on a blog final project for a class that requires a custom theme and I'm using tumblr to host it for reasons independent of coding. This is the first time I've used css for more than extremely basic styling purposes, and I'm relatively new to html/css-related work in general.

For my main page, I have a sticky sidebar on the left 1/4 of the page, and then 3 columns for posts in a tiled gallery sort of like (similar to masonry but I used css grid because masonry confused me). Overall, I'm pretty satisfied with how this is turning out. Due to my inexperience, it's not where I would ideally have it designed, but my goal is to be able to work on it as I learn more html/css/js after this class is over. main page layout about page currently

However, I'm having trouble with fixing an individual post page and my about page: when you click on an individual post, it's also being shown as a 3 column post, which is not my intention at all. Same with the about page. I think this is due to my usage of css-grid on the main page, but I'm confused as to how I can fix this on individual posts.

I've tried simply writing a completely new html for the about page, but my sidebar uses meta/variables (that I think are) built into the tumblr theme editing interface, so my sidebar wouldn't show up correctly when I tried to do that. And I haven't tried anything for the posts because I didn't even realize they had an issue until earlier today.

I can provide other code snippets if this would help, but I'm not sure what to include other than these:

#sidebar {
       top: 35%;
       position: -webkit-sticky;
       position: sticky;
       background: #ffffff;
       height: 40vh;
       width: 20%;
       text-align: center;
       padding: 25px 10px 10px 10px;
       border: 2px solid;
       border-radius: 70% 30% / 20% 40%;
       margin: 2% 2%;
       }

#container {
        column-count: 3;
        display:inline-block;
        grid-template-columns: auto auto auto;
        grid-area: container;
        width: 100%;
        column-gap: 20px;
        }
        
#house {
        display: flex;
        flex-direction: row;
        justify-content: right;
        }
        
.content{
        width: 90%;
        background-color: #ffffff;
        padding: 20px;
        margin: auto;
        margin-bottom: 10px;
        float: left;
        }

<body id="{select:background}">
    <div id="house">
        <div id="sidebar">
            <a href="/">
                <h1>{Title}</h1>
            </a>

            <div id=“description”>
                {Description}
            </div>

            <br />

            <div class="sidebarlink"><a href="{text:link 1 url}">{text:link 1}</a></div>
            <div class="sidebarlink"><a href="{text:link 2 url}">{text:link 2}</a></div>
            <div class="sidebarlink"><a href="{text:link 3 url}">{text:link 3}</a></div>
            <div class="sidebarlink"><a href="{text:link 4 url}">{text:link 4}</a></div>
        </div>

        <div id="container">
            {block:Posts}
            <div class="content">
                [I've omitted the post types and their meta info for clarity]
            </div>
            {/block:Posts}
        </div>
    </div>

Any help at all would be greatly appreciated! If this has already been answered please direct me there as well, I'm not too well-versed in navigating stackoverflow yet.

Upvotes: 1

Views: 193

Answers (0)

Related Questions