Can't figure out CSS, I need some help

[ahlbergsmedia]

Hi. Found a CSS that I try to fix to my own design:

Classic Slider Navigation Bottom Center

http://belnation.com.au/template-page/ I would like the navigation to be bottom center and also transparent fill with a white outline, then solid white fill for the current slide

It almost works. The only thing I want to get rid of is the white background that wraps around the navigation dots. Any suggestions?

Thanks.

[nabeel]

Hi Jonathan,

Thank you for reaching out to us. To get rid of the white background from the slider navigation buttons, try adding the following code in the Theme Options > CSS:

.flex-control-nav:not(.flex-control-thumbs) {
    background-color: transparent;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[ahlbergsmedia]

Thank you. I wrote your suggestion higher up in the CSS code to save some space:

.x-flexslider-shortcode-container .flex-control-nav:not(.flex-control-thumbs) {
top: auto;
right: auto;
left: 50%;
bottom: 0;
margin-left: -36px;
background-color: transparent;
}
.x-flexslider-shortcode-container .flex-control-nav a {
background-color: transparent;
border: solid 1px #000;
}
.x-flexslider-shortcode-container .flex-control-nav a.flex-active {
background-color: #000;}

Thanks for a quick and good answer.

[friech]

We are delighted to assist you with this.

Cheers!

[ahlbergsmedia]

Hi.
I have one more question about my slider. I would like to match the size and positions on the navigation dots on two parallel sliders.
What is the best way?

Best regards / Jonathan

www.ahlbergsmedia.se

SWEDEN

[tristup]

Hi @ahlbergsmedia,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.

[ahlbergsmedia]

Sadly I was mistaken. I did forget the changes that coms with diffrent screens. I think i know how to write some of the CSS neaded fore it to work. If I make a inner container for the text and youse classes, it might work. But I dont know how to make the navigation dots stay in plase. I also wish to make the navigation dots perfectly squaer shaped, with no rounded corners. Any suggestions?

This is the line of CSS I’m using right now:

.x-flexslider-shortcode-container .flex-control-nav:not(.flex-control-thumbs) {
top: auto;
right: auto;
left: 50%;
bottom: -4px;
margin-left: -36px;
background-color: transparent;
}
.x-flexslider-shortcode-container .flex-control-nav a {
background-color: transparent;
border: solid 1px #000;
}
.x-flexslider-shortcode-container .flex-control-nav a.flex-active {
background-color: #000;
}

[tristup]

Hi Jonathan,

The screenshot shows that the height of the content is the reason behind the position of the slider navigation dots. And the custom CSS code you referred, has nothing to do with what you are expecting.

What you are expecting is requires customization and beyond the scope of theme support, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks