Home › Forums › Pro Support › How to edit card layout, Would I like my cards to look like these?
- This topic has 9 replies, 2 voices, and was last updated 2 years ago by
elvin.
-
AuthorPosts
-
August 29, 2021 at 3:49 pm #33282
Cristiano
ParticipantI’m trying to edit my cards so they look like these on this site below, could you help me?
Mainly the mouse over shading effects
Card 01:
Card 02
Card with list of trending articles:
Related Posts:
I’m using:
the mod (here on the forum) that makes the category name appear before the title
The Premium GP Plugin β’ Version: 2.0.3
The WP Show Posts Pro – Developer – 1.2.0There is no sensitive area here, how can I send my demo site and inspiration site addresses for you to review?
thank you very much for your attention
August 29, 2021 at 7:33 pm #33289elvin
ModeratorHi there,
Do you want to copy the exact same CSS styling done on these examples?
If yes, can you link us to the page you saw these? We can get the styling from there and convert it for. π
You can send the details using our contact page – https://wpshowposts.com/contact/
August 30, 2021 at 2:33 am #33298Cristiano
ParticipantHi there,
Do you want to copy the exact same CSS styling done on these examples?
Yes!
If yes, can you link us to the page you saw these? We can get the styling from there and convert it for. π
You can send the details using our contact page β https://wpshowposts.com/contact/
I sent it to you, thank you so much for your attention!
August 30, 2021 at 7:02 pm #33321elvin
ModeratorThank you.
The shadow effect and rounded corners can be done with this CSS:
.wp-show-posts-inner { box-shadow: 5px 5px 0 rgb(0 0 0 / 3%); border-radius: 9px 9px 9px 0; }
The hover effect can be done with this –
.wp-show-posts-inner:hover img { transform: translateZ(0) scale(1.03,1.03); } .wp-show-posts-inner img { transition: transform .5s ease-in-out; filter: grayscale(1%); }
As for the actual post layout, it’s pretty close to “Base” from the Cards style dropdown. You can try using that. π
August 31, 2021 at 5:17 pm #33348Cristiano
ParticipantThe effects were great, thanks a lot!
I made a few attempts (on my demo site I already sent the link), but I was unsuccessful, furthermore
I would like to create something like this:
But I only got this:
I cannot increase the size of the featured post title.
I cannot remove the two images (from the two boxes) below the featured posts
I can’t shrink the space below the second column heading
I can’t create a Trending, as in the first image.Can you help me, please?
August 31, 2021 at 10:20 pm #33366elvin
ModeratorI cannot increase the size of the featured post title.
Is it only for the featured post title? If so, you’ll have to do it with custom CSS.
Since the featured post is the first post, we can do something like this:
section#wpsp-123 article:first-child h2.wp-show-posts-entry-title a { font-size: 60px; }
replace 123 with the wpsp list ID.
I cannot remove the two images (from the two boxes) below the featured posts
Are the posts below the featured post coming from the same list? Can you link me to the page in question?
I canβt shrink the space below the second column heading
I believe it was made that way to at least keep the same height for visual balance between the post cards. Are you trying to do otherwise?
Or perhaps, are you trying to make the images go the same height?
Note: this is tricky to deal with as we’ll have to consider the length of the title of the posts. Some are longer than others.
I canβt create a Trending, as in the first image.
Trending seems to be a sidebar. You’ll have to add a WPSP list there with a WPSP list setting only showing the post title and your preferred post meta (and w/o a card style).
September 1, 2021 at 8:32 am #33388Cristiano
ParticipantHello, I sent the information by email, Thanks!
September 1, 2021 at 9:17 pm #33403elvin
ModeratorCan you try adding
same-height
CSS class the left and right column container on test page/test-02/
?And then add this CSS:
.same-height .gb-inside-container, .same-height .gb-inside-container section#wpsp-727{ height: 100% !important; }
This would be the result – https://share.getcloudapp.com/12uv0pxm
As for /test-01/
Consider changing the site of the image. This should automatically push down the 2 posts below it. Similar to
/test-02/
‘s layout.September 2, 2021 at 8:19 am #33408Cristiano
ParticipantIt worked, thank you very much!
September 2, 2021 at 7:51 pm #33444elvin
ModeratorNice one. No problem. π
-
AuthorPosts
- You must be logged in to reply to this topic.