[Resolved] Create lines and horizontal titles

[bradborland]

Hello,

I just had a couple of quick questions:

1. Am I able to create lines? For example, a thin line under my menu buttons or a thin line between posts on the front page or between sidebar widgets?

2. Is there a way to have the titles of posts on the front page appear beside the picture, as in horizontally instead of over or under the pics?

Thanks so much!

[Tom]

Hi there,

1. We don’t have any border options as of right now, but we do have some planned. All of this can be done using CSS though, which we’re happy to help with if needed 🙂

2. The featured images have location and alignment settings which may help: https://docs.generatepress.com/article/adjusting-the-featured-images/

Let me know 🙂

[bradborland]

Thanks so much!

1. Yes! I would love some CSS advice on lines. 🙂

2. Okay, I looked into this. First there isn’t an option for the title and article blurb to be next to the picture just an above and below option. Second, do I need to apply the featured image feature. If so, what’s the difference between just displaying the posts image and using the featured image? In other words, what exactly is a featured image?

Thanks!

[David]

Hi Brad, lets deal with number two first then we can look at the CSS for borders.

In the blog settings you can set the featured image to a smaller size and set the alignment to left.

[bradborland]

So after I set the featured images smaller (width and height) I set the location above or below title?

[David]

If you set the Image above title then the title and the excerpt will be displayed to the side of the image. Note on image sizes you can just set the width and leave the height as auto.

[bradborland]

Thanks!

So what about lines? Below menu and separate posts and widgets?

[David]

For the blog posts and the side-bar widgets you can add this CSS:

.blog .post .entry-content,
.archive .post .entry-content {
	padding-bottom: 2em;
	border-bottom: 1px solid #000;
}
.sidebar .widget {
	border-bottom: 1px solid #000;
}

For the menu do you want these lines to static, so visible always or when the a link is hovered or active?

[bradborland]

Just a line separating the top menu from the rest of the content below.

[David]

You can add a border to the site header like so:

.site-header {
	border-bottom: 5px solid #000;
}

[bradborland]

for some reason the widget line works but not the post lines…

[bradborland]

Awesome help by the way!

[David]

I edited the code above to include the archive page. Give that a go. Fingers crossed. You’re welcome!

[bradborland]

Yes!!! It worked. Thank you so much!

[David]

Glad i could help!

[Author]

Posts