Static Homepage On Arctic Site Inquiry

Hi there,

its not easy - see this topic here which explains how Dispatch creates that header:

https://generatepress.com/forums/topic/how-can-i-put-something-like-this-on-my-front-page-homepage/#post-1439597

You rock David! Thanks.

You're welcome

Hello David,

I created the grid/header for my site following the steps you gave in this page: https://generatepress.com/forums/topic/how-can-i-put-something-like-this-on-my-front-page-homepage/#post-1439597 and it looks great! However, I would like to change the following things of the grid:

1. How can I have a featured video display inside the grid (and autoplay, whenever a user is looking at the grid on the homepage)
2. I noticed that the grid displays the most recent posts, and then directly below the grid I can see the same list of posts are repeated, how can I change it so the posts below the grid are not repeated below if they're showing above in the grid?
3. How can I set a transparent black background color for the titles inside the grid, and have the colors of title letters be white?

I have linked to my site and the grid in the private info field, in case you want to take a look. Thanks!

Hi there,

1. How can I have a featured video display inside the grid (and autoplay, whenever a user is looking at the grid on the homepage)

You'll have to add a custom field to your posts containing the video and then modify the WPSP list with filters and hooks to add your video. That'll be a bit tricky to do as WP Show Posts isn't made for this.

The autoplay needs a custom script. This is out of our scope, unfortunately.

2. I noticed that the grid displays the most recent posts, and then directly below the grid I can see the same list of posts are repeated, how can I change it so the posts below the grid are not repeated below if they’re showing above in the grid?

Change their respective queries on their WPSP edit page. You may have to set an offset value to the one below the grid so they don't display the same posts.

3. How can I set a transparent black background color for the titles inside the grid, and have the colors of title letters be white?

This is done through CSS. Can you explain a bit more on how you want it to appear? Perhaps a mockup image of how you want it to look like? So we can have a better picture of what go for on the CSS write up.

Let us know.

1. Thanks, I think I found a plugin that I can use to autoplay featured videos.

2. Alright!

3. I have managed to get the title letters' color to be white, however I am missing the black background behind each individual title. I have attached a screenshot in the private info field that illustrates what I mean.

Let me know if you need anything else! :)

Thanks!

3. I have managed to get the title letters’ color to be white, however I am missing the black background behind each individual title. I have attached a screenshot in the private info field that illustrates what I mean.

Do you only want it on the title?

If so, add this CSS:

.wpsp-card .wp-show-posts-entry-title {
    background-color: rgba(0,0,0,.5);
}

If you want both the meta and the title to be wrapped in 1 background, try this CSS:

.wpsp-card header.wp-show-posts-entry-header {
    background-color: rgba(0,0,0,.5);
}

If you want both the meta and the title to have the same background but separately, try this CSS:

.wpsp-card .wp-show-posts-entry-title, .wpsp-card .wp-show-posts-entry-meta {
    background-color: rgba(0,0,0,.5);
}

I tried all CSS codes you gave me but did not work. After I put one of them together with the code David provided like this:

.wpsp-card .wp-show-posts-entry-title a {
font-size: 30px;
font-weight: bold;
color: #fff;
background-color: rgba(0,0,0,.5);
}

it worked but not for the category meta below the post title. I wonder why it does not work for the category meta below as well. Please see screenshot in the private info field.

That's strange.

Can you tell us how you're adding the CSS?

Can you use the Appearance > Customize > Additional CSS and try this?

.wpsp-card .wp-show-posts-entry-title, .wpsp-card .wp-show-posts-entry-meta {
    background-color: rgba(0,0,0,.5);
}

I'm using the Simple CSS plugin. I tried via the additional CSS with your code but it didn't work.

I am attaching a screenshot of my Customizer via the Simple CSS plugin (in the private info field) so you can see the CSS I have in there.

Also, besides getting both the title and category meta to be wrapped each in different black backgrounds, how can I change the color of the category meta below(which is currently black and difficult to see) to white? (Please see screenshot #2)

1. Screenshot of my CSS via Simple CSS plugin: https://screencast-o-matic.com/watch/crfv3fVeCCb
2. Screenshot of the black color of the category meta I'd like to change: https://screencast-o-matic.com/i/crfv31VeCCB

Thanks!

Hi there,

Try this instead:

.wpsp-card .wp-show-posts-entry-header {
    background-color: rgba(0,0,0,.5);
}

.wpsp-card .wp-show-posts-entry-title a {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}

Let us know :)

Hello Tom,

Sorry for the hassle, I tried your code, but this is how it looks: https://screencast-o-matic.com/i/crhVrAVeEyZ. Both the meta and the title are wrapped in 1 background(a separate background for each one would better), the meta is black and invisible in the black background, and there is extra background space expanding outside of the title.

I'm happy with the way the title looks now. Currently, the title is perfectly OK(white in color and wrapped in a black background, and with no extra background space expanding outside of it). I'm just missing the meta. I would like the meta to be white(to of course, be visible in the black background) and wrapped in black as well in its own separate, black background. I have explained this in a screenshot: https://screencast-o-matic.com/i/crhV31VeEas

I don't know why I seem to be having such trouble with this. I can easily facilitate access to the backend if necessary. Thanks! :)

Aha, in that case I would do this:

.wpsp-card .wp-show-posts-entry-title {
    font-size: 30px;
    font-weight: bold;
    background-color: rgba(0,0,0,.5);
}

.wpsp-card .wp-show-posts-entry-title a {
    color: #fff;
}

.wpsp-card .wp-show-posts-entry-meta {
    background-color: rgba(0,0,0,.5);
    margin-top: 10px;
}

.wpsp-card .wp-show-posts-entry-meta a {
    color: #fff;
}

Let us know :)

Thanks Tom! It worked(Almost). I'm so glad. How can I get rid of this redundant, extra background wrapping?: https://screencast-o-matic.com/i/crhecCVemRI (I have put it in red circles).