How can i resize the metro content ?

Razvan Andrei
asked 11 years ago

Hey,
I bought the theme and i really like it. I want to resize the metro content, it’s a little big for me. I want that the two big squares be like 700×357 and the other 4 little squares to remain at 250×250.
I know this can be done with a code. When you give me the code please tell me where can i change the size of the big squares, because i want to try different sizes to see which one will fit better.
Thank you.

4 Answers

DominicStaff
answered 11 years ago

At the moment, DW Argo does not support to change the two big squares be like 700×357 in the Metro content.

Razvan Andrei
replied 11 years ago

How about this answer -http://cmspioneer.com/designwall/question/metro-slider

What’s that code changing?

Dominic Staff
replied 11 years ago

May you mistake with the question link you mentioned? Regarding the question link attached , we have supported to resize the homepage slider and yes, that’s what users wanted. Regarding your question, our theme, unfortunately, doesn’t yet support right now. Really sorry about that.

Razvan Andrei
answered 11 years ago

Ok. So, can i resize the entire metro box to be smaller?

DominicStaff
answered 11 years ago

Of course ! you can change the metro box to size: 250x 250px. To resize the entire metro box to be smaller, you can open the feature-metro-layout.php file in the folder path “\wp-content\themes\dw-argo”. find/ Replace the line 2 to 42, with new code:

    $metro_args = array();
    $metro_args['posts_per_page'] = 8;
    if(dw_get_theme_option('metro_order')) {
        $metro_args['orderby'] = dw_get_theme_option('metro_order');
        if($metro_args['orderby'] == 'title') {
            $metro_args['order'] = 'ASC';
        } else {
            $metro_args['order'] = 'DESC';
        }
    }
    $metro_cat = dw_get_theme_option('metro_cat');
    if( isset($metro_cat[0]) && $metro_cat[0] > 0 ) {
        $metro_args['category__in'] = $metro_cat;
    }
    $metro_tag = dw_get_theme_option('metro_tag');
    if( isset($metro_tag[0]) && $metro_tag[0] > 0 ) {
        $metro_args['tag__in'] = $metro_tag;
    }
    $metro_query = new WP_Query( $metro_args );
    if ( $metro_query->have_posts() ):
?>
<div class="feature">
    <div id="metro-slide">
        <?php
            $i = 0;
            while ( $metro_query->have_posts() ) : $metro_query->the_post(); 

            $class = "gradient gradient-".$i;

            if ($i < 4) {
                $thumbnail_size = 250;
                $class .= " hentry-small";
            } else {
                $thumbnail_size = 250;
                $class .= " hentry-small";
            }

            if ($i == 4) {
                $class .= " clear-left";
            }
        ?>

Hope this helps !

Razvan Andrei
replied 11 years ago

This works, i can manage with this. Now i have 8 posts that are shown in the metro box, but 2 of them don’t have gradient. How can i put gradient on the last 2 boxes?

DominicStaff
answered 11 years ago

You can add the following code to the style.css file:

.gradient-6:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzliNTRhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc5MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #39b54a), color-stop(100%, #790000));
    background: -webkit-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: -o-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: -ms-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: linear-gradient(135deg, #39b54a 0, #790000 100%)
}
.gradient-7:before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzliNTRhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc5MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #39b54a), color-stop(100%, #790000));
    background: -webkit-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: -o-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: -ms-linear-gradient(-45deg, #39b54a 0, #790000 100%);
    background: linear-gradient(135deg, #39b54a 0, #790000 100%)
}

Hope this helps !

Razvan Andrei
replied 11 years ago

Thx for the fast reply. It works.