1

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.

  • a note on my html/css - my friend let me borrow most of the sidebar-specific code which is why it's much nicer than some of the stuff I've written and she's helped me a lot during this process but the page issue isn't something she's ever really encountered because she doesn't use css-grid or columned design often.

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.

Zac Anger
  • 6,983
  • 2
  • 15
  • 42
stephi
  • 11
  • 3
  • Can you share a link to your blog? – lharby Dec 10 '22 at 15:27
  • @lharby it's ai-robot.tumblr.com sorry I'm not sure how to use the mini-markdown formatting – stephi Dec 11 '22 at 02:00
  • OK the way I would approach this (and have done in the past) is to write some javascript which adds a class name to the html tag, you can then write css which targets those particular class name instances. See the second part of this answer: https://stackoverflow.com/a/70473354/1238244 in addition to this I would actually use a standard layout for most pages, but target the index page to have 3 column layout, I imagine you might want to do it that way around. If this is enough info to get you started let me know. Otherwise I can write up an answer. – lharby Dec 12 '22 at 10:19

0 Answers0