Your account expired support, please renew to get your support.

Home Forums Themes Support Clarivo Add READ MORE button

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5211
    tomaz92
    Support Expired

    Hi,

    I have news on my front page and want to have also READ MORE(BERI DALJE in my language) button at the end of news.
    I have attached 2 pictures, first picture is how it looks on my page and the second picture it is how I want it to look with the button.
    Thanks

    Best Regards

    Attachments:
    You must be logged in to view attached files.
    #5223

    Hi,
    We can’t login your site and get this issue: https://prnt.sc/rlx1nq
    However we checked your site on Frontend and you can do it via child theme follow this topic tutorial:

    How to customize WordPress theme using Child theme


    We see you are using Haru Recent News shortcode with layout carousel:
    https://prnt.sc/rlx37o
    So in this case the template you need customize is:
    wp-content/plugins/haru-clarivo-core/templates/recent-news/carousel.php
    You can add this code at where you want to show Read More button:

    <div class="icon-readmore">
        <a href="<?php echo esc_url( get_the_permalink() ); ?>" title="<?php echo esc_attr( get_the_title() ); ?>" target="_self"><?php echo esc_html( 'Read More', 'haru-clarivo' ); ?></a>
    </div>

    Here is example to change:

    <?php
    /**
     * @package    HaruTheme
     * @version    1.0.0
     * @author     Administrator <admin@harutheme.com>
     * @copyright  Copyright (c) 2017, HaruTheme
     * @license    http://opensource.org/licenses/gpl-2.0.php GPL v2 or later
     * @link       http://harutheme.com
    */
    
    extract( $atts );
    
    $args = array(
        'posts_per_page' => $posts_per_page,
        'orderby'        => $orderby,
        'order'          => $order,
        'category_name'  => strtolower($category),
        'post_status'    => 'publish'
    );
    
    // If data_source = list_id
    if ( $data_source == 'list_id' ) {
         $args = array(
            'posts_per_page' => $posts_per_page,
            'orderby'        => $orderby,
            'order'          => $order,
            'post_status'    => 'publish',
            'post__in'       =>  explode( ',' , $post_ids )
        );
    }
    $recent_news = new WP_Query($args);
    // Enqueue assets
    if ( $layout_type == 'carousel' || $layout_type == 'carousel_2' ) {
        wp_enqueue_style( 'owl-carousel', get_template_directory_uri() . '/assets/libraries/owl-carousel/assets/owl.carousel.min.css', array(),false );
        wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/assets/libraries/owl-carousel/owl.carousel.min.js', false, true );
    }
    ?>
    <?php if ( $recent_news->have_posts() ) : ?>
        <div class="recent-news-shortcode-wrap <?php echo esc_attr($layout_type . ' ' . $el_class); ?>">
            <div class="haru-carousel recent-news-container owl-carousel owl-theme"
                data-items="<?php echo esc_attr($columns); ?>"
                data-items-tablet="2"
                data-items-mobile="1"
                data-margin="30"
                data-autoplay="<?php echo esc_attr($autoplay); ?>"
                data-slide-duration="<?php echo esc_attr($slide_duration); ?>"
            >
                <?php while( $recent_news->have_posts() ) : $recent_news->the_post(); ?>
                <?php $thumbnail_url = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) ); ?>
                <article class="recent-news-item">
                    <div class="post-thumbnail">
                        <div class="post-image">
                            <?php the_post_thumbnail(); ?>
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-meta">
                            <div class="post-meta-date"><?php echo date_i18n( get_option( 'date_format' ), strtotime(get_the_date('Y-m-d')) ); ?></div>
                            <div class="post-meta-author"><span class="post-by"><?php echo esc_html__('by', 'haru-clarivo') ?></span>
                                <?php printf('<a href="%1$s">%2$s</a>', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_html( get_the_author() )); ?>
                            </div>
                        </div>
                        <h3 class="entry-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                        <div class="post-excerpt">
                            <?php 
                                if ( has_excerpt() ) {
                                    echo wp_trim_words( get_the_excerpt(), $excerpt_length, '...' );
                                } else {
                                    echo wp_trim_words( get_the_content(), $excerpt_length, '...' ); 
                                }
                            ?>
                        </div>
                        <div class="icon-readmore">
                            <a href="<?php echo esc_url( get_the_permalink() ); ?>" title="<?php echo esc_attr( get_the_title() ); ?>" target="_self"><?php echo esc_html( 'Read More', 'haru-clarivo' ); ?></a>
                        </div>
                    </div>
                </article>
                <?php endwhile; ?>
            </div>
        </div>
    <?php else : ?>
        <div class="item-not-found"><?php echo esc_html__( 'No item found', 'haru-clarivo' ) ?></div>
    <?php endif; ?>

    Hope this help!

    ****
    Regards,
    HaruTheme

    #5224
    tomaz92
    Support Expired

    Hi, thanks.
    I have added this code to .php file but it now only shows TEXT with link. It does not show button like on the other pages. I have also enabled access so now You will be able to connect to my website. If You can please fix this. Thanks

    Attachments:
    You must be logged in to view attached files.
    #5227

    You need add custom CSS code in Appearance -> Customize -> Additional CSS or add it in child theme:

    .recent-news-shortcode-wrap.carousel .icon-readmore a {
    background-color: #75b239;
        background-image: none;
        color: #fff;
        font-weight: 600;
        padding: 8px 15px;
        text-transform: uppercase;
        border-radius: 0;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    .recent-news-shortcode-wrap.carousel .icon-readmore a:hover {
    background-color: #336504;
    }

    How can get this code please see in this video tutorial:

    ****
    Regards,
    HaruTheme

    #5228
    tomaz92
    Support Expired

    thanks, now I have managed to do it 🙂
    Now I would just want it to show in the next row?
    So it would have 1 line of space after text and then the button for READ MORE.
    thanks!!!

    #5229

    So you need change the code to:

    .recent-news-shortcode-wrap.carousel .icon-readmore a {
        background-color: #75b239;
        background-image: none;
        color: #fff;
        font-weight: 600;
        padding: 8px 15px;
        text-transform: uppercase;
        border-radius: 0;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        display: inline-block;
        margin-top: 15px;
    }

    You need add

    display: inline-block;
    margin-top: 15px;

    If you have time you can learn quick tutorial about CSS here:
    https://www.w3schools.com/css/

    Hope this help!

    ****
    Regards,
    HaruTheme

    #5230
    tomaz92
    Support Expired

    I have fixed it, have added style margin-top to carousel.php.
    thanks

    #5231

    Thanks for your feedback!
    You should do it via child theme.

    ****
    Regards,
    HaruTheme

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.