Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#199495

I started with the Playmag quickstart, then noticed you’d upgraded the template after I’d installed it. So I upgraded it.
When I did, I noticed that my slideshow’s thumbnails had moved from the bottom of the slidshow window to about 1/3 of the way up.

Here’s a screenshot to show you what I mean:

I liked them better across the bottom of the slideshow where they were, because they kind of get lost if you’ve got a busy slide image.

I’d further like to have a transparent bar that they would display on top of, so their position should move with it somehow, if the display size should change. This would just make them a little more visible. Again, this makes them feel more like buttons, and less likely to get lost in a busy slide image.

So far, I’ve modified the slide-mask to include the transparent bar I wanted, but it moves around too much when the display size narrows. So I’m guessing I might have to create more than one slide-mask image, specific to the media display size. Whatever works best to keep it appearing the same size so the thumbnails’ size and position is proportional.

I’m guessing I’ll need to move them down to the bottom via CSS for each media display size to accommodate changes in slide size also. Specifics on how to best do this are also most welcome.

I’m assuming this would all be done in: mod_jaslideshowlite-custom.css?

But I’m a little unclear as to how I might best use an absolute margin or percentage of height from the bottom of the module to get them placed correctly, or if that would even be the best method to keep things responsive.

I’d also like the white description box to be a bit narrower AND to adjust to fit its content. The overflow is not looking good.

Any advice would be warmly received.

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#541514

Hi

It due to the value of bottom we style for thumbnail part of JA Slideshow Lite module. Originally, it’s declared in this less file: templatesja_playmaglessmod_jaslideshowlite.less


.ja-ss-thumbs-wrap {
width: 100%;
clear: both;
position: absolute;
bottom: 50px;
overflow: hidden;
z-index: 9;

@media (min-width: @screen-lg-min) {
bottom: 140px;
}

//Control screen mobile/tablet
@media screen and (max-width: @screen-sm-max) {
bottom: 130px;
right: 5px;
}
}


<blockquote>I’m assuming this would all be done in: mod_jaslideshowlite-custom.css?</blockquote>
This is only css file containing style for the ‘custom’ type of this module, its not for customizing css.

In case that you’re not familiar with less file and want to customize css, you can add your custom code into one of these 2 files:
– /templates/ja_playmag/css/custom.css
– templates/ja_playmag/local/css/mod_jaslideshowlite.css

@media (min-width: 1200px) {
.ja-ss-thumbs-wrap {
bottom: 20px;
}
} @media screen and (max-width: 991px) {
.ja-ss-thumbs-wrap {
bottom: 20px;
right: 5px;
}
}


you can change the value for bottom property to suit your need.

Hope this helps.

1 user says Thank You to Saguaros for this useful post

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#541784

Thank you for the assistance!

I did have to make a couple of minor changes to your suggestion. I went the custom.css route, but in doing so, I had to add a !important to each of my changes to get them to actually take effect.

The final CSS I ended up using was:

@media screen and (min-width: 1200px) {
.ja-ss-thumbs-wrap {
bottom: 20px !important;
right: 10px !important;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.ja-ss-thumbs-wrap {
bottom: 3px !important;
right: 3px !important;
}

.ja-ss-desc {
background: none repeat scroll 0 0 #ffffff
bottom: 15px !important;
color: #000
left: 0;
padding: 10px !important;
position: absolute;
text-align: left;
top: 15px !important;
width: 33% !important;
z-index: 3;
}
}
@media screen and (max-width: 991px) {
.ja-ss-thumbs-wrap {
bottom: 22px !important;
right: 15px !important;
}

.ja-ss-mask {
background: url("/templates/ja_playmag/images/slide-mask-991.png") no-repeat scroll left top / 100% 100% rgba(0, 0, 0, 0) !important;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}

.ja-ss-desc {
background: none repeat scroll 0 0 #ffffff
bottom: 40px !important;
color: #000
left: 0;
padding: 20px !important;
position: absolute;
text-align: left;
top: 20px !important;
width: 33% !important;
z-index: 3;
}
}


As you can see, I had to create a second slide-mask to adjust for the scaling, but initial tests in Firefox show it just the way I’d hoped. I will, of course, have to probably make some cross-browser adjustments of a pixel or two here and there, but I’ll get what I was after.

I’ve also adjusted the margins and padding on the description box as well, between media sizes, so the content always fits… which is an improvement over the original template release, which was a bit slap-dash.

Thank you for your help, @saguaros. Much appreciated. Hopefully others will get something from this thread also. So far I’m really liking this template overall, but minor tweaks like this make it even better (IMHO).

Matt

1 user says Thank You to synapsis for this useful post

1. Saguaros

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#541793

Glad to be of help and thank you for sharing your finding, it’s appreciated.

[Author]

Posts