How to build simple 2/5 page text sidebar?

Kirby 2 Solved ✅
21

@thiousi Thank you, I appreciate that.

@thguenther
If you would kindly scroll up (How to build simple 2/5 page text sidebar?), you would see that I’ve mentioned that I’ve been Googling. Extensively.

I spent over six hours (probably more like ten) Googling these issues before coming to Kirby. I tried solutions from StackOverflow to Yahoo Answers (which is, obviously, not an awesome resource). I’ve asked a number of friends who are programmers, but none of them deal with Kirby – so I came here.

I have checked with my programmer and developer friends after reading your post: they are all in agreement that Googling is not going to solve every problem all the time, and that it is often contextual with CSS and content management systems. They are also in agreement that I should not have to invest in classes to find a solution to a simple CSS question when the rest of my site is essentially finished.

It is disrespectful and condescending to ignore what a person says and repeat the same thing over and again as though they have said nothing at all. Please don’t double down: just listen to me. My being here is valid. End point.

22

While Kirby and CSS are indeed two very different things (there is nothing special with CSS in the Kirby context), let’s get back to the topic:

Instead of using floats, you can use Flexbox, which is supported in pretty much all relevant browsers already:

.wrapper {
  /* The wrapper becomes a flex container */
  display: -webkit-box;
  display: flex;
}

/* Width of the two content boxes */
.content-area {
  /* 3 units = 60% */
  -webkit-box-flex: 3;
              flex: 3;
}
.sidebar {
  /* 2 units = 40% */
  -webkit-box-flex: 2;
              flex: 2;
  
  /* Space between the two boxes */
  margin-right: 3em;
}

@media (max-width: 50em) {
  .wrapper {
    /* Put the boxes beneath each other */
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse;
  }
  
  .sidebar {
    /* Reset the margin as the sidebar is on a separate line */
    margin-right: 0;
  }
}

The template code for this example is the following:

<div class="wrapper">
  <div class="sidebar">
    <h1><?php echo $page->sidebar_title()->html() ?></h1>
    <?php echo $page->sidebar_text()->kirbytext() ?>
  </div>
  <div class="content-area">
    <h1><?php echo $page->title()->html() ?></h1>
    <?php echo $page->main_text()->kirbytext() ?>
  </div>
</div>

Note that the sidebar comes first as it’s on the left. You can also use the flex-direction: row-reverse property instead. Learn more about Flexbox at CSS-Tricks.

23

3 Likes
24

I did not read all the stuff above, but here is a working example.

It is only the homepage that contains the sidebar. So check site/templates/home.php and site/snippets/sidebar.php. No extra blueprints necessary. Apply any CSS you need to gain the column width you wish. It is ultra simple.

25

But if she has already written most of the CSS, I don’t think it makes sense to throw a CSS framework at the problem just for this column layout. See my solution above, that’s much simpler here.

26

Sure, hence: “any CSS you need”. I only had the impression, that a practical working thing that one can look at in the net may be helpful. Your example is absolutely better for an individual sidebar for each page. My example is good for a returning sidebar that can be used on several different pages.

27

Ya’ll may be relieved to hear that I’ve got it looking (and working) exactly how I want it now due to all of your input. Thank you so much for all of your help!!

2 Likes
28

Good to hear. Would you mind share your solution, so that everyone who wants to achieve the same thing can get some inspiration from the solution? :slight_smile: