Sidebar in its own column?

BB Theme
1

Hi - Is there a way to create a sidebar that is independent of the modules to the left?

I created a Blog Standard page thinking that the sidebar would stand on its own, but I find that its probably in a column of the row.

Here’s what I’m trying to accomplish:

A content/sidebar layout where the sidebar takes up the right side, then on the left side, I can add various modules. One 3-column row and one 1-column row under that and the sidebar would be in its own container to the right of both of those content modules.

This is an example: http://advancedrem.com/ There are different types of modules in the content area, but the sidebar just shows to the right independent of the other modules.

Can I do that?

Thanks again,
Kathleen

2

Hey Kathleen,

That is certainly possible with the BB theme! You just need to set the page template to Sidebar. You can do this by visiting the native WP editor of the page in question. On the right site is a Page Attributes box, and that is where the page template can be changed. Check screenshot for reference.

View post on imgur.com

You can then header over to Appearance > Customize > Content > Blog Layout to change the size or position of the sidebar. :slight_smile:

Ben

3

Thanks, Ben. I didn’t realize you could combine stuff from the regular editor with the builder. Slick!

4

And, finally, can I have an image at the top and the sidebar? So, for example, on this page: http://wisetransitions55plus.com/ there’s an image at the top, but when I make the template Sidebar, that header doesn’t go full-width.

5

Hi Kathleen,

Would it be possible for you to enable the sidebar template, please? So we can see your issue.

Thanks,
Danny

6

Hi Danny,

You’ll see on the home page, http://wisetransitions55plus.com/ the top image is full-width, but it’s using the default BB template.

On the About page, http://wisetransitions55plus.com/about/ the image used to go full-width until I changed it to a sidebar template and how the image only shows on the left…

The row the image is in is set as Full-Width for the Width and Content Width, but it’s not having any affect.

7

Hi Kathleen,

The header image on your about page is full-width. Can you provide a screenshot of what you’re seeing, please?

Thanks,
Danny

8

Hi Danny. Here’s what I’m seeing: http://imgur.com/LpbqLQc

9

Hey Kathleen,

Sorry to say but that’s how the sidebar template works. You can’t place an image on top of both the content area and sidebar. If you’re interested, we could modify the theme file directly and place the image there, but then it would be a static image, i.e., you can’t replace it easily using BB. Let us know if you need help with that.

Ben

10

Hey Ben - I was afraid that was the case.

Could you tell me generally what would need to be done to modify the theme? We’d want one thing on the home page and a separate thing on the other pages. If it’s just putting some code in one of the Wordpress files, I might be able to deal with that.

I would request this to be considered as a update - creating a row that can go across both the content and the sidebar area. It would save time if you’re creating a ton of pages. And, it’s tough if what you want to put in the sidebar is longer than the module you want in the content. You end up with a big gap between the first content module and the ones below.

Thanks for getting back to me!
Kathleen

11

Hey Kathleen,

I just realized there’s a hook that we offer before the content starts and we can use that instead. Try adding the code below to your functions.php file preferably in a child theme and see if it works.

// Add an image on top before the content starts
function fl_top_image() {
  if ( is_front_page() ) { ?>
    <img class="fl-before-content-image" src="www.domain.com/image-for-front-page.jpg" />
  <?php } else { ?>
    <img class="fl-before-content-image" src="www.domain.com/image-for-other-pages.jpg" />
  <?php }
}
add_action ( 'fl_content_open' , 'fl_top_image' );

You’ll have to add the CSS snippet below as well.

.fl-before-content-image {
  max-width: 100%;
}

Ben

12

Ben - Thanks!!

I’ll give that a shot for sure. It might be a while before I can let you know if I got it to work. My computer died and I’m scrambling. But, I’ll for sure try it.

Kathleen

13

No worries at all, Kathleen. Let us know how it goes! :slight_smile:

Ben

14

Hi Ben - The computer is just about working, so I was looking at the code you referred to above. If I put the code in the BB Child Theme, will it go away if the child theme is updated?

Do I need to create a child of the child theme? :slight_smile:

Also, take a look now: http://wisetransitions55plus.com/ On the home page, I’ve got two headers, only one with the Call to Action on it.

Then, on the other pages the image is there, but it isn’t full-width. http://wisetransitions55plus.com/why-work-with-an-sres/ I must be doing something wrong…

Thanks,
Kathleen

15

Actually, I had to remove the PHP code cause I got it messed up, but the layout when it was active is as described above.

So, I think what I need is code that will show no header on the home page and we’ll just go with the one that’s there. Then, code to put an image on the other pages that is full-width.

I’d try editing the hook myself, but the last time I did that, the site disappeared, which gives you some idea of how good I am at hooks.

16

Hi Kathleen,

We include a Template that when selected allows you to hide the header/footer on that page. You can select this template by going to WordPress Admin Dashboard > Pages > Select the page you want to edit. From here, select the “No Header/Footer” template from the Page Attributes menu.

Thanks,
Danny

17

Hi Danny - So, if I choose the No Header/Footer template, that will eliminate the sidebar template and the goal is to get a full-width image going all the way across a sidebar page.

I can’t figure out how to put an image full-width on a Sidebar page. The code I tried earlier from REPLY #106905 put the header on the page, but it wasn’t full-width.

Sounds like I’m trying to do something that isn’t possible…?

18

Hi Kathleen,

If I understand you correctly, you want to include a full-width image that has a sidebar, but with no header?

If this is correct, I have gone ahead and created a custom template for you. See the code below.

<?php

/*
Template Name: No Header with Sidebar
*/

add_filter( 'fl_topbar_enabled', '__return_false' );
add_filter( 'fl_fixed_header_enabled', '__return_false' );
add_filter( 'fl_header_enabled', '__return_false' );

get_header();

?>
<figure>
	<img src="Add Image Here" alt="Alt Text here">
</figure>
<div class="container">
	<div class="row">

		<?php FLTheme::sidebar('left'); ?>

		<div class="fl-content <?php FLTheme::content_class(); ?>">
			<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
				<?php get_template_part('content', 'page'); ?>
			<?php endwhile; endif; ?>
		</div>

		<?php FLTheme::sidebar('right'); ?>

	</div>
</div>

<?php get_footer(); ?>

You will want to create a new file in your code editor and copy/paste this information into the file. Then update the “Add Image Here” and “Alt Text Here” in the code. Once you have done this, save the file and name it “tpl-no-header-with-sidebar.php” (without quotes).

Once you have completed these steps, upload the file to your child themes directory via an FTP client. After the upload has completed, go to your homepage and select the “No Header with Sidebar” template. Publish the changes and you should now see your full-width image above the sidebar.

Some additional CSS may be required to get the image full-width depending on the size of the image.

Note: If you’e not comfortable doing this yourself. Please, provide a link to your full-width image and FTP access and I can do this for you.

Thanks,
Danny

19

Thanks Danny. For now, this is how the pages are set up:
http://wisetransitions55plus.com/key-transition-steps/

I used a background image in a row and adjusted the padding to get the image to show completely. Then, I used the Right Sidebar Row Layout underneath.

I need to get this site live, so I’m going with this for now. Would your code above create a page like this?

It’s still not exactly what I need cause I can’t seem to add row layouts inside a row layout. By that I mean that I wanted to have the 6 numbered points showing side by side 3 in each column, but I can’t figure out how to do that. It will only add a 2 column row layout as its own row, right?

20

Hey Kathleen,

That is correct, the code Danny gave you above should allow you to place a full width image before your BB content. But it’s going to be a static image, i.e., you won’t be able to change it using the page builder, you have to change the code manually.

Unfortunately, nested rows/columns isn’t possible at the moment. We’ll be working on it soon though as it’s one of the most voted feature request. :slight_smile:

Ben