Joomla Templates Club 406,261 posts

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#146221

Hi friends,

I want to delete the black background of slideshow image, but I have tried few images, which is the correct image?

Attached with image problem.

Here is the link:

http://ncemalaysia.com

Thanks!
Kent

---

Attachments:

1. 

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#324456

In [FONT=”Arial Black”]ja.slideshow2.css – line 41[/FONT]
Delete everything in red below.


.ja-slide-item img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
padding:3px;
}



.ja-slide-item img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
padding:2px;
}


And then you’ll need to go back and redo your images to take the black border someone put around them.

Have fun!
John.

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#324479

Sorry, there is no

.ja-slide-item img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
padding:3px;
}

only:
.
ja-slide-item img {
background: #000000;
padding: 2px;
}

but I already changed the padding pixel.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#324549

I’m sorry to differ with you…but there is indeed that code…and perhaps you are looking in the wrong file.

Here is it’s location:

[FONT=”Arial Black”]http://www.ncemalaysia.com/templates/ja_ruby/css/ja.slideshow2.css[/FONT]

In [FONT=”Arial Black”]ja.slideshow2.css – line 41[/FONT]
Delete everything in red below.


.ja-slide-item img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
padding:2px;
}


Again…when you find it, simply delete it.
You will still see black borders around your pictures…because the pictures appear to have been built that way, but at least the borders won’t be coming from your CSS.

Have fun!
John.

[sfpkent Friend sfpkentJoin date: October 2008Posts: 829Downloads:0Uploads:100 Thanks: 310 Thanked: 75 times in 1 posts]

#324559

Hi John

This is the whole ja.slideshow2.css coding

.ja-slidewrap {
margin: 0;
padding: 0;
position: relative;
height: 276px;
}

.ja-slide-main-wrap {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
height: 276px !important;
}

.ja-slide-main {
z-index: 1;
position: relative;
height: 276px;
}

.maskItem {
background: url(../images/sl-mask.png) no-repeat top left;
position: absolute;
bottom: 0;
right: 0;
width: 519px;
height: 276px;
z-index: 100;
}

.ja-slide-item {
display: block;
overflow: hidden;
margin: 0;
width: 442px !important;
left: 461px !important;
top: 36px !important;
}

.ja-slide-item img {
background: #000000;
padding: 2px;
}

.ja-slide-thumbs-wrap {
position: relative;
clear: both;
overflow: hidden;
}

.ja-slide-thumbs, .ja-slide-thumbs-mask, .ja-slide-thumbs-handles {
position: absolute;
top: 0;
margin: 0;
padding: 0;
width: 5000px;
}

.ja-slide-descs {
display: none;
}

.ja-slide-thumb, .ja-slide-thumbs-handles span {
display: block;
margin: 0;
float: left;
cursor: pointer;
}

.ja-slide-thumbs-handles span {
background: url(thumb_invisible.gif) no-repeat;
}

.ja-slide-thumbs-mask-left,
.ja-slide-thumbs-mask-right,
.ja-slide-thumbs-mask-center {
float: left;
}

.ja-slide-thumbs-mask-left, .ja-slide-thumbs-mask-right{
background: #000000;
}

.but_prev, .but_next {
background: #000000;
position: absolute;
top: 0;
z-index: 99;
}

.but_prev {
background: url(arrow-l.gif) no-repeat right center;
left: 0;
}
.but_prev:hover, .but_next:hover {
cursor: pointer;
}

.but_next {
background: url(arrow-r.gif) no-repeat left center;
right: 0;
}

.maskDesc {
display: block;
position: absolute;
z-index: 100;
cursor: pointer;
width: 400px !important;
overflow: hidden;
}

.maskDesc .ja-slide-desc {
padding: 0px 40px 20px 30px;
color: #CCCCCC;
font-size: 100%;
}

.maskDesc .ja-slide-desc br {
display: none;
}

.maskDesc .ja-slide-desc h3 {
margin: 0;
padding: 0;
font-size: 250%;
color: #FFFFFF;
}

.maskDesc .ja-slide-desc span {
font-weight: bold;
color: #CCCCCC;
font-size: 120%;
}

.maskDesc a.readon {
background: #111111;
bottom: 20px;
color: #666666;
display: block;
font-weight: bold;
font-size: 100%;
position: absolute;
padding: 2px 10px;
right: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.maskDesc a.readon:hover, .maskDesc a.readon:active, .maskDesc a.readon:focus {
background: #7786A2;
color: #FFFFFF;
text-decoration: none;
}

.ja-slide-buttons {
z-index: 900;
}

.ja-slide-buttons span {
background: #000000;
color: #FFFFFF;
display: block;
float: left;
margin-right: 5px;
padding: 2px 5px;
cursor: pointer;
}

I can’t see anything code that you mention.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#324576

<em>@sfpkent 154105 wrote:</em><blockquote>Hi John

This is the whole ja.slideshow2.css coding
….

.ja-slide-item img {
background: #000000;
padding: 2px;
}

I can’t see anything code that you mention.</blockquote>

Yep…it’s there. Clean it out and you’ll be good to go.
Also remember, you have black borders on your images as well. Don’t get confused between the black borders on your actual images…and the borders created by CSS.

Have fun!
John.

[Author]

Posts