[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

how to remove border in a slideshow

Posted on 2014-07-16
5
Medium Priority
?
1,396 Views
Last Modified: 2014-07-16
Hi. I have a page that displays a slideshow:

http://www.xolgallery.com/

The border that encloses the slideshow has collapsed. It looks like the container that contains the slideshow has lost its grip on the sides and top of the border. There is now only a thick, gray border at the bottom of the each image in the slideshow. Now the client wants to just get rid of the border.

How can I get rid of that border?

I tried this:

ul.bxslider {
padding:0;
border:0;
}

Open in new window


but the border remains.

What am I missing? Thank you for your help.

Eric
0
Comment
Question by:Eric Bourland
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40199028
In fact that gray line is a shadow :)
Comes from here: jquery.bxslider.css
.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 5px #ccc;
	/* -webkit-box-shadow: 0 5px #ccc; */
	/* box-shadow: 0 5px #ccc; */
	/* border:  5px solid #fff; */
	/* left: -5px; */
	/* background: #fff; */
	
	/*fix other elements on the page moving (on Chrome)*/
	/* -webkit-transform: translatez(0); */
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

Open in new window

Just also comment the first line -moz-box-shadow: 0 5px #ccc;
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40199036
Alexandre,

A-ha!  A shadow.

Can I remove it like so:

.bx-wrapper .bx-viewport {
 -moz-box-shadow: none;
}

I am trying to not alter the original style sheet since this is a WordPress theme.

Setting -moz-box-shadow: none; does not seem to remove the shadow. Is there another workaround?

Thank you very much for your help.

Eric
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 40199051
Is your CSS file declared AFTER the jquery.bxslider.css?

You can also try to add an !important at the end like this:
.bx-wrapper .bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Open in new window

I also added all the other variants just to make sure :)
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40199063
>>>Is your CSS file declared AFTER the jquery.bxslider.css?

Yes -- that is supposedly what this WordPress theme allows. =)


.bx-wrapper .bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}


... that worked!
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 40199064
This worked great. Many thanks to Alexandre -- have an excellent day.

best from Eric
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question