[Resolved] Custom Blog Post Archive Page

[Dev]

Hello,

I want to display my blog post archive page almost the same, as in the below screenshot.

https://prnt.sc/w4ozmd

Please let me know how I can achieve it. The site in the screenshot is built on Generatepress only.

[Tom]

Hi there,

You can set the image alignment and sizes in Customize > Layout > Blog.

Once you’ve done that, feel free to link us to the site and we can help with the read more button CSS.

Thanks!

[Dev]

Hello,

But there is no option to bring an excerpt text on the right side of the image.

[Tom]

The excerpt can’t be long enough to wrap – you need to set the excerpt length to something short enough to sit next to the image. Or, you can increase the height of the image.

[Dev]

Hello,

Sorry to message you back but is there a post or something related to this.

[Leo]

Not sure if I understand. Tom’s explanation should answer the question.

Any chance you can link us to the page in quesiton?

[Dev]

Hello,

Okay, I had made the changes. Now I need the read more button CSS.

[David]

Hi there,

this is the CSS that site uses for its Read More:

a.read-more.button {
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0);
    color: #115cfa;
    text-decoration: none;
    background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
    padding: 10px;
    font-weight: bolder;
}
a.read-more.button:hover {
    color: #115cfa;
    background-size: 100% 6px;
    background-color: #115cfa00;
}

[Dev]

Hello,

Sorry I need a few changes in the CSS code. Please check the image.

https://prnt.sc/w5hbj9

For arrow please check this image link: https://prnt.sc/w4ozmd

[Tom]

Hi there,

Simply change the color values in your CSS to reflect the ones you want.

For the arrow, update the read more text in the Customizer with it: Read More →

[Dev]

Hello,

I change the color, but it’s not going as per the need.

The button is showing a blue CONTINUE READING. I want that blue to be in this color #2c3532

Then when someone clicks the button, the GREEN line runs from left to right. I want this color #f58000
rather than green for that line.

TOM is saying – For the arrow, update the read more text in the Customizer with it: Read More →

Do I need to put → next to CONTINUE READING in customizer-layout-blog

Please let me know.

[Tom]

This part is the blue: color: #115cfa;

Change that to the color you want to use instead.

The color (#2ed392) in this part is the green line: background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );

Change that to the color of the line you want to use.

Then, change the color of the hover values as well as needed.

Do I need to put → next to CONTINUE READING in customizer-layout-blog

Correct 🙂

[Alexandru]

//

[David]

Hi Alexandru – did you meant to post a question? Let me know

[Author]

Posts