How to build simple 2/5 page text sidebar?

Kirby 2 Solved ✅
1

I’m relatively new to Kirby – most of my site is built.

I’ve figured out columns, but I’d love to have a sidebar on one of my information pages (roughly 2/5 of the page with the rest of the page being text and images as needed). I can’t seem to figure out how to do this, between snippets, plugins, et al.

(I should note that I’ve been coding most things by hand and haven’t used the panel much.)

I think it must have something to do with columns but I can’t seem to sort out how to do that without changing the column definitions for the site overall, which is undesirable. I’m sure it’s something obvious.

Thank you!

2

The columns plugin only affects the very space in which the columns are used, the textarea of a page. What you need is an overlying grid that creates a separation between your sidebar and the space that contains the textarea. With that you define columns of the width 2/5 for the sidebar and the width 3/5 for the textarea (which itself can contain columns - a nested layout). You can either build your own definitions to create that overlying grid or use something like Skeleton or Bootstrap or Zurb Foundation. Skeleton is nice for simple setups, with only a couple of features.

http://getskeleton.com/

You can then create an invisible page (plus sidebar-snippet) for the contents of the sidebar and put any content that you need there, giving it the grid width 40% and a template for any page that you want to have this sidebar, giving it the grid width 60% (in the CSS definitions).

The snippet for the sidebar might look like this:

<div class="three columns">
  <div class="sidebar">
    <?php echo $site->page('sidebar')->text()->kirbytext() ?>	
  </div>
</div>
1 Like
3

Thank you so much – I made the snippet and the template but I’m afraid I’m not understanding how to get those in the kirbytext. Would you be game to walk me through it? I’m really new.

4

You wouldn’t put the sidebar into Kirbytext directly (or not into the same field). The example above works like this:

  • Your main text is stored inside the text field of your information page. That is then printed in the large column.
  • The sidebar text is stored in a separate field. In the example above, this field is stored in a separate page, but since you only need it for a specific page/template, you can do it like this:
    1. Add a second text field to the blueprint of that page and name it sidebar. The field type is textarea just like with the main text field.
    2. Change the code from the example for the sidebar to this: $page->sidebar()->kirbytext()
    3. Adapt the HTML code to the framework or CSS code you are using.
    4. The two fields will then be printed in the two separate columns.
5

I’ve tried the above and it is still not working.

I am not experienced enough to choose between variables in separate solutions. If anyone has one direct and simple solution, I would really appreciate it. Thank you so much for your help.

6

Hey @degrey
Building a sidebar actually doesn’t have anything to do with Kirby. Although all the solutions you were provided with could work, I think you should simply use Google with a query similar to “html sidebar” and read through tutorials and questions and answers sites. This is by far the best way to learn to codeine my honest opinion.
See for instance this user’s answer to a similar question: http://stackoverflow.com/a/18148419

7

Maybe you can tell us what you want to render in your sidebar? Is it content from the same page?

Anyway, your html markup should consist of two floating divs, something like:

<div class="wrapper">
  <div class="content-area">
    <?php echo $page->text()->kirbytext() ?>
  </div>
  <div class="sidebar">
    <?php echo $page->somefield()->kirbytext() ?>
    <!-- or whatever you want to output here -->
  </div>
</div>

CSS

.wrapper:after {
  display: table;
  content: " ";
}
.content-area {
  width: 60%;
  float: left;
}
.sidebar {
  width: 40%;
  float: left;
}
8

@Thiousi
Yes, I’ve done that. That’s how I’ve built about 90% of the website. I came across that same solution on StackOverflow and it did not work either. That’s why I’m here.

9

@texnixe Thank you!!

I’d like for the sidebar to be a simple introductory text with H1 and perhaps a few pertinent links.
This is for a page on my site that will be something like a blog, only much more simple and updated less frequently. The sidebar text is unlikely to change. I believe it would be content from the same page.

Since I seem to have painted myself into a corner here, I’m going to start from scratch with really simple questions: does the HTML markup go in my content/page .txt file, or does it go somewhere else? Does the CSS go in assets/main/main.css?

Thank you so much for bearing with me.

10

The html markup goes into the template that renders your content file, let’s say if the content file is blog.txt, you would put that into your blog.php template.

In your content file, you would put the fields and their values that you want to display on that page. The CSS goes into assets/css/main.css or whereever you have stored your css file.

An example:

blog.txt

Title: Blog

----

main_text: Bla bla bla

----

sidebar_title: The title in the sidebar

----

sidebar_text: bla bla bla

blog.php template

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

@texnixe YES!! Thank you!!

I tweaked the PHP and CSS a bit (probably from, y’know, the other tweaking I’d done before) and this is what I have now. Your answering my question so thoroughly also answered some peripheral questions I’d had but didn’t think were important enough to mention. HUGE gratitude!! Thank you!!

Screen Shot 2016-07-17 at 4.33.44 PM.png2036×1436 245 KB

12

Hello @texnixe! I have one more question.

Right now it looks like this:

Screen Shot 2016-07-18 at 3.51.30 PM.png868×1168 157 KB

I’d like to get the text to not wrap around the sidebar, and to create a break between the underline for the Bloggish headline and the Experimental headline. I’ve done some Google searches but nothing seems apparent so far and since you were so wonderful last time around I thought I’d come back.

Thank you so much!!

13

It looks like you’re using floats to lay out the sidebar, so adding overflow: hidden; to the ‘experimental headline’ column’s css should do the trick.

Your paintings are pretty damn amazing by the way.

1 Like
14

Thank you!! That worked perfectly!
And thank you so much for your kind words about my work.

Do you have any thoughts on how to get the text to not wrap under the sidebar? Everything I’ve tried (adjusting the CSS length of the sidebar 100% or 80em, etc) has just messed up my footer. :confused:

Screen Shot 2016-07-18 at 5.03.44 PM.png976×1206 104 KB

15

Can you show us the css of your sidebar and text?

16

@thiousi - Sure thing!

If you need CSS for other text than the sidebar, please let me know. Thank you!

17

A few things:

All of the questions asked here are basic html/css questions that have nothing specific to do with Kirby. Although you’ll find that everyone here is always very keen to help, I think you would greatly benefit from looking at html/css classes online

To have the two columns act like you want them to, simply use the css provided by @texnixe above.
A jsfiddle exampe: https://jsfiddle.net/6xup7bg7/1/

18

@thiousi Sure, I don’t mind putting the code directly in the forum. I am a painter and a visual person, so screenshots are normally how I communicate things like this. :slight_smile:

While I believe that others here have been keen to help, my interaction with you has been to the contrary: you have repeated over and again that I should take coding classes or Google things rather than come here with questions. You have repeated that I do what others have said already, as though I haven’t already tried it with some or little success. I hope you realize that this comes off as disrespectful and condescending, particularly as I’ve stated more than once that I am new to Kirby in general. (Further: not everyone has the privilege of time for coding classes.)

It was my understanding that the Kirby forum was for people using Kirby CMS at all levels of experience: the idea being that those with a little experience gain more, help those who have less, and so on. Your behavior here has made me doubt that premise and I very feel reluctant to return as a result.

So: Please, if you have nothing to contribute, do not respond again.

19

I apologize that my answers came off the wrong way. I am always eager to help and my advice to you was sincere and thoughtful, albeit wrongly worded.
If you do not wish me to answer again, I won’t. I wish you all the best in your endeavour to learn to code.

20

@degrey Sorry, but that shocked me right there. @Thiousi went ahead and put quite some time into solving your HTML problem, solvable by a Google search and countless StackOverflow answers.

You’re right that the Kirby forum is for people of all levels of experience. You’re right, that basic HTML and CSS questions tend to get answers too. Let me add, that I’ve never seen a forum with such a friendly community, so many helpful answers and especially so little frustration, hate and “lmgtfy”-links. It’s amazing.

You would greatly benefit from not only looking at html/css classes, just as @Thiousi kindly suggested, but also learn to google such problems. Being a web developer is 75% googling for basic problems. That’s how all of us acquired a big part of our HTML, CSS, PHP, JavaScript knowledge. It’s a lot faster than waiting for other people to answer your problem that countless others had before. That is by no means “disrespectful” as you wrote, it’s a well-intentioned tip.

2 Likes