Outer Border with Its Own Color

Hi @jcomanda,

One way to do this would be to create a template in which all your template parts and blocks are within a group block, as shown here:

Otherwise, you might be able to achieve a similar effect using CSS. Hope that helps.

Thank you for your quick response.

It looked to me like the “trick” was to put everything (header, post content, and footer) inside a group and then to give that group a border of a certain color and thickness. It sounds simple enough.

However, I had three problems.

First, you show in the screenshot that the group has a border section in its properties under Dimension. I don’t have that in the editor.

Second, I couldn’t get this group to fill out to the edges. There was always some space to the left and right of it.

Third, I would like to make the border on the sides wider than the top or bottom. I tried some other container-like blocks, but I didn’t get it to work.

The simpler thing, of course, would be to persuade the clients to like the way it is now.

First, you show in the screenshot that the group has a border section in its properties under Dimension. I don’t have that in the editor.

Hm, it should be there. Are you using v2.0.25 of the theme, and have you selected the top-most group block?

Second, I couldn’t get this group to fill out to the edges. There was always some space to the left and right of it.

If you bring padding down to 0px, that should take care of it.

Third, I would like to make the border on the sides wider than the top or bottom. I tried some other container-like blocks, but I didn’t get it to work.

The border width setting should take care of that, but yes circling back to the first issue, that would require the setting to be visible.

The simpler thing, of course, would be to persuade the clients to like the way it is now.

Ah yes, the eternal struggle, I know it well. ??

I have checked. And yes, I am using the latest version of Blockbase (v2.0.25) and of Gutenberg, and I was in the top-most group looking at properties.

But maybe this is relevant. I really couldn’t figure out how to create a new template, so I tried to do it on on the default template (I guess that’s what it was). It’s what I get to by choosing Appearance and then Editor on the opening sidebar.

In there I have a Header and Footer that I have customized extensively. It currently consists of (at the highest level) a Header, a Group that wraps around Post Content, and a Footer, all three of which contain other blocks. I Grouped them all and went into the highest Group, but my options were no different.

I don’t know how relevant any of this is except that I probably should be working in a template. I have tried to read up on that, but I haven’t found anything immediately helpful.

Hi there,

I don’t think it matter what exactly you’ve been editing – the Group block is supposed to have a border setting regardless of theme or template. It’s built into the block, into WordPress itself.

Open a blank new post in the post editor, and add a new Group block there – is the border setting missing there for you as well?

If it is, it means something on your site is removing/overriding that setting. The most likely culprit for something like this would be a plugin, so you can try disabling those to see if the border option for the group block comes back.

Failing that, I’d suggest posting in the general troubleshooting forums for more help with this particular issue.

To come back to your original question, you can also achieve this with custom CSS code. This code works for me on a test site with Blockbase:

div.wp-site-blocks {
  margin: 100px;
  box-shadow: 0 2px 6px rgba(0,0,0,.8);
  background-color: #fafafa;
}
body {
  background-color: #f7f2e1;
}

I took the box-shadow and color values from your existing site, and you can play around with the margin values depending on how you want it to look.

Thank you very much for your quick reply. The CSS code worked very well on the full-screen desktop. As you said, I only had to fiddle with the margin values.

However, it is not in the least responsive, so it won’t work for me.

I will try pursuing the question of why the group block doesn’t seem to be working right.

That is truly puzzling. I tried creating a new post with nothing but a title and an empty group block. The Dimension settings there had a border section below Padding. However, when I created a new page, they did not.

Again, thank you for your help.

• This reply was modified 3 years ago by jcomanda.

Oh, to make it responsive you’d need to use media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

Yeah. I figured that out, but thanks for the tip. I understood the whole responsiveness concept, but I had never written media queries myself.