How can I change the circles which appear on Carousel widget to square shape?

[skodu]

HI

Down the carousel widget, there will be circles appearing which depict the order of images. How can I change it to Square shape and also how can I move those dots to end of slide?

Thanks,
Sharan

[Jace Benson]

Pretty sure you'd have to change the css on the widget.

Based on what I'm reading it's a simple change;

css - Change Bootstrap carousel dot indicators to squares - Stack Overflow

[dvp · Accepted solution]

Use the below css in Carousel widget

.carousel-indicators li {
      display: inline-block;
      width: 48px;
      height: 48px;
      margin: 10px;
      text-indent: 0;
      cursor: pointer;
      border: none;
      border-radius: 10%;
      background-color: #0000ff;
      box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);      
  list-style-type: square;
}

.carousel-indicators .active {
      width: 48px;
      height: 48px;
      margin: 10px;
      background-color: #ffff99;
}

Here is the screenshot with the above CSS values

[cgedney]

Thank you DVP, I was trying to figure out how to make them go away and this was perfect.

[skodu]

DVP,

Can you help on this?

When I configured the search widget.

How to get search in the container?