[Support request] How I can make this tweaks on Marketer?

[Anonymous]

Hello,

need help to make few changes on my site with marketer from site library that are the following:

1) Change padding on posts listing from 50px to 25px

2) Want to placed text “Updated on ” before post date on post listing and on single post

3) Placed “Read more →” like on second site bellow on the right side

4) Set up same font styles for headers, text, etc. like on second site.

Thanks for your time,

Sara

[Ying]

Hi Sara,

Let’s handle one question at a time.

For your first question, if you only want the change applies to blog/archive page, then try this CSS:

.blog.separate-containers .inside-article, .archive.separate-containers .inside-article {
    padding: 25px;
} 

Otherwise, go to customizer > layout > container, adjust the content padding there.

Let me know if this helps 🙂

[Anonymous]

Hello Ying,

Thanks that worked for point 1, now can we do next points?

1) DONE

2) Want to placed text “Updated on ” before post date on post listing and on single post

3) Placed “Read more →” like on second site bellow on the right side

4) Set up same font styles for headers, text, etc. like on second site.

[Ying]

For question 2, try this CSS:

.inside-article .posted-on > *:before {
    content: "Updated on ";
}

For question 3, go to customizer > layout > blog, enter Read more →to the Read more label field.
Then add this CSS to move it to the right:

a.read-more.button {
    float: right;
}

[Anonymous]

Hello Ying,

1) DONE

2) DONE => Just one question how I change font style or color here?

3) DONE => Just one thing can it be shown like on second site that shows like a link instead of a button? Also is second site using a block element to create this customize blog listing or How we can do this?

4) Set up same font styles for headers, text, etc. like on second site.

Thanks,

Sara

[Ying]

Let’s finish question 2 and 3 first:

2) DONE => Just one question how I change font style or color here?

You can add more style to the same CSS selector, eg:

.inside-article .posted-on > *:before {
    content: "Updated on ";
    font-weight: bold;
    font-family: math;
    color: red;
    font-size: 20px;
}

3) DONE => Just one thing can it be shown like on second site that shows like a link instead of a button? Also is second site using a block element to create this customize blog listing or How we can do this?

The second site is NOT using block element, it looks like using the marketer template as well.

You can add more style to the button as well, something like this:

a.read-more.button {
    float: right;
    padding:0;
    border-bottom: 2px solid green;
    color: green;
    background-color: transparent;
}
a.read-more.button:hover {
    color: black;
}

[Anonymous]

Hello Ying,

Ok that is taking shape now, almost done with this 2 points.

2) DONE =>Just one more question how I change font style or color of rest of sentence author name and post date?

3) DONE => Is it possible to place link a bit lower like on second site? And to change font size or color just edit that same css code correct?

Thanks,

Sara

[Ying]

2) DONE =>Just one more question how I change font style or color of rest of sentence author name and post date?

Try this, you can add more style to it:

.inside-article .entry-meta * {
    color: green;
    font-size: 20px;
}
.inside-article .entry-meta a:hover{
    color: red;
}

3) DONE => Is it possible to place link a bit lower like on second site? And to change font size or color just edit that same css code correct?

You can add margin-top: 40px; to the same CSS selector a.read-more.button.
And font-sizeto the it as well. Feel free to replace the greenand blackcolor with your color code. 🙂

[Anonymous]

Hello Ying

2) One last thing now on mouse hover links dont change color like author link, how I can fix this?

3) DONE

Thanks,

Sara

[Ying]

Try replace this CSS:

.inside-article .entry-meta a:hover{
    color: red;
}

With this:

.inside-article .entry-meta a:hover .author-name {
    color: red;
}

Let me know 🙂

[Anonymous]

Hello Ying,

Yes that worked 🙂

So, we can move on now and go to point 4.

Thanks,

Sara

[Ying]

4) Set up same font styles for headers, text, etc. like on second site.

Do you mean the header of the entire site? Or the post title and paragraph?

Can you explain a bit more?

[Anonymous]

I mean h1, h2, h3, h4, h5, post title, paragraph and links. Either that or make styles look very similar.

[Ying]

You should be able to set font styles at customizer > typography, make sure the typography module is activated. (appearance > Generatepress)
https://docs.generatepress.com/article/typography-overview/

For the colors, try set them at Customizing > Colors > Content. Also make sure the color module is activated.(appearance > Generatepress)

Let me know if you need further assistance 🙂

[Anonymous]

Hello Ying,

What is the font name secondsite use?

[Author]

Posts