Site logo

Archived topic

How I can do this?

13 replies · Started by Former User on August 2, 2021

Viewing posts 1–14 of 14

Hello,

How I can do the following on my website which is the first link bellow:

1) I would like to make feature image full width like happens on second link bellow

2) Remove Author avatar

3) Show Leave Comment link after author name

4) Make authorname, leave comment and post date bold

5) Place Readmore bellow text like on second link

6) Remove padding between posts

Thanks!

Sara

Also one more I forgot

7) How I can add border on container like on link bellow

Hi Sara,

I noticed that you are using a content template to build the blog page, you should be able to edit the content template at appearance > elements.

1) I would like to make feature image full width like happens on second link bellow

Go to the block element, select the container block which holds the featured image, set its left and right margin to -50px.

2) Remove Author avatar

You can do so in the block element.

3) Show Leave Comment link after author name

You can add a headlineblock, and use comments number as dynamic text type. Remember to set it to inline-width. Please refer to the screenshot below:
https://www.screencast.com/t/l42rHS1BHlet

4) Make authorname, leave comment and post date bold

You can do so in the block element.

5) Place Readmore bellow text like on second link

Select the dynamic content block (excerpt), deactivate the Use theme more link option.
https://www.screencast.com/t/aHkzAgQq

Then add a buttons block assign it as a read more button:
https://www.screencast.com/t/RWEyGAupxt

6) Remove padding between posts

Try this CSS:

.blog .site-main > .post, .archive.site-main > .post {
    margin-bottom: 0;
}

7) How I can add border on container like on link bellow

Select the outside container of the entire block element, set its border bottom to 2px:https://docs.generateblocks.com/article/container-overview/#border-size

Here're some videos should be helpful to understand how dynamic block works:
https://www.youtube.com/c/GeneratePress/search?query=dynamic

Hello Ying,

Thanks a lot for the help, got most done just got a few issues that I am listing bellow:

I am having a lot of trouble with elements on point 4 putting author name, post date, etc I am really confuse how this works and what steps I need to take of adding grid or container and how to add the dynamic text.. What I want exactly would be to show:

Updated on Post Date by Post Author

Hello David,

Thanks a lot for the tip, really taught me to use elements and generateblocks the right away and also thank you Leo for that awesome video tutorial, after watching it and doing it myself everything make sense, mostly I was having issues with the inline part that helps you make small blocks on same line.

I had manage to do most on it just need a few things to finish:

1) To add a border of 1px with color #dfdfdf around post listing container and around widgets

2) To also add sane border on categories and tags descriptions

3) Also, I would like to make color on Read more on post listing blue

Thanks

Sara

Hello,

Also two more things:

4) The inline block I created "Updated on Post Date by Post Author" does not show inline in mobile, how I can fix this?

5) On single post how I change text color on post author to #222222

Thanks,

Sara

Lets deal with them a couple at a time.
As you're using a Block Element - You can select the Container Block in the Block Element.

1. in Spacing set the Border width to 1px all round, and set the Color > Border you require.
3. And whilst your in colors you can set the Link Color to Blue.

For 2. You can if you want, create another Block Element, and set select the Page Hero element type, then create your own header like you did for the Post Content Template, to add the archive title and description. Then you can style it how you want :)

Hello David,

Thanks for the fast reply, just few things.

1) I mean to put a border on content wrap and widgets, I mean all around like they have on this first site listed bellow.

2) Will try

3) Did not understand, you mean customizer?

4) The inline block I created “Updated on Post Date by Post Author” does not show inline in mobile, how I can fix this?

5) On single post how I change text color on post author to #222222

Thanks,

Sara

1) I mean to put a border on content wrap and widgets, I mean all around like they have on this first site listed bellow.

That'll be a CSS question, can you open a new topic for this?

3) Did not understand, you mean customizer?

In the block element, select the block, under the color tab, you'll be able to select a color for the links. So all the links in this block will use this color.
https://www.screencast.com/t/2PVBz9XCrwq

4) The inline block I created “Updated on Post Date by Post Author” does not show inline in mobile, how I can fix this?

There is just not enough space for them to be in 1 row:
https://www.screencast.com/t/ecfgNW5ANh

You can add this CSS to customizer > addtional CSS, so that when the screen shrinks, the author line wraps to the 2nd row:

.gb-container.inline-post-meta-area .gb-inside-container {
    flex-wrap: wrap;
}

5) On single post how I change text color on post author to #222222

It's also a block element, so you can select the Headline block (author), under the color tab, change its link color there.

Let me know if you need further assistance :)

Hello Ying,

Thanks a lot for the help, I finally adapt design how I wanted. There is only one last thing I am looking to do which is the following.

How I can place link of Read More more on the bottom like it happens on the links bellow?

Thanks!

Can you open a new topic for a separate question?

Let's keep 1 question per topic.

Thanks!

Hello Leo,

Just did, sorry my bad.

No problem :)

This archived topic is closed to new replies.