Joomla Templates Club 406,261 posts

[imported_lorenzoadorni Friend imported_lorenzoadorniJoin date: May 2015Posts: 98Downloads:32Uploads:27 Thanks: 23]

#1065271

Hello,

There is two problem with the thumb of the slideshow.

1- Image display is not scale and centered in the thumb.

2- Thumb is gone up and overlying slideshow.

Here url: http://www.maximal.it/nuovosito/index.php?lang=it

Here code in the custom css for slideshow:

/ SLIDESHOW /

.slideshow .has-mask::before {
background-color: rgba(0,0,0,0)!important;
background-image: none;
background-position: left bottom;
background-repeat: no-repeat; content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

/ SLIDESHOW – MARGIN TOP /
.t3-mainnav + div.t3-masthead, .t3-mainnav + div.t3-slideshow {
margin-top: -32px;
}

/ SLIDESHOW – PRESENTAZIONE MINI SLIDE IN BASSO – VIDEO /

.video-intro {
display: none;
}

.slider-content-inner {
color: #000000!important;
}

.slider-content-inner .item-desc{
color: #000000!important;
}

/ SLIDESHOW – VISUALIZZAZIONE THUMB /

/
.slideshow .swiper-thumbs-wraper {
display: none;
}
/

Here all the custom css code:

/ CONTATTI RAPIDI DESTRA LOGO ALLINEATI SU LINEA SOLA /

@media (min-width: 768px)
{
.address-list li {
float: left;
width: 21.333333%!important;
}}

/ BLOCCO CUSTOM CONTATTI HEADER /

.custom_contatti
{
padding-top: 10px!important;
padding-bottom: 0px!important;
}

/ MAIN MENU ORIZZONTALE /

.t3-mainnav .t3-navbar {
background: linear-gradient(#FFFFFF,#FFFFFF);
max-height: 84px;
padding-bottom: 120px;
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > span {

font-size: 12px;}

.navbar-default .navbar-nav>li+li:before {display:none;}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>span {
color: rgba(160,163,164,1);
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>span {
color: rgba(160,163,164,1);
}

/ MAIN MENU ORIZZONTALE – COLORE ATTIVO E COLORE HOVER /
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>span, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>span:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>span:focus {
color: #2b5071;
background-color: transparent;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>span:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>span:focus {
color: #2b5071;
background-color: transparent;
}

/ SLIDESHOW /

.slideshow .has-mask::before {
background-color: rgba(0,0,0,0)!important;
background-image: none;
background-position: left bottom;
background-repeat: no-repeat; content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

/ SLIDESHOW – MARGIN TOP /
.t3-mainnav + div.t3-masthead, .t3-mainnav + div.t3-slideshow {
margin-top: -32px;
}

/ SLIDESHOW – PRESENTAZIONE MINI SLIDE IN BASSO – VIDEO /

.video-intro {
display: none;
}

.slider-content-inner {
color: #000000!important;
}

.slider-content-inner .item-desc{
color: #000000!important;
}

/ SLIDESHOW – VISUALIZZAZIONE THUMB /

/
.slideshow .swiper-thumbs-wraper {
display: none;
}
/

/ BLOCCO PRESENTAZIONE MAXIMAL /
.acm-features

{
padding-top: 40px!important;
padding-bottom: 40px!important;
}

/ BLOCCO CUSTOM PRESETNAZIONE EVOLUCI /
.custom_evoluci
{
padding-top: 0px!important;
padding-bottom: 0px!important;
margin-top: 00px!important;
margin-bottom: 0px!important;
}

/CALL TO ACTION/
.acm-cta
{
margin-top:0px!important;
margin-bottom:0px!important;
}

/ BLOCCO CUSTOM EVODIGITAL /
.custom_evodigital
{
margin-top: 50px!important;
margin-bottom: 50px!important;
}

/IMPOSTAZIONI BREADCRUMB/
.breadcrumb
{
background-color: rgba(0,0,0,0)!important;
margin-left: 0px!important;
margin-top: 5px!important;
}

/ IMPOSTAZIONE PADDING GENERALI /
/*
.section-wrap>div {
padding-bottom: 40px;
padding-top: 40px;

/
/
.evo_verde {
background: #cccc33
}

}
/
/ PERSONALIZZAZIONE BOTTONE CALL TO ACTION, DA REPLICARE PER OGNI STILE DIVERSO E DA RICHIAMARE NEL SUFFIX STYLE DEL MODULO /
/
.btn-default {
background-color: #3a5d80;
border-color: #3a5d80;
color: #fff;
background: linear-gradient(#426a92,#3a5d80);
border: 0;
font-size: 11px;
font-family: "Rubik",Helvetica,Arial,sans-serif;
text-transform: uppercase;

}
/
/ IMPOSTAZIONE COLORE SFONDO DEL FOOTER/
/
.t3-footer {
background: #F3F3F3;
color: #aaa;
}
.t3-footnav .t3-module {
background: #F3F3F3;
color: #aaa;
}
.box-contact .contact-item {
background: #F3F3F3;
border-radius: 2px;
}
*/

/PADDING LOGO/
/*
@media (min-width: 768px)
{
.logo {

padding-left: 15px;

}}
*/

/ PADDING HEADER /
/*
.t3-header {
padding-top: 32px;
padding-bottom: 40px;
}

/
/PADDING CASO STUDIO/
/
.acm-testimonial
{
padding-top: 40px!important;
padding-bottom: 40px!important;
margin-top: 10px!important;
margin-bottom: 60px!important;
}

*/

Attached you can find an image of the problem for the first slide

Thank you

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065382

Hi
Kindly turn off css compression and server page speed compression so i can check the custom.css file
Or you can temp. remove the file to see the slideshow.

Regards

[imported_lorenzoadorni Friend imported_lorenzoadorniJoin date: May 2015Posts: 98Downloads:32Uploads:27 Thanks: 23]

#1065455

I think the problem is that I use a 1600 X 500 px image instead a 166 X 800.

There is any code to have the thumb not overlying slideshow, or also less overlying ?

Thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065459

You can share a screenshot and illustrate the request in it how you want to display the thumb over the slideshow.
I will check it.

Regards

[imported_lorenzoadorni Friend imported_lorenzoadorniJoin date: May 2015Posts: 98Downloads:32Uploads:27 Thanks: 23]

#1065560

Here Image
As you can see in thumb, image is not fit in the right way in the thumb box.
Is distorced

[imported_lorenzoadorni Friend imported_lorenzoadorniJoin date: May 2015Posts: 98Downloads:32Uploads:27 Thanks: 23]

#1065563

This Image should be more clear

As you can see

1 – there is a code to enlarge the image size to fit the box? How you can see to the right there is a orange area that is usless

2- there is code to set the size of the thumb box?

3- the image in the box is distorced. How can I solve?

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065611

Hi
In the thumbnail, it show the title and thumbnail in this way.The image is resized and using 100% width
http://prntscr.com/gszgxj
You can add below code in custom.css file set image height auto in thumbnail

.slideshow .swiper-thumbs-wraper .swiper-thumbs .item-image {
    float: right;
    max-width: 100%;
    height: auto;
}

If you still looking for more customization in the slideshow style, I suggest you to use firebug or inspect element to check the style classes and override it in custom.css file.

Regards

[imported_lorenzoadorni Friend imported_lorenzoadorniJoin date: May 2015Posts: 98Downloads:32Uploads:27 Thanks: 23]

#1065690

The problem is that the image is not just scale in box but adapted and distorced.

Still many problem with this. I think is better just switch off thumb.

Can I just display the arrow of navigation without display all the thumb?

Thank’s

• This reply was modified 7 years, 1 month ago by  imported_lorenzoadorni.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065710

Hi
You can use this code

.slideshow .swiper-thumbs-wraper .swiper-wrapper {
    display: none;
}
.slideshow .swiper-thumbs-wraper .swiper-button-white {

    margin-top: -136px;}

Change margin-top value as per needs.

Regards

[imported_lorenzoadorni Friend imported_lorenzoadorniJoin date: May 2015Posts: 98Downloads:32Uploads:27 Thanks: 23]

#1065911

No arrows display visible…

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1065945

Hi
Replace older code with this code

.swiper-container.slideshow-thumbs {display:none!important;}
.swiper-thumbs-wraper.swiper-button-white { margin-top: -236px!important;}

Regards

[imported_lorenzoadorni Friend imported_lorenzoadorniJoin date: May 2015Posts: 98Downloads:32Uploads:27 Thanks: 23]

#1066028

Seems no work. Nothing happened.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1066041

Hi
Disable the css compression so i can check,

Regards

[Author]

Posts