Frame around responsive banner
- Posted by Brecht Wilms (3) Offline
Hi,
I want my banner to only show itself and have a transparent background.
At the moment I'm testing everything out and I can clearly see a border around my header at the top.
www.6designs.be/Atune/
Can someone tell me how to fix this, also I don't need the arrows or Next/Prev on my banner. As long as it autoplays I'm happy.
Regards
Brecht
11 years 5 months ago #1
by Brecht Wilms
I want my banner to only show itself and have a transparent background.
At the moment I'm testing everything out and I can clearly see a border around my header at the top.
www.6designs.be/Atune/
Can someone tell me how to fix this, also I don't need the arrows or Next/Prev on my banner. As long as it autoplays I'm happy.
Regards
Brecht
Please Log in or Create an account to join the conversation.
- Posted by erwinschro (1034) Offline
Hello
Mmm have you tried with another theme for Nivo slider type? Like the Light theme as it offers no border and no black bar control navigation at the bottom.
But if you insist to use the current theme, you can edit this css file for specified theme (bar)
/modules/mod_responsivebannerslider/assets/nivo/themes/bar/style.css
Here's where you can remove the border line
.theme-bar.slider-wrapper {
...
border: 1px solid #333;
...
}
here's where to remove the bottom bar for the navigation arrow.
.theme-bar:hover .nivo-controlNav {
bottom: 0; /* edit the 0 value to -41px */
opacity: 1; /* set opacity to 0 */
}
11 years 5 months ago #2
by erwinschro
Mmm have you tried with another theme for Nivo slider type? Like the Light theme as it offers no border and no black bar control navigation at the bottom.
But if you insist to use the current theme, you can edit this css file for specified theme (bar)
/modules/mod_responsivebannerslider/assets/nivo/themes/bar/style.css
Here's where you can remove the border line
.theme-bar.slider-wrapper {
...
border: 1px solid #333;
...
}
here's where to remove the bottom bar for the navigation arrow.
.theme-bar:hover .nivo-controlNav {
bottom: 0; /* edit the 0 value to -41px */
opacity: 1; /* set opacity to 0 */
}
Please Log in or Create an account to join the conversation.
- Posted by Brecht Wilms (3) Offline
Thanks,
That did work just fine.
Only problem I'm having now is that my image is a .PNG format and because of the slider it still shows white as a background.
You can see it right here (see image)
11 years 5 months ago #3
by Brecht Wilms
That did work just fine.
Only problem I'm having now is that my image is a .PNG format and because of the slider it still shows white as a background.
You can see it right here (see image)
Please Log in or Create an account to join the conversation.
- Posted by erwinschro (1034) Offline
Ok still with the same css file above, edit this part
change background color property from #fff to transparent
11 years 5 months ago #4
by erwinschro
.theme-bar .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
}
change background color property from #fff to transparent
.theme-bar .nivoSlider {
position:relative;
background: url(loading.gif) no-repeat 50% 50% transparent;
}
Please Log in or Create an account to join the conversation.
- Posted by Brecht Wilms (3) Offline
Amazing guys!
Great support, love it!
And it works now which is the most important part besides the great and super fast support.
11 years 5 months ago #5
by Brecht Wilms
Great support, love it!
And it works now which is the most important part besides the great and super fast support.
Please Log in or Create an account to join the conversation.