Joomla Templates Club 406,261 posts

[Daniel Michaels Friend Daniel MichaelsJoin date: September 2014Posts: 60Downloads:0Uploads:9 Thanks: 9 Thanked: 5 times in 1 posts]

#139622

The description opacity does not appear to do anything different when I change the value. Is there supposed to be a screen set to the opacity marked in the module settings?
I’d rather not darken (or lighten) my images to accommodate the text because I like the “image animated” feature (the text does not appear immediately).
I’ve attached a shot to show what I’m talking about.
Am I missing something simple?

---

Attachments:

1. 

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

#298739

Yes…you need to make a change in the CSS file.
Since you’ve already started customizing your template…I’ll need a URL so I can give you specific CSS file line numbers to change.

John.

[Daniel Michaels Friend Daniel MichaelsJoin date: September 2014Posts: 60Downloads:0Uploads:9 Thanks: 9 Thanked: 5 times in 1 posts]

#298750

Thank you so much. I can’t post the link to the public, so I’ll send it to you via PM. But you can post recommendations here so that others can learn from my (potential) mistakes. Thanks again.

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

#298771

Couple of things will make the text stand out:

First – get rid of the SegoeUI font call. See here for why.
Delete the red item below in template.css (line 18)


body {
color:#000000;
font-family:"Segoe UI","Trebuchet MS",Arial,Helvetica,sans-serif;
line-height:1.5;
}

Second, since opacity is already set to full…you’ve got create a bit of contrast if you’re going to use the hover text over the slideshow.

The CSS is found in: ja.slideshow2.css (line 194)

Here’s the original


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

Changing the color or adding the line
font-weight:bold;
to the above will be a good place to start.

Other things you can do is pre-process your photos so the right third of the photo has a 25% opacity black screen over it…that will also allow the font an easier time of competing with the background image.

Have fun!
John.

[Daniel Michaels Friend Daniel MichaelsJoin date: September 2014Posts: 60Downloads:0Uploads:9 Thanks: 9 Thanked: 5 times in 1 posts]

#298773

Thank you for your help. Before I make any changes, it seems odd that slideshow2 works as expected in the template switcher at the bottom of the page. The settings for each are exactly the same, yet it does not work in the jaslideshow position. Very strange. If I switch it to the header position it works, but I want it centered in the jaslideshow position. Hmm.

OK, there is definately something wrong with the ja-slideshow position. The opacity feature works when I publish jaslideshow in any posetion EXEPT jaslidshow (which seems very odd). I also notice that ja-slideshow will NOT appear unless something is published in user5 position. What in the world is going on here?

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

#298881

Perhaps you and I have been talking apples and oranges here.
Let me see if this clears up some confusion…

Are you expecting to see the dark black screen effect which appears when you hover over other slideshow-type modules? And not seeing makes you believe there is a problem with it? The big rotating slideshow was not built with that functionality in it. So you’ll need to hack its main php file to add in the script and classes which produce that effect.

At first glance, though, it will be a bit of a challenge because of the “thumbnail” effect also included in that position…which is why I’m guessing moving another slideshow up to that position doesn’t work for you.

The hack is outside the realm of a quick forum fix. Joomlancers.com would be a good place to start in looking for a programmer to rewrite the code to your expectations.

Good luck,
John.

[Daniel Michaels Friend Daniel MichaelsJoin date: September 2014Posts: 60Downloads:0Uploads:9 Thanks: 9 Thanked: 5 times in 1 posts]

#298912

Yes and no.
I don’t think there is anything wrong with slideshow2 module itself, particularly since it works in every position except the one I need it. As you can see from the link I sent via pm, I’m not using the big slide show from the default installation. According to the JA Quarts module layout (http://www.joomlart.com/templates_club/club_portfolio/ja_quartz.html), there are two JA Slideshow positions (actually they are spelled incorrectly on the website). This is a mistake. The top slideshow is actually in the header position. I am only using the slideshow below the breadcrumbs, the slideshow position. I can’t figure out why the opacity feature does not work in this position.
As for the thumbnail conflict, there really isn’t one. The slideshow2 opacity feature works with thumbnails, numbers, or nothing in all of the other positions, including header. Why would it cause a conflict in this postion?
I’m going to submit a querry directly to joomlart to see if I’m missing something obvious.
Thanks again for your help.

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

#298919

Sounds good. Hope they can help.

John

1 user says Thank You to John Wesley Brett for this useful post

1. Daniel Michaels

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#299198

Hi,

For this case, please open modulesmod_jaslideshow2assetsja.slideshow2.js file, at about line 99, find following code:

this.maskDesc.setStyles ({'display':'block',
'position':'absolute',
'top': 0,
'left': this.options.rearWidth+this.options.mainSpace,
'width': this.options.mainWidth,
'height': this.options.mainHeight,
'opacity': 0.01
});

and change opacity to your suitable.

[Author]

Posts