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

skodu · ‎01-05-2017

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

dvp · ‎01-05-2017

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

View solution in original post

dvp · ‎01-05-2017

Can you give more details about it..

skodu · ‎01-05-2017

The search bar is placed on the icons. I am trying to get the search box on the black screen (Image in the above post)

dvp · ‎01-05-2017

can you post the screenshot of page layout

skodu · ‎01-05-2017

This is the homepage. Search is not coming in the middle of the screen.

skodu · ‎01-05-2017

To be more clear, I just added some css in widget

div

{

width:473px;

height:37px;

top:-40%;

left:50%;

}

This CSS is making the search box down there as shown in the image. I need the search box to be present like this

Am I being clear?

Thanks,
Sharan