Reduce padding around logo area

@moderqt4

please provide a link to the site as the demo does not show a logo

Thanks for using Morning!

The following CSS should work well to reduce the space above and below the logo:

.title-container {
  margin: 1.5em 0;
}

Great thank you!

I do have one more question:

On the sidebar (Right) it is currently displaying my Instagram feed.

We would like an additional side bar on the bottom to show only the Instagram feed.

Appreciate your help!

Thank you

You’re welcome ??

I can help guide you through the process of coding a new widget area into the footer, but I’m afraid as a customization, it’s outside the scope of support I can provide. An alternative option is the Apex Pro upgrade which will add a few new widget areas to the site including one in the footer.

That would be great to have the code for a new widget. Thanks for all your help!!

Stephanie

Sure, so you’ll want to use an Apex child theme (download on this page) to add this customization.

In Apex, there’s a function called “ct_apex_register_widget_areas” on line 46 of functions.php. You can copy that function into the child theme and rename the function and sidebar name. That will register the new widget area.

The next step is to copy the sidebar-primary.php file into your child theme and rename it something like my-sidebar-footer.php, and replace all uses of the “primary” name with the name of your new widget area.

Lastly, copy the footer.php file into your child theme, and add into the footer the following function (using the name of your new widget area):

<?php get_sidebar( 'my-footer' ); ?>

Those three steps will add the widget area to the Widgets menu, and display any widgets added in the footer of the site. You can then update the style of the widgets how you’d like via CSS.

Hi Ben,

Thank you so much. I haven’t tried this out yet but when I do, I’ll let you know how it works out!

The site is not published yet so I can’t say for sure but I noticed on WordPress, in the mobile view, it looked like the site isn’t customized for smartphone view. Is this true? It looked OK for tablet.

Another thing I noticed was when I copied over text from a word document, anywhere were I had a line space, the line space doubled. Is there a way for it not to default to double spacing?

Thanks,
Stephanie

Morning should adapt to mobile devices as well. Can you check the Morning demo site, and see if it looks the same on your phone?

Copying from Word to WordPress can be a pain. One thing you can do is switch the editor from Visual to Text mode (screenshot) before copying in the text. Then it won’t copy any of the “rich text” formatting which will fix the double-spacing, but will also sacrifice other formatting you may want to keep. Also, you may want to try out this plugin which looks like it works well for fixing these formatting issues

Hi Ben,
Thanks for all your help so far. My log is now left justified – can you please help me centre it? I tried adding:

text-align: centre;

But it doesn’t seem to change anything. As mentioned I am new to CSS so I am not sure where to insert that line of code!

So far we have this in the css:

.title-container {
margin: .5em 0;

}

.title-container {
width: 400px;
height: 100px;
}

Thank you so much!

Yea no problem!

Since the logo is normally centered in Morning, there must be something else on the site making it left aligned. Could you share a link to your site, so I can check it out?

Thanks!

Hi Ben,

The site is modernflourish.com

– Would like to centre the logo
– I also activated Apex theme, following your instructions below. BUT it seemed to completely overwrite the Morning theme – is this correct?
– Where can I find functions.php?
– How and where do I copy “ct_apex_register_widget_areas”?

Thanks for walking me through this!

“Sure, so you’ll want to use an Apex child theme (download on this page) to add this customization.

In Apex, there’s a function called “ct_apex_register_widget_areas” on line 46 of functions.php. You can copy that function into the child theme and rename the function and sidebar name. That will register the new widget area.

The next step is to copy the sidebar-primary.php file into your child theme and rename it something like my-sidebar-footer.php, and replace all uses of the “primary” name with the name of your new widget area.

Lastly, copy the footer.php file into your child theme, and add into the footer the following function (using the name of your new widget area):

<?php get_sidebar( ‘my-footer’ ); ?>

Those three steps will add the widget area to the Widgets menu, and display any widgets added in the footer of the site. You can then update the style of the widgets how you’d like via CSS.”

Okay I see. I’ve gone ahead and put the child theme together for you since there are a few other complications. You can download it here: download child theme.

That will add the widget area to the footer. The widgets will be styled the same, but the layout may need to be customized further with CSS depending on how you want them to display.

I visited the site, but there is a maintenance mode page up (screenshot). I’m not certain this CSS will center the logo, but it is worth a shot:

.title-container {
  margin: 1.5em auto;
  text-align: center;
}

If that doesn’t work, can you remove the coming soon page temporarily?

Hi Ben!

1) I just tried to install your theme and received this message:

Unpacking the package…

Installing the theme…

Destination folder already exists. /home2/moderqt4/public_html/wp-content/themes/morning/

Theme install failed.

2) It seems that the logo is almost fixed! The code you provided worked. So far I have in the CSS:

.title-container {
margin: 4.5em auto;
text-align: center;
}

.title-container {
width: 700px;
height: 75px;
}

But I am now wondering how I can adjust the padding between the top bar that reads (Home, Work Hacks, Healthy Eats) and the top logo. I played around with the height and margin in the CSS but that only seems to change the distance between the bottom of the logo and the content below.

Got it. In your Appearance menu, switch to the Apex theme and then you can delete the Morning theme. Once the Morning theme has been deleted you’ll be able to upload the child theme I shared here. You won’t lose any of your settings in this process.

As for the space between the menu and the logo, modifying the first snippet like this should work:

.title-container {
  margin: 1.5em auto;
  text-align: center;
}

“1.5em” will reduce the space both above and below the logo.

1) Thanks – I successfully uploaded the morning file you sent. However which one am I suppose to activate – Apex or Morning? I played around with both, but the Instagram is still on the side bar, not the footer.

2) I also adjusted the margin but it still doesn’t allow the logo to be completely centered height wise in the space available.

Thank you as always!