Reduce padding around logo area

I’ve updated the child theme so the date will show below the titles now. Download child theme. You can repeat the process of switching to Apex and deleting Morning to upload this new version.

As for the capitalization, it can be returned to regular capitalization with the following CSS:

.post-date {
  text-transform: none;
}

Hi Ben,

Thanks so much! Everything worked.

Another question,

I have a text widget in the Appearance section. I am trying to include a picture in that text widget. I have included a website that we are trying to model it after.

https://ohsheglows.com/

For example, we have a blurb about ourselves in the right column and we want to include a small picture- just like how her face appears beside it.

Is this possible to do?

Thank you!

If not, is it possible to shade the background of the text? I’d just like our little blurb to stand out a bit more.

Or add a border around the text?

You’re welcome ??

You can add an image to the text widget using HTML like this:

<img src="https://website.com/image.png" />

Copy that and replace the “src” value with the URL to the image. By default, it will display above or below the paragraph text. You can place it to the left by including the image first in the widget, and updating it like this:

<img src="https://website.com/image.png" style="float:left;" />

An alternative would be to use the Image Widget plugin. You could use the description section for the text and that might work pretty well.

This CSS can be used to add a background and border around the text widget:

.widget_text {
  background: #f5f5f5;
  border: #e5e5e5;
}

And this alternative will only put it around the text in the widget (excluding the title):

.textwidget {
  background: #f5f5f5;
  border: #e5e5e5;
}

Hi Ben,

1) For the image to appear, where do I insert the HTML?
2) The CSS code does create a background, however it does that for all the widgets (Instagram, Copyright..) How do I get it so it only shades the text widget?

Thank you!

The HTML can be added into the content section of the Text widget: screenshot.

To make sure the CSS only targets that one widget I need the ID of the widget. The way to find this is by viewing the site, right-clicking the widget, and choosing the “Inspect” option. I know this is a bit techy, but there should be a line highlighted that includes the ID like this: screenshot. The ID will be something like “text-14”.

I think the ID of the widget is:
id=”widget-45_text-2″

Actually I think it’s just id=”text-2″

Thanks!

These snippets should work for modifying the whole widget and alternatively only the text in the widget:

#text-2 {
  background: #f5f5f5;
  border: #e5e5e5;
}

#text-2 .textwidget {
  background: #f5f5f5;
  border: #e5e5e5;
}

Hi Ben,

Another question for you. I’m trying to add bylines for the posts to differentiate between two authors. I’ve created multiple user accounts but the user’s (author’s) name isn’t appearing in the byline. How can I get the author’s name to appear near the date stamp, under the post title?

We can’t thank you enough for all your help!

Stephanie

Hey Stephanie,

This updated version of the child theme should do the trick: download child theme.

That will add the post author’s name after the date on the blog and post pages.

Perfect – everything worked!

I have another question. I have inserted an image into my post, but by doing so it creates an additional 2 lines between image and text below. How do I remove?

I tried to inspect the item, seems like it is a &nbsp which I am not sure to remove. For all images inserted into text, I would like to only have 1 line between image and text, instead of 2.

Also I adjusted to border, margin, padding which didn’t seem to make a difference.

.wp-image-471.alignleft {
margin: 1px 1px 1px 0;
padding: 1px 1px 1px 0;
border: 1px 1px 1px 0;
}

Thanks!

Give this CSS a shot:

.post-content img {
  margin-top: 0;
  margin-bottom: 0;
  border: solid 1px #e5e5e5;
  padding: 6px;
} 

That will reduce the margin above/below the images and add a border. You can modify the color code (#e5e5e5) in the border value to change the color of it. The “padding” value is the space between the border and the image.

As for the extra vertical space, if you switch the editor from “Visual” to “Text”, you’ll be able to see if there are any ” ” codes present and remove them.

Sorry I meant that when I changed the CSS it didn’t do anything to solve the problem. The padding, margin, borders are already reduced to a minimum but the insertion of an image into a post still causes the text below to be pushed down.

Some images push the text more down than others.
How do I adjust so that the spacing is consistent?

Thanks!