Copy the home pinterest home

[BarbITA]

Hello, I tried to copy the Pinterest demo content, but some things are smoothly differents.

For example the news doesn’t pop up like in the demo, and if I try to change the background this is what I get:

How can I change these things?

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Make sure you have animations activated from wp-admin -> theme options -> miscellaneous -> Site-Wide Animations* -> should be ON

If yes use this css

COPY CODE

.home .posts-listing.kleo-masonry,
.home .kleo-masonry article {
    background: red !important;
}

Css will be added to wp-admin -> theme options -> general settings -> quick css

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[Radu]

Also the css will color the margins of the items from the list, so all will be red

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[BarbITA]

thanks, the animations now works!

For the margins I mean: I would like to add a grey background like in this demo http://seventhqueen.com/themes/kleo/pinterest/ , but when I try I have these white margins.

It seems too that the post boxes are smaller than this one, maybe this is the problem (?)

[Radu]

Hi,

Add this css to wp-admin -> theme options -> general settings -> quick css

COPY CODE

.home article.post-item { background: #f7f7f7 !important;}
.home .main-color blockquote, .main-color .masonry-listing .post-content { background:#fff;}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[BarbITA]

that’s nice, works perfectly!

One last thing: on mine homepage the box width are 380px and on the pinterest demo are 400px.
How can I make like these last?

[Radu]

On my computer it looks same

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[BarbITA]

hello Radu, if you notice there’s a little bit less space between columns, so the post box are bigger

How can I reduce this space? All the gap form is on 0

[Radu]

Hi,

Replace from wp-admin -> theme options -> general settings -> quick css

this :

COPY CODE

.home article.post-item { background: #f7f7f7 !important; }

TO :

COPY CODE

.home article.post-item {
    background: #f7f7f7 !important;
    padding: 5px;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[BarbITA]

genius, thanks so much Radu!

[BarbITA]

radu one last thing please: I would set a minimum height on the post box of 510 px, where can I put the code?
It’s “min-height: 510px;” right? I tried to put in that code that you gave me but doesn’t work there.

[Radu]

Hi,

Using the masonry style… you cannot set a min height limit for those because they are controlled by a javascript that calculates the available spaces to be populated with posts.

Anyway you can use this css

COPY CODE

.home article .post-content {
    min-height: 470px;
}

Replace 470 with your desired value

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[BarbITA]

it works perfectly, thanks so much radu!

[Radu]

You’re welcome

Have a nice week end

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Radu]

Please don’t forget to rate us 5 stars at themeforest if you have time and also will be useful for us and for rest of the users if you will leave a short review about the customer support service.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[BarbITA]

yes sure!
where I can leave the review?

[BarbITA]

uff, radu, one last thing please:
1. now the footer (like and read more) isn’t matching on the box bottom
2. how can I set more text to show in excerpt?
3. How can I set another phrase to “read more”? (I would set “Continua a leggere”)

Thanks. Then we finished, I promise!

[Radu]

Hi again,

1. Sincerely i don’t understand, i’ve looked at your footer and i everything it’s fitting ok.

2. Follow this KB link please : https://archived.seventhqueen.com/kleo/article/limit-excerpt

3. You can change the Read More text by copying this file : /kleo/wp-content/themes/kleo/page-parts/post-content-masonry.php to /wp-content/themes/kleo-child/page-parts/ then edit the file that you have copied to child theme, open the file and around line 202 you will see the read more string, see the attached screenshot for additional hints.

Have a nice week

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[BarbITA]

oh sorry, I mean the “footer” of the kleo posts, the bottom!

[BarbITA]

Radu I’ve tried to modify the file to make the excerpt longer but.. it doesn’t work, it still remain the same.

Attachments:

You must be logged in to view attached files.

[Radu]

Instead of 20 please put a higher value like 90 or 140… and let me know then, also if you have any cache plugins make sure you have cleared the cache

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[BarbITA]

nothing radu, doesn’t work.

And for the other thing? The Like and Read more button that are in the middle of the kleo posts?

[Radu]

Hi,

Try this function instead

COPY CODE

if ( ! function_exists( 'kleo_excerpt' ) ) {
    function kleo_excerpt( $limit = 80, $words = true ) {

        $excerpt_initial = get_the_excerpt();
        if( $excerpt_initial == '' ){
            $excerpt_initial = get_the_content();
        }
        $excerpt_initial = preg_replace( '<code>\[[^\]]*\]</code>', '', $excerpt_initial );
        $excerpt_initial = strip_tags( $excerpt_initial );

        if ( $words ) {
            $excerpt = explode( ' ', $excerpt_initial, $limit );
            if ( count( $excerpt ) >= $limit ) {
                array_pop( $excerpt );
                $excerpt = implode( " ", $excerpt ) . '...';
            } else {
                $excerpt = implode( " ", $excerpt ) . '';
            }
        } else {
            $excerpt = $excerpt_initial;
            $excerpt = substr( $excerpt, 0, $limit ) . ( strlen( $excerpt ) > $limit ? '...' : '' );
        }

        return '' . $excerpt . '
';
    }
}

Replace 80 with your desired value

For the rest of the strings that you want to rename it/translate it use the next procedure :

Theme strings and plugins strings can easily be changed by using Loco Translate plugin https://wordpress.org/plugins/loco-translate/

A small introduction on how translations work

Translatable strings can come from the theme or from the installed plugins. You need to translate the theme or the plugin depending on what section of the site your string is found.

For example if your string is on your BuddyPress profile then most probably you will need to translate BuddyPress plugin. If you are on the Forums section of your site then bbPress plugin should be the one that needs to be translated. Another example is the rtMedia plugin that adds the Media links to BuddyPress and if you want to translate it then this plugin will contain the string.

Follow these steps to get you started:

• Install Loco Translate plugin
• Go to the plugin dashboard: WP Admin – Tools – Manage translations
• Find the theme or plugin in the list.
• If the language isn’t already in the list then click Add new language, choose your language and if you are asked where you want to save the language files choose global language directory ( wp-content/languages/ ).
• Press SYNC button to synchronise your translation with the provided .pot file
• Search for the string you want to translate and add your translated string.
• Press Save when you finished your translation.

Note: You will have to set the language for your blog from WP-admin – Settings – General – Site Language – Choose your language

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts