[Resolved] Title AND Logo

Hi Neil-

I’ll try to answer each question in turn.

On a single page for which I am not displaying the page title, can I hide the section or strip that the page title would appear in?

Yes, a little more Custom CSS will accomplish this:

body.post-title-hidden header.entry-header {
    margin-top: -25px;
    margin-bottom: -25px;
}

[On the Post List Block Component] Currently, the title does not show up as a link when I view the page, so there may be a glitch there.

This one’s a little tougher to answer, because it has to do with some specific customizations on your page.

If you check out your site, you can see that the title is actually a link, but it’s being “covered” by some strange margin and padding settings for the paragraph above it:

Edit this page, and check out the advanced controls for the row above the Post List. You’ll see that the bottom margin has been set to -100 Pixels, which is what’s causing your post list and your row to “overlap,” so you can’t click the link.

And I would like to be able to put the title and the date of each post on the same line to save space.

You can do this with a little more Custom CSS. Here’s the CSS rules that worked for me. I found that a 15px padding between the Post Title and the Post Meta (date) looked pretty good:

div.bgc-postlist .bgc-single-title, div.bgc-postlist .bgc-single-title .widget-title { float:left; }
div.bgc-postlist .bgc-single-excerpt { clear: both; }
div.bgc-postlist .bgc-single-body span { padding-left: 15px; }

I would like to edit the color and height of the footer… removing extra space and changing the background color

Generally speaking the Footer color is determined by the color palette, but you can manually change it with some more Custom CSS. Enter a new rule similar to this:

.palette-primary .site-footer { background-color: purple; }

Simply replace purple with your color, hex code or rgb code.
The height of the footer comes from a few different places, primarily on your site from the one widget that is in the footer. Add this rule:

footer .widget { margin-bottom: 0px; margin-top: 0px; }

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:

Hi Neil-

The behavior of the background image is due to the way Mobile Safari displays the “Cover Page” image size rule together with the “Fixed” position. Here’s some Custom CSS that should do the trick:

@media only screen 
and (max-device-height : 1024px) 
and (max-device-width : 1024px) {
    .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
	background-position: center top !important;
    }
}

In order to move the call-to-action text up, you can add a little bit to that rule:

@media only screen 
and (max-device-height : 1024px) 
and (max-device-width : 1024px) {
    .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
	background-position: center top !important;
    }
    .call-to-action h2 { margin-top: -1em; }
}

Hi Neil-

There’s a couple of things we can do to make this look better.

• The call-to-action currently has a 200 pixel margin on the bottom
• iOS is still treating the background-size “cover” strangely
• The font-size of the call-to-action is very large for a small screen

Here’s a modified version of the code you’re using to try:

@media only screen
and (max-device-height : 1024px)
and (max-device-width : 1024px) {
   .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
        background-position: center top !important;
        background-size: unset !important;
    }
    .call-to-action { margin-bottom: 0px; }
    .call-to-action h2 { 
       margin-top: -1em; 
       font-size: 50px;
    }
}

It’s tough to test this out on a physical iPhone ahead of time, so let me know if anything doesn’t turn out as expected.

Hi Neil-

Sorry about that font-size rule not working! Change that line to this:

font-size: 50px !important;

Once that font-size is fixed, you’ll see that your learn more button will have moved up enough so that the image is big enough.

For your Email Sign-up form, I’m thinking you’re referring to the “Newsletter Signup” block included with the Jetpack plugin. It’s a pretty straightforward form that just has a Name, Email Address, and submit button. For simple forms like that one, you can use weForms.

Most folks, however, want to use a plugin that automatically connects with your email marketing software. OptinMonster is probably the most popular plugin to accomplish this, and it integrates with most of the email marketing platforms.

You mentioned you had tried the MailChimp plugin but didn’t succeed, may I ask what went wrong with that?

Hi Neil-

I’d recommend checking out weForms, which is the form builder that’s now being bundled with BoldGrid Inspirations (it sounds like you might have started your site when WPForms was our default form builder).

One reason that weForms might be better for you in this case is because it has the option to use your theme’s CSS so it looks more consistent with the rest of your website.

With the weForms Pro upgrade, it also integrates directly with MailChimp, Constant Contact, and several other popular email marketing platforms.

Hi Neil-

New BoldGrid Inspirations sites are bundled with the free weForms plugin, which includes integration with MailPoet, a very good email newsletter platform that offers all of their premium services up to 1000 subscribers.

That said, there are very many options that integrate with MailChimp without additional costs, like MC4WP which has over a million active users and very good reviews.