George
asked 5 years ago

Hello! Can you help me with edition news_slider css? I want completly remove right column with news headers and change navigation like this. ![like this](http://i.imgur.com/yIJ4CnF.jpg "enter image title here")
1) found how remove right column: .dw_focus_widget_news_slider .carousel-navigation, .widget_news-slider .carousel-navigation { display: none;} but can not resize picture width to the home content width (850 or at least 770px)
2) how to put main header in the center of the slider?
3) how to add navigation arrows on sides of the slider?

Thanks.

1 Answers
DominicStaff
answered 5 years ago

Hi,
To make the slider as you mentioned here, you can add the following code to the Custom CSS in the Dashboard > DW Focus.

.dw_focus_widget_news_slider .carousel-navigation {
    display: none;
}
.dw_focus_widget_news_slider .carousel-inner, .widget_news-slider .carousel-inner {
    width: 844px;
}
.dw_focus_widget_news_slider .carousel-inner img, .widget_news-slider .carousel-inner img {
    width: 844px;
}

.carousel-widget-slider { 
    background: none;
    top: auto;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    border-radius: 30px;
    opacity: 1;
    text-shadow: none;
    color: #fff;
    font-size: 11px;
    line-height: 28px;
    top: 50%;
}
.dw_focus_widget_news_slider .carousel-entry .carousel-caption, .widget_news-slider .carousel-entry .carousel-caption {
    top: 25%;
    left: 20% !important;
    text-align: center;
}

Open the wp-content\themes\dw-focus\inc\widgets\dw-focus-news-slider.php file. Add the following code under line 121:

<a class="left carousel-control carousel-widget-slider" href="#carousel-<?php echo esc_attr( $args['widget_id'] ); ?>" role="button" data-slide="prev">
<span class="fa fa-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control carousel-widget-slider" href="#carousel-<?php echo esc_attr( $args['widget_id'] ); ?>" role="button" data-slide="next">
<span class="fa fa-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<ol class="carousel-indicators">
<?php for ( $j = 0; $j < $i; $j++ ) : ?>
<li data-target="#carousel-<?php echo esc_attr( $args['widget_id'] ); ?>" data-slide-to="<?php echo esc_attr( $j ); ?>"<?php echo $j == 0 ? ' class="active"' : ''; ?>></li>
<?php endfor; ?>
</ol>

Hope this helps !

leprotravel
replied 5 years ago

First part works perfetcly! Thanks! But navigation arrows not displaying on slider.

dominic Staff
replied 5 years ago

Please send me username & password of your site (via private naswer) for further checking.

leprotravel
replied 5 years ago

Done

dominic Staff
replied 5 years ago

I have helped you resolve this issue, you can check your site now.

leprotravel
replied 5 years ago

Thank you so much. I fought two evenings with this problem. Now I can sleep peacefully.

Powered by DW Question & Answer Pro