Joomla Extensions Club 20,483 posts

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#373109

Hi aman204,

Please find my answers bellow:

1. Do you wish to remove the other buttons ?: Yes I do. Could you please let me know how to do this? I fact I would like to style it exactly as it’s styled in the template JA Community Plus including the frame around the selected thumbnail.
2. For right button to display in right image, Please ensure to have added this: Thanks, it worked!
3. they appear under the thubs bar, not left and right of it. : The code modification did not work. In fact it pushed them further down. Please advice.

Thanks for you effort

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#373183

Hi 7of9,
<blockquote>
Yes I do. Could you please let me know how to do this? I fact I would like to style it exactly as it’s styled in the template JA Community Plus including the frame around the selected thumbnail.</blockquote>

Please view previous post suggestion by thuanlq 🙂 Getting the styling like slideshow in JA community would require various customizations as the specific module is specifically customized for the specific template

<blockquote>The code modification did not work. In fact it pushed them further down. Please advice.</blockquote>

Try add this also at end of template.css file::

.ja-slidewrap_default{position:relative;}

You may need to increase bottom value here to make it fit fine::

.ja-slide-buttons {
bottom: 0;
position: absolute;
width: 100%;
z-index:900;
}

1 user says Thank You to aman204 for this useful post

1. 7of9

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#373241

Hi,

1. Please view previous post suggestion by thuanlq Getting the styling like slideshow in JA community would require various customizations as the specific module is specifically customized for the specific template: Previous post does not explain how to add the green border around the active thumbnail.

2. bottom worked only when I added px at the end. (bottom: 35px; )
3. I tried to display the arrows outside the thubs as they appear at the Community Plus Template by adding: margin-left: 35px;
However, when I scroll the thubs to the left, they go under the arrow to the left again. When I scroll them back, they possition correclty with the margin, so they let the arrow to be out of the thumbs.
Any ideas how to fix that?
4. Also ja-slide-buttons div is over the thumbs and when I click at the center of the thumb the click does not work.
5. Finally, how can I hide the readmore button? Edit: I solved it by adding the following at the template.css:
.inner {
display:none;
}

Thanks again for your valuable help!

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#373835

Anybody some help please?

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#373855

Hi @7of9,
Please provide me your website link, and more info, i will check your problems and give you solutions,
you can update website info in the ticket,
you can use forum username/password to login the support center.

Thanks

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#373874

Dear @7of9,
Here are my answers for your questions:
1, You can add the green border around the image thumb as following:
– Create “mod_jaslideshow2” folder into “templates/your default template/html/”
– Copy my attach file into this folder or replace the module template (modules/mod_jaslideshow2/tmpl/).
10870
on this file i added “<span>” tag for each thumb image.
– Now create new style to show your border, add style as following on your template.css file


.ja-slide-thumbs .active span {
background:url("../images/arrow-active.png") no-repeat scroll center top #579613;/*arrow-active.png is arrow image i get on comunity plus template*/
padding-top:11px;
}
.ja-slide-thumbs .ja-slide-thumb span {
background:none repeat scroll 0 0 #151414;
display:block;
margin:0 4px 0 3px;
padding-top:11px;
}

2,3,4, Please change style for next,prev buttons, as following:
add new style into end of file “template.css”


.ja-slide-buttons .ja-slide-prev, .ja-slide-buttons .ja-slide-next {
background:url("../images/btncontrol.png") no-repeat scroll right top transparent;
bottom:0;
height:17px;
padding:0;
position:absolute;
right:10px;
text-indent:-999em;
top:auto;
width:11px;
}

#ja-sl-gallery .ja-slide-buttons .ja-slide-prev {
background:background:url("../images/btncontrol.png") no-repeat scroll left top transparent;
left:10px;
}

---

Attachments:

1. default-.txt

1 user says Thank You to thuanlq for this useful post

1. 7of9

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#374194

Hi thuanlq and thanks for your help.

I tried the solution for 2,3,4, but it did not work.
I am trying now the solution for point 1.
Edit: I applied the solution for point 1 and it did not work also.

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#374210

Dear @manos,

I checked and updated slideshow2 module on your site, please check it again,
Thanks

1 user says Thank You to thuanlq for this useful post

1. 7of9

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#374256

You are amazing! Thank you SO much. However there are still the following problems:
1. When you scroll to the right, the thumbs go over the left button.
2. After scrolling to the 9th thumb, the thumbs to the right are getting lost and cannot be seen.
3. The right arrow needs to be placed a little more to the right, so it will have same spacing as the left arrow.
4. How can we change the green selection color to grey, (as left and right buttons) because green does not look good in this template?
Thanks again!

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#374281

1&2) How about changing this:::

.ja-slide-thumbs-wrap {style.css (line 47)
clear: both;
overflow: hidden;
position: relative;
}

to

.ja-slide-thumbs-wrap {style.css (line 47)
clear: both;
margin: 0 auto;
width:540px !important;
overflow: hidden;
position: relative;
}

and adjust width value accordingly

3) You can add this at end of template.css file and adjust value accordingly::

.ja-slidewrap .ja-slide-buttons .ja-slide-next{right:4px;}

4) You can change in color code here accordingly::

.ja-slide-thumbs .active span {template.css (line 2073)
background: url(“../images/arrow-active.png”) no-repeat scroll center top #579613;
padding-top: 11px;
}

1 user says Thank You to aman204 for this useful post

1. 7of9

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#374291

aman thanks for the help.
1. Is fixed, but for some reason thumbs start further to the right and then they position correctly to the left.
2. Is not fixed, still right thumbs are getting lost on the way, scrolling to the right.
3. Is fixed.
4. Is fixed as well!

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#374294

2) You can try decrease margin value here accordingly::

.ja-slide-thumbs, .ja-slide-thumbs-mask, .ja-slide-thumbs-handles {style.css (line 260)
margin: 0 0 0 23px;
padding: 0;
position: absolute;
top: 12px;
width: 5000px;
}

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#374571

Hi,

Thanks for the help. Decreasing the margin-left value had no effect.
Any ideas?

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#374681

<em>@7of9 218642 wrote:</em><blockquote>Hi,

Thanks for the help. Decreasing the margin-left value had no effect.
Any ideas?</blockquote>

Dear @Monas,

Because thumb image use padding and margin option in the template.css file. To resolve this problem, please try do as following:
– Open “template.css” file and edit style on line 2066
change it to


.ja-slide-thumbs .ja-slide-thumb span {
display: block;
height: 80px;
margin: 0 4px 0 0;
padding-left: 3px;
padding-top: 11px;
width: 123px;
}

– and i set thumb image width on slideshow configuration page to 115 ( old value is 121 )

[7of9 Friend 7of9Join date: December 2010Posts: 579Downloads:81Uploads:66 Thanks: 162 Thanked: 25 times in 3 posts]

#374728

Hi, I applied the changes, but it’s still not fixed.

[Author]

Posts