Joomla Templates Club 406,261 posts

[sotjoom2 Friend sotjoom2Join date: January 2010Posts: 47Downloads:0Uploads:10 Thanks: 5 Thanked: 3 times in 1 posts]

#181678

I need to reposition the text and the Sprite images in slideshow lite.

in fact, I probably will end up needing only a singe sprite image above the background image and then I need to move the text more toward the center.
I didn’t think it would be very complicated, but my first attempts have been pretty poor so I figure I’d ask here first.

What I am trying to achieve, looks something like this:

The following slides are also very similar so if I can fix one I can fix them all.

Thank you.

---

Attachments:

1. 

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471036

Hi,
Sorry but I can’t figure out much what you said : D
I guest you want to move the description of the slideshow to the center.
If yes, then here the solution:

templates/ja_zite/css/mod_jaslideshowlite-custom.css
Find these line:


.active .ja-ss-desc {
left: 20%;
opacity: 1;
z-index: 10;
}
Change value of left for the position
And


.ja-ss-desc {
height: auto;
left: -20%;
opacity: 0;
padding: 0;
top: 50%;
transform: translate(0%, -50%);
width: 300px;
}

Change width as you want for description.

[sotjoom2 Friend sotjoom2Join date: January 2010Posts: 47Downloads:0Uploads:10 Thanks: 5 Thanked: 3 times in 1 posts]

#471488

Thank you Luna. I am actually very close to what I need to accomplish, at least on webkit. IE9 is still a mess but I guess I’ll have to deal with that once I got everything in its place.

Right now I am having an issue that I have been unable to fix.

Here is a screenshot of the site with the browser at full width

Here is the same page with the browser a bit wider than the width of the actual page (980px)

As you can see, the main slide moves independently of the logo above creating an unpleasant effect. I suspect this is due to the absolute property being derived by different parents but I was wondering of there was a way to set the position of the slide (it;s actually the first sprite) so that it remained fixed below the logo.

---

Attachments:

1. 
2. 

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471512

You have customized the slideshow too much, some of the styles are disabled, include the style for scale for each screen.
In file
templates/ja_zite/css/mod_jaslideshowlite-custom.css
has code CSS for screen:

@media screen and (min-width: 768px) and (max-width: 1280px)
...

Please enable them and edit to fit with your customization.

[sotjoom2 Friend sotjoom2Join date: January 2010Posts: 47Downloads:0Uploads:10 Thanks: 5 Thanked: 3 times in 1 posts]

#471603

I am sorry, maybe I didn’t make myself clear.
The title that starts with “communication Devices” is a large image I placed where Sprite 1 goes.
That image registers its absolute position relative to the width of the viewport.

The logo and the other elements in the header instead register their position relative to the wrapper or other wrapping dive (I don;t recall at the moment)

What happens when I reduce the horizontal size of the view port is that since the sprite position in the slideshow is set in % and it’s registering from the left edge of the viewport, it does not move in lockstep with the logo creating an unpleasant effect.

I was able to fix this issue by adding a div around the sprite which I then set to be relatively positioned, 980px wide and centered, but that also created several issues.

But it seems to me the only way to go ATM.

In any case, what I want to achieve is the main sprite and the text in the slideshow to be registered in their position relative to the logo and the header, as they should be, instead of the edge of the browser.

By the way, I did try to reactivate the CSS you mentioned in your response, but it made more of a mess than without it as I resized the window.

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471631

<em>@sotjoom2 344404 wrote:</em><blockquote>
In any case, what I want to achieve is the main sprite and the text in the slideshow to be registered in their position relative to the logo and the header, as they should be, instead of the edge of the browser.

By the way, I did try to reactivate the CSS you mentioned in your response, but it made more of a mess than without it as I resized the window.</blockquote>
Hi,
Of course the CSS for each screen it specify for our Slideshow Lite in JA Zite, with your customization, you have to change the CSS to fit with.
Maybe you can research about Scaling Web Page Elements Using The CSS3 Scale Transform
Hope this helps.

[Author]

Posts