Public Forums 71,145 posts

[antonr Friend antonrJoin date: June 2011Posts: 27Downloads:0Uploads:0 Thanks: 12 Thanked: 2 times in 1 posts]

#165515

Hi guys,

I found other information in the forums about changing the black background, and followed the instructions:

CHANGED
.maskDesc {
display: block;
background: #FFFFFF; <———– was #000000

But that didn’t do the trick. Also, in my J1.5 version, there’s no place in the modules parameters to set the opacity.

Am I missing something?

Thanks!
Anton

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#397794

Please change this code:

.but_next {
background: url(“../images/arrow-r.png”) no-repeat scroll left center transparent;
padding-left: 70px;
right: 0;
}

and

.but_prev {
background: url(“../images/arrow-l.png”) no-repeat scroll right center transparent;
left: 0;
padding-right: 70px;
}

in templates/ja_methys/css/mod_jaslideshow2.css.

Thanks.

[antonr Friend antonrJoin date: June 2011Posts: 27Downloads:0Uploads:0 Thanks: 12 Thanked: 2 times in 1 posts]

#397868

Thanks for the quick reply, T.

Unfortunately, that didn’t do the trick.

The URL for the site is:
http://www.playershealthclub.com/beta/index.php

Here’s the css file as it stands, with the changes suggested:

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

.ja-slide-main-wrap {
position: relative;
overflow: hidden;
}

.ja-slide-main {
position: absolute;
z-index: 1;
}

.ja-slide-item {
display: block;
float: left;
position: relative;
overflow: hidden;
margin: 0;
}

.ja-slide-item img {
background: #FFFFFF;
border: 1px solid #FFFFFF;
padding: 4px;
}

.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: none;
}

.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: #FFFFFF;
}

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

.but_prev {
background: url(“../images/arrow-l.png”) no-repeat scroll right center transparent;
left: 0;
padding-right: 70px;
}

.but_prev:hover, .but_next:hover {
cursor: pointer;
}

.but_next {
background: url(“../images/arrow-r.png”) no-repeat scroll left center transparent;
padding-left: 70px;
right: 0;
}

.maskDesc {
display: block;
background: #FFFFFF;
position: absolute;
z-index: 100;
cursor: pointer;
}

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

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

.maskDesc .ja-slide-desc h3 {
margin: 0;
padding: 0;
}

.maskDesc a.readon {
background: url(../images/arrow-ri-hover.gif) no-repeat right 10px;
bottom: 10px;
color: #810C46;
display: block;
font-weight: bold;
font-size: 100%;
position: absolute;
padding: 3px 10px 3px 0;
right: 20px;
}

.maskDesc a.readon:hover, .maskDesc a.readon:active, .maskDesc a.readon:focus {
background: url(../images/arrow-ri.gif) no-repeat right 10px;
color: #FFFFFF;
}

.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;
}

/*JA Sideshow [ Topspotlight 1]*/
#ja-slideshow .ja-slidewrap {
margin: 0;
padding: 0;
position: relative;
}

#ja-slideshow .ja-slide-mask {
background: #CCCCCC;
position: absolute;
right: 10px;
bottom: 10px;
height: 70px;
width: 210px;
z-index: 99;
display: none;
}

#ja-slideshow .ja-slide-thumbs-wrap {
background: #CCCCCC;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 100;
}

#ja-slideshow .ja-slide-buttons {
display: block;
margin: 0;
padding: 0;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 101;
}

#ja-slideshow .ja-slide-thumb img {
background: #CCCCCC;
border: 1px solid #FFFFFF;
margin: 4px;
}

#ja-slideshow .ja-slide-item img {
padding: 0;
margin: 0;
border: none;
}

#ja-slideshow .maskDesc {
background: none;
}

#ja-slideshow .maskDesc .ja-slide-desc {
color: #FFFFFF;
font-size: 100%;
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
width: 230px;
}

#ja-slideshow .maskDesc .ja-slide-desc h3 {
color: #CCCCCC;
text-transform: uppercase;
}

/* Choose style */
#ja-botsl .ja-slide-buttons {
z-index: 900;
text-align: center;
margin-top: 5px;
}

#ja-botsl .ja-slide-buttons span {
background: #0E0E0E;
font-size: 10px;
text-transform: uppercase;
border: 1px solid #1C1C1C;
padding: 1px 2px;
float: none;
display: inline;
}

#ja-botsl .ja-slide-buttons span:hover {
border: 1px solid #373737;
color: #810C46;
}

#ja-botsl .ja-slide-desc {
color: #FFFFFF;
font-size: 100%;
}

#ja-botsl .ja-slide-desc h3 {
color: #FFFFFF;
background: none;
margin: 0;
padding: 0;
}

#ja-botsl .ja-slide-desc p {
font-weight: normal;
}

Thanks,
Anton

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#397952

I see you didn’t change the code as I suggest:

<blockquote>.but_prev {
background: url(“../images/arrow-l.png”) no-repeat scroll right center transparent;
left: 0;
padding-right: 70px;
}

.but_next {
background: url(“../images/arrow-r.png”) no-repeat scroll left center transparent;
padding-left: 70px;
right: 0;
}</blockquote>

Please change them to change color from black to white in JA Slideshow 2 JA Methys.

[antonr Friend antonrJoin date: June 2011Posts: 27Downloads:0Uploads:0 Thanks: 12 Thanked: 2 times in 1 posts]

#398073

<em>@thangnn1510 249048 wrote:</em><blockquote>I see you didn’t change the code as I suggest:

Please change them to change color from black to white in JA Slideshow 2 JA Methys.</blockquote>

OKAY…one problem, you didn’t tell me what part of that code above to modify.

What does the code need to be changed to? Or do they need to be deleted entirely?

It is unclear what you’re asking me to modify these lines of code to.

Let me know.

Thanks!
Anton

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#398145

You could change it “background” parameter to background:#fff or any other color. I suggest other ways that you change these files:

/templates/ja_methys/images/arrow-r.png
templates/ja_methys/images/arrow-l.png

in photoshop to make color changed.

[antonr Friend antonrJoin date: June 2011Posts: 27Downloads:0Uploads:0 Thanks: 12 Thanked: 2 times in 1 posts]

#398252

Hi Thang,

So far I’m not having any luck, and have made the changes suggested. Is it possible the slideshow CSS file is being overrided by the templatesBLUE theme?

I have changed the background settings, and uploaded the CSS file, but the Slideshow images to the left and right of the main image are still masked BLACK (#000) and the mouseover on them pops up gray (#CCC). What I need is to modify the slideshow to have the images to the left and right be almost transparent (white, not black) and for the mouseover to make them pop to about 50% opacity. I also need the black bars framing the slideshow on the top, bottom and both sides (the thick black bars separating the images) to be #787e8a.

So far none of the changes suggested have worked. At all.

It seems like it would be very useful if these parameters could all be changed from within the slideshow’s module administration.

Please advise. I’m attaching the code I’ve made changes to, which haven’t resulted in changes to the site itself.

Thanks!
Anton

CSS

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

.ja-slide-main-wrap {
position: relative;
overflow: hidden;
}

.ja-slide-main {
position: absolute;
z-index: 1;
}

.ja-slide-item {
display: block;
float: left;
position: relative;
overflow: hidden;
margin: 0;
}

.ja-slide-item img {
background: #FFFFFF;
border: 1px solid #FFFFFF;
padding: 4px;
}

.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: none;
}

.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: #FFFFFF;
}

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

.but_prev {
background: url(“../images/arrow-l.png”) no-repeat scroll right center transparent;
left: 0;
padding-right: 70px;
}

.but_prev:hover, .but_next:hover {
cursor: pointer;
}

.but_next {
background: url(“../images/arrow-r.png”) no-repeat scroll left center transparent;
padding-left: 70px;
right: 0;
}

.maskDesc {
display: block;
background: #FFFFFF;
position: absolute;
z-index: 100;
cursor: pointer;
}

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

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

.maskDesc .ja-slide-desc h3 {
margin: 0;
padding: 0;
}

.maskDesc a.readon {
background: url(../images/arrow-ri-hover.gif) no-repeat right 10px;
bottom: 10px;
color: #810C46;
display: block;
font-weight: bold;
font-size: 100%;
position: absolute;
padding: 3px 10px 3px 0;
right: 20px;
}

.maskDesc a.readon:hover, .maskDesc a.readon:active, .maskDesc a.readon:focus {
background: url(../images/arrow-ri.gif) no-repeat right 10px;
color: #FFFFFF;
}

.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;
}

/*JA Sideshow [ Topspotlight 1]*/
#ja-slideshow .ja-slidewrap {
margin: 0;
padding: 0;
position: relative;
}

#ja-slideshow .ja-slide-mask {
background: #f4f4f4;
position: absolute;
right: 10px;
bottom: 10px;
height: 70px;
width: 210px;
z-index: 99;
display: none;
}

#ja-slideshow .ja-slide-thumbs-wrap {
background: #f4f4f4;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 100;
}

#ja-slideshow .ja-slide-buttons {
display: block;
margin: 0;
padding: 0;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 101;
}

#ja-slideshow .ja-slide-thumb img {
background: #f4f4f4;
border: 1px solid #FFFFFF;
margin: 4px;
}

#ja-slideshow .ja-slide-item img {
padding: 0;
margin: 0;
border: none;
}

#ja-slideshow .maskDesc {
background: none;
}

#ja-slideshow .maskDesc .ja-slide-desc {
color: #FFFFFF;
font-size: 100%;
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
width: 230px;
}

#ja-slideshow .maskDesc .ja-slide-desc h3 {
color: #f4f4f4;
text-transform: uppercase;
}

/* Choose style */
#ja-botsl .ja-slide-buttons {
z-index: 900;
text-align: center;
margin-top: 5px;
}

#ja-botsl .ja-slide-buttons span {
background: #0E0E0E;
font-size: 10px;
text-transform: uppercase;
border: 1px solid #1C1C1C;
padding: 1px 2px;
float: none;
display: inline;
}

#ja-botsl .ja-slide-buttons span:hover {
border: 1px solid #373737;
color: #810C46;
}

#ja-botsl .ja-slide-desc {
color: #FFFFFF;
font-size: 100%;
}

#ja-botsl .ja-slide-desc h3 {
color: #FFFFFF;
background: none;
margin: 0;
padding: 0;
}

#ja-botsl .ja-slide-desc p {
font-weight: normal;
}

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#398317

Sorry for not clearly in last post. In the case your template choose Blue theme Please change these images:

templates/ja_methys/core/themes/blue/images/arrow-r.png
templates/ja_methys/core/themes/blue/images/arrow-l.png

Please use Photoshop to changes their colors.

1 user says Thank You to thangnn1510 for this useful post

1. antonr

[antonr Friend antonrJoin date: June 2011Posts: 27Downloads:0Uploads:0 Thanks: 12 Thanked: 2 times in 1 posts]

#398684

That did the trick.

Thanks, Thang!

Ciao,
Anton

[Author]

Posts