Custom Blog Post Archive Page

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!

Hello,

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

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.

Hello,

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

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

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

Hello,

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

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;
}

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

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 →

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.

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 :)

//

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