How do I get the buttons for switching the slides to be squares and on top of the image instead of below such as they did in this web? http://dbbroker.bg/

thank you, Diana

Comments

x1d’s picture

x1d commented

According to Firebug they used this
If you are lazy like me just use the CSS Injector module

.view-frontpage-slideshow .flex-control-nav {
right: 4px;
top: 3px;
width: auto;
}
.flex-nav-container ul, .flex-nav-container ol {
list-style: none outside none;
}
.flex-control-nav {
z-index: 1;
}
.flex-control-nav {
bottom: -30px;
position: absolute;
text-align: center;
width: 100%;
}

dianacastillo’s picture

dianacastillo commented

Thanks but that doesnt seem to make the buttons square. Any ideas of how to make the buttons square instead of round?

dianacastillo’s picture

dianacastillo commented
Status: Active » Closed (fixed)

this makes them square:
.flex-control-nav li a {
background: none repeat scroll 0 0 white;
border-radius: 3px 3px 3px 3px;
height: 15px;
width: 15px;
}

.flex-control-nav li a {
background: none repeat scroll 0 0 #F2E0A0;
box-shadow: 0 0 12px white;
}

orizonmedia’s picture

orizonmedia commented
Issue summary: View changes

if you are working with responsive design you cannot use css to positionning the control nav div who is rendered under the slide... to move the control on top of slide (like views slideshow cycle option), you have to go in flexslider settings (configuration>media>flexslider), edit the option set and go to «Advanced options» tabs. There is a field called «Controls container (Advanced)» where you can specified the class or id of a container to receive the controls! If you dont have any div to use add one manually in the header of your view ex: <div class="flex-control"></div> and simply specify .flex-control in the control container field... Hope my explaination are clear!