Jesse Owens

Hi Bryan-

Actually it looks like the header is centered, but the top block on your homepage is actually askew.

You’ve got a tiny column to the right of your top block, that you should be able to eliminate in your editor:

As for your fonts, it looks like this might be an issue left over from your staging site. The URL for the font is still calling the site with bg_ in the URL. You should be able to fix this by going to Customize > Fonts > Headings and switching to a different font, publish your changes, and then switch back to Audiowide.

I’m really glad to hear that helped Neil! Please do get in touch if you do get stuck, we’re happy to help.

Hi Bryan-

Happy to help! You’ve got a couple of different things going on, so I took a few minutes to make this video for you.

Here’s the CSS code from the video:

footer .site-description {text-align: center; }
footer p.site-title { font-family: Audiowide; 
font-size: 25px; }

Hi Neil-

I’ll tackle the easy question first, how to save a custom block as a template.

At the bottom of each block is the Edit Section menu, which appears as a gray pop-up when you’re hovering over the block. From here, you can save your blocks:

Then, whenever you go to add a new block, you’ll see your saved blocks under the Block Library block type.

For your main question about designing a custom block, it’s a little tough to guide you on exactly how to accomplish what you’re after from what you’ve described so far. That said, I’m confident you can accomplish your goal with a little customization. If you have a few minutes to spare, I created this video to hopefully show you how to do your custom design.

Hi Bryan-

I’m putting in a request to HR to get “BoldGrid God-Man” on my business cards now.

Anyway, in my testing I haven’t been able to recreate the issue where the image filter tool doesn’t show up when an image is selected in the editor. One possibility I can think of is that it’s not available for background images, only for regular images and images that are in galleries.

Since you’re an InMotion Hosting customer, you already have access to premium support included with your hosting plan. So, if you’ve got an image that isn’t working as expected with the tool, file a premium support ticket and a member of our team (all gods and goddesses) can log into your dashboard and see if we can diagnose the issue for you.

Hello Iman-

I checked on your account and it looks like your purchase of Crio Premium was done separately, rather than as an add-on to one of your existing keys.

Your Crio Premium is associated with the key ending in e02445257. If you need this to be associated with one of your other keys, please log into your BoldGrid Central Account and submit a premium support ticket and our team can fix your subscription status.

Hi Bryan-

The image filter control should be present any time you select an image on your page. Look for the “Magic Wand” icon:

As for your Call-to-Action, did you get a chance to check out the video I sent you in your other post?
If you have a moment to check it out, I’ll show you how to fix this:

Hi Giuliano-

If you’re seeing a 403 error, I’m thinking you’re running into some kind of security or firewall issue.

Try disabling any security plugins you might be using and see if the error persists.

If you’re still seeing it, it may be a server-level security setting. One good first step would be to check your Apache or NGINX logs and see if you can find any errors logged there. Your web hosting provider or System Administrator may be able to help you locate these logs and check for the error.

Hi Hilmar-

Yes, once you update the URL to your production site, simply navigate to Performance > General Settings > Licensing and re-authorize the key by clicking Verify License.

Hi Orlando-

Thanks for trying that for me.

If you delete and re-install the theme, your configurations are still saved, so it’s worth a try. Activate a different theme, then click on Theme Details for Callaway.

Then, click Delete at the bottom-right of the Theme Details screen.

Finally, re-install the theme (you can download it directly from this link).

If that still fails, can you fill out a premium support ticket (be sure to log in with the email address you use for your DreamHost account) so we can log in and take a closer look for you?

Hi Susan-

Yes, this rule is a little more complicated to find the right selector. Here’s how to do it:

.palette-primary .navbar-default .navbar-nav > li > a {
    color: #993366;
}

Hi Bryan-

Upon closer inspection I did notice some odd things about your “Join Our Community” Block.

Take a look at this quick video I created to show you how to fix this block.

As for your Privacy Policy page, one thing to keep in mind is that these pages are usually saved as “Drafts” when they come out-of-the box in WordPress. Be sure you set the Post Status to “Publish” when you publish your page.

One thought does occur to me- you mentioned that you had two versions of your website before, and now you’re using only one. Did you publish the Privacy page on your main site, and not the other staging site?

Hi Corey-
Please reach out to our Sales team from your WordPress Dashboard, Performance > Support and use the option for Billing Support and our team will work to find a solution for your needs.

Hi Hilmar-

Licensing for W3 Total Cache is on a “per-installation” basis. So for example, if you had several domains on a WordPress Multisite instance, you will only need one license, but if each domain has its own WordPress installation, you will need a license for each site.

If you’re setting up staging and development servers, you can use Pro Dev Mode on your development environments.

Hi Steven-

I’ve asked one of our CDN experts to review your questions and get back to you, please stand by for some more information.

Hi Orlando-

Thanks for the additional details.

I created a testing site with Callaway just to double check your code, and it looks like you’ve got everything correct now. The color palette on my testing site works with the code just like you’ve got it.

Just to make sure we don’t have any typos, copy-and-paste the code from these two GitHub Gists:

One other troubleshooting step I’d like you to try. Activate a non-BoldGrid theme, such as Twenty Twenty, then re-activate your child theme. This should load the BoldGrid libraries fresh for you.

Hi Betty-

Yes, you can do this with a little more Custom CSS. Here’s the code I used to “reverse” your submit button, so that it is black with yellow text instead of the other way around:

input#commentsubmit {
color: #000;
border: 1px solid #000;
}

input#commentsubmit:hover {
color: #f5d76e;
background-color: #000;
}

And then, to change the title:

.palette-primary .comment-reply-title, .palette-primary #reply-title {
color: #000;
}

Hi Neil-

I’ll try to answer each question in turn.

I want to remove that wasted space, but can’t see a way to tighten that up, its probably more custom CSS!

Actually, it looks like there might still be some customizations in your page content causing this. Since they’ve been manually modified with the Post and Page Builder controls, it’s better to fix it there than to try and muscle it in with CSS. When the formatting has gotten in the weeds like this, I recommend switching to the Text editing tab.

1. The top block has a 32px margin-bottom as well as a 5em padding bottom. Switch to the Text editing tab, and look for the following element that should be near the top of your page:

   <div class="tmpl-call_to_action-5 boldgrid-section dynamic-gridblock background-parallax color4-background-color color-4-text-contrast bg-background-color" style="color: #ffffff; margin: 1px 1px 32px; padding: 5em;">

   Change the very last part to read:

   margin: 1px 1px 0px; padding: 5em 5em 0em;

2. The rest of the space is coming from the text block, that starts out with, “The Self-Mastery Blog.” That block has a 20% padding-bottom. If you’re still in the Text editor, look for this:

   <div style="padding: 20% 12%;" class="bg-box">
   <h1 class="color2-color" style="font-size: 4em; margin: -100px 0px 9px;">The Self-Mastery Blog</h>

   Change the first line to:

   <div style="padding: 20% 12% 0%;" class="bg-box">

The date and the blog post title are not lining up vertically, and I would like them to align in all views.

The only way I found to make this match reliably was to make it match the heading. Here’s the Custom CSS I found:

.bgc-single-body > p > span {
font-family: Oswald;
font-size: 18px;
line-height: 1.1em;
vertical-align: top;
}

In the main navigation bar, I’d like to change the link status display that identifies the page we’re on so its different from the display of the page we’re hovering over and going to. Just changing the color of the bar under the link title would work.

Here’s a CSS rule you can use for this, simply change “#ffffff” (white) to the color you’d like:

palette-primary .navbar-default .navbar-nav > li > a:hover {
border-bottom: 5px solid #ffffff;
}

Can I display the title of each blog post in a more obvious link format that changes when you hover over it?

Yes you can, this was being overridden by the H4 style, rather than the link style which underlines by default:

a:hover > h4 {
text-decoration: underline;
}

 I need to be able to easily lay out and combine an image, a large text block, a list, a chart, and a combo box that has the dates, times, cost, and sign up procedures for a class.  I’m not seeing an efficient way to do that.

Have you checked out the “Schedule” block type? There are blocks there that might fit the need for a “box that has dates, times cost, and sign up procedures.” Here’s an example:

Hello Lee-

It’s a little tough to speculate what might be going on based on your description. When you say the page “jumps,” is it reacting to clicks/hovering over menu items in your widget?

You mentioned that some formatting shows correctly for a moment and then loses its format once the page is fully loaded, which sounds like there might be a CSS rule or JavaScript that is loading late on the page.

You mentioned your site wasn’t live yet in your private data, is there a staging site that you have live that we might be able to take a look at so we can help you out? It won’t be published, just let us know in your reply if we can see this so we can check it out.

Hi Bryan-

The easiest way to copy an entire page into another one is to actually use the WordPress text editor.

First, edit the page you want to copy. Switch over to the <strong>Text</strong> tab at the top-right of the editor screen, then select all and copy.

Now comes the semi-tricky part- locating the right spot to paste it in your other page. You mentioned you need it to be right after the CTA. Here’s my trick for doing this- highlight some text in the editor near the place you need to paste, then switch over to the Text tab.

Once you’re near the spot you need to paste into, find the end of the block above, and the block below, by looking for code similar to this:

</div>
</div>
</div>

<div class="boldgrid-section">
<div class="container">
<div class="

Make a new line in between the </div>’s and the <div>’s and paste your page’s code there.