Edin: Add 2nd hero image to Front Page lower down

scottiehack · Member · Apr 27, 2017 at 10:54 am
Copy link

Add topic to favorites
Hi is it possible with CSS to either add a second hero page lower down the Front Page (like at the top) or can one of the front page widgets be changed to be a full width clickable image?

Also interested on the image widgets anyway to get the captions to not be centred but aligned left like normal text.

Sorry total beginner here.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 27, 2017 at 8:48 pm
Copy link
Hi, we can’t actually add a “hero” section with CSS, but there are ways to add images to sections with CSS. Where are you wanting the image exactly, and if you have it uploaded to your media library, can you paste in the URL of that image? It would be very helpful to have the image to work with since the code will partially depend on the size and proportions of the image.

On the captions on the image widgets, add the following to left align the captions on the image widgets on the front page.
```
.front-page-widget-area .widget_image figcaption {
	text-align: left;
}
```
scottiehack · Member · Apr 28, 2017 at 8:10 am
Copy link
Hi thanks for the caption CSS worked a treat. Honestly haven’t got the final image yet but for example if I wanted to repeat this https://armstrongconsulting.files.wordpress.com/2017/03/strongarmssimage21.jpg on the front page lower down, either between the front page widgets, or before or after them, as a divider how would I do that? If it was clickable even better.

Cheers
thesacredpath · Member · Apr 28, 2017 at 10:49 pm
Copy link
We could do the following, which adds the image between the footer area and widget area. There isn’t a way to make it clickable though with CSS.
```
#colophon:before {
	background: url('https://armstrongconsulting.files.wordpress.com/2017/03/strongarmssimage21.jpg') repeat-x center center / cover;
	content: "";
	display: block;
	height: 150px;
}
```
I’ve set the background to “cover”. You might want to change that to “contain” and see the effect. Not sure which you would prefer. Also, you can change the 150px height I have in the example.
scottiehack · Member · Apr 29, 2017 at 8:40 am
Copy link
Brilliant thanks very much, that will work and can adapt etc

One last question – the widget size for the images on my front page are all set the set height & width but they still don’t appear uniform in size. Any reason, is it to do with the source picture?

Thanks

Scott
scottiehack · Member · May 1, 2017 at 2:47 am
Copy link
Hi, I’ve sorted my images on the front page and I’m almost happy with what I’ve got, but I do have two questions.

1) How can I change the thumbnail that is shown when I post the link to the site – such as in emails or LinkedIn etc?

2) Is there anyway to get the primary menu to show at the top of the page above the site title?

Thanks

Scott
thesacredpath · Member · May 3, 2017 at 2:40 am
Copy link
Hi Scott,

1) How can I change the thumbnail that is shown when I post the link to the site – such as in emails or LinkedIn etc?

In general, for emails to subscribers, it should pull and use a featured image, if you have one set on your posts. As far as on posts and pages shared on other sites, that is sort of up to the site, but generally they will pull the featured image, or the first image in a post or page.

2) Is there anyway to get the primary menu to show at the top of the page above the site title?

We can do that with the following CSS, but first the caveat: this works with most all browsers back at least a few years, but in the case of Internet Explorer, only on IE10 and later.
```
@media screen and (min-width: 1020px) {
	.site-header {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms--flex-direction: column;
		flex-direction: column;
	}
	.navigation-classic .primary-navigation {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
		border-top: none;
	}
	.header-wrapper {
			-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
	}
}
```
The above is set to apply at screen/window widths where the full menu is show since below that point, you have the touch menu toggle and that is to the right, or above the site title.

No items found.