[Resolved] post design help

[Tom]

Hi there,

To remove the hexagon, remove this CSS:

.category-list .wp-show-posts .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:before, .category-list .wp-show-posts .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:after {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-color: #ddd;
    position: absolute;
    top: -1px;
    transform: rotate(45deg);
    z-index: -1;
}

.category-list .wp-show-posts .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:before {
    left: -1em;
}

.category-list .wp-show-posts .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:after {
    right: -1em;
}

For the terms/author font styles, you can do this:

.category-list .wp-show-posts-meta a,
.category-list .wp-show-posts-meta a:visited {
    color: #000;
    font-style: italic; /* for example */
}

.category-list .wp-show-posts-meta a:hover {
    color: #555;
}

[William]

Hi Tom,

1. For the rectangle is there a way to have a fixed size and not adjust according to how long the term is. Because if the term has fewer letters the rectangle is also smaller.

2. It works but is there a CSS where I can edit both the term and author font color/style separately? Right now if I change color of the author font it also applies to term font.

Many Thanks!

[David]

1. Edit this CSS and include the min-width property commented below:

.category-list .wp-show-posts .wp-show-posts-entry-meta-below-title {
    position: absolute;
    font-size: .75em;
    text-transform: uppercase;
    padding: .25em;
    top: -2.4em;
    left: 50%;
    transform: translatex(-50%);
    background-color: #ddd;
    min-width: 100px; /* Add this property */
}

2. Use Tom’s code for the Category Meta and these specific rules for the footer entry meta like so:

.category-list .wp-show-posts-entry-meta-below-post a,
.category-list .wp-show-posts-entry-meta-below-post a:visited {
    color: #000;
    font-style: italic; /* for example */
}

.category-list .wp-show-posts-entry-meta-below-post a:hover {
    color: #555;
}

[William]

Hi David,

Works perfectly! Thank You!

[David]

You’re welcome

[William]

Hi David, so I recently switched themes within Generatepress and was wondering if you can provide a new CSS code to make the same post design as before. When I use the old CSS it doesn’t seem to work.

The site is password protected so here’s the password: Generatepress

Thanks in advance!

[David]

So this is the final CSS ( that i know of ):

.category-list .wpsp-content-wrap {
    padding: 10px;
    text-align: center;
    position: relative;
}

.category-list .wp-show-posts-inner {
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.09);
}

.category-list .wp-show-posts-entry-title {
    font-size: 16px;
}

.category-list .wp-show-posts-entry-meta-below-title {
    position: absolute;
    font-size: 0.75em;
    text-transform: uppercase;
    padding: 0.25em;
    top: -2.4em;
    left: 50%;
    transform: translatex(-50%);
    background-color: #ddd;
    min-width: 100px;
}

.category-list .wp-show-posts-entry-meta-below-title .wp-show-posts-terms {
    position: relative;
    font-size: 1em;
}

.category-list .wp-show-posts-image img {
    width: 100%;
}

.category-list .wp-show-posts-entry-meta-below-post a,
.category-list .wp-show-posts-entry-meta-below-post a:visited {
    color: #000;
    font-style: italic; /* for example */
}

.category-list .wp-show-posts-entry-meta-below-post a:hover {
    color: #555;
}

The other requirements are as follows:

1. The WPSP Shortcode has to be added like so:

<div class="category-list">
Add you WPSP Shortcode here
</div>

2. We need to hook in our content wrapper. By create 2 x Hook Elements:

https://docs.generatepress.com/article/hooks-element-overview/

2.1 Hook #1 – WPSP Open Wrapper

Add this to the content:

<div class="wpsp-content-wrap">
<!-- Openeing wrapper -->

NOTE: the editor will automatically add a closing </div> – DELETE it.

Select from Hook List: Custom Hook
Add to Custom Hook Name: wpsp_before_header
Priority: 15
Display Rules: Entire Site

2.2 Hook #2 – WPSP Close Wrapper

Add this to the content:

<!-- Close WPSP Wrapper -->
</div>

Select from Hook List: Custom Hook
Add to Custom Hook Name: wpsp_after_content
Priority: 15
Display Rules: Entire Site

[William]

Hi David! Thank you for your awesome support! I managed to create the design just like the way I wanted! Cheers!

[David]

You’re welcome

[Author]

Posts