Jeremy Zauder
asked 10 years ago

We’d like to have a three-column slider in the Home Content area. Normally, the News Carousel widget is 4 columns and only works properly in the Bottom area. Is there a way to modify this widget to make it 3 columns and work in the Home Content? We tried putting the widget in Home Content, and it becomes 3 columns and looks fine except for an additional linked “0” or “1” in a <ul></ul> below the slider. Is there a way to get rid of that <ul> if we put it in the Home Content? Or any other ideas to make a 3-column slider in the Home Content? Thank you.

1 Answers
answered 10 years ago

If you want to display the carousel widget in the Home content. After add the carousel widget to the Home Content section, below is our instruction:
Firstly, follow the jetpack’s guideline in the Blog article on how to use Edit CSS here.
Then add the code to the Edit Css.

.home #primary  .carousel {
    padding: 30px 0
.home #primary  .carousel .carousel-inner {
    border-bottom: 1px solid #ddd
.home #primary  .carousel .carousel-control {
    z-index: 1;
    top: auto;
    bottom: -2px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    font-size: 8px;
    line-height: 22px;
    color: #111;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=100)
.home #primary  .carousel .carousel-control:hover {
    border-color: #111
.home #primary  .carousel .carousel-control.right {
    left: auto;
    right: 0
.home #primary  .carousel .carousel-nav {
    bottom: 5px;
    margin: 0 auto;
    position: absolute;
    width: 100%
.home #primary  .carousel .carousel-nav ul {
    margin: 0 0 -2px;
    list-style: none;
    text-align: center
.home #primary  .carousel .carousel-nav li {
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 20px;
    line-height: 2px;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
.chrome .home #primary  .carousel .carousel-nav li, .safari #bottom .carousel .carousel-nav li {
    padding-top: 1px
.ie8 .home #primary  .carousel .carousel-nav li {
    margin: 2px
.home #primary  .carousel .carousel-nav li a {
    display: inline-block;
    text-indent: -9999px;
    width: 4px;
    height: 4px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2px 0 0 -2px
.home #primary  .carousel .carousel-nav li:hover a {
    background: #aaa;
    cursor: pointer
.home #primary  .carousel .carousel-nav a {
    background: #111
.home #primary  .carousel .hentry {
    padding-bottom: 30px
.home #primary  .carousel .hentry:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ddd;
    margin-left: -20px
.home #primary  .carousel .hentry:first-child:before {
    display: none
.home #primary  .carousel .hentry .entry-thumbnail {
    position: relative
.home #primary .carousel .hentry .entry-title {
    text-align: center
.home #primary  .carousel .hentry .entry-title a {
    display: block
.home #primary  .carousel .hentry .entry-meta {
    text-align: center;
    font-size: 11px
@media (max-width:767px) {
.home #primary .dw_focus_videos img {
        width: 100%
@media (min-width:980px) and (max-width:1079px) {
.home #primary .carousel .hentry:before {
        margin-left: -15px

Please note that whenever you start adding the code above and add DW Focus: News Carousel widget, you can not use DW Focus: Slider widget in Home Content section and DW Focus: New Carousel at the same time. 

Jeremy Zauder
replied 10 years ago

Thank you for the answer. We will try it and let you know how it goes.

Powered by DW Question & Answer Pro