Template jgreen

[parrotsnature]

Das war kein Style-Vorschlag, sondern ist der aktuelle Ist-Zustand in dem verwendeten Template. Dies sollte als Hinweis dienen, wo er anzusetzen hat, da allein der Zusatz !important ja schon alle anderen Einstellungen aushebelt.

Vielen Dank für den Hinweis. Hab die Angaben jetzt so verändert, dass sich das Popup besser in das Fenster einpasst. Warum die Entwickler des Templates das wohl so gelöst haben bleibt mir schleierhaft. Ist denen bestimmt selbst auch noch nicht aufgefallen.

[hpzeller]

@awids
Da es sich beim jgreen um ein resposives Template handelt machen folgende Angaben

Code: CSS  [Auswählen]

width: 90% !important; /* Also bei dieser Angabe... */
height: 90% !important; /* ... und auch dieser wundert mich eigentlich gar nichts mehr. ;-) */
 

im CSS für die Thickbox schon Sinn, weil sie die sonst nicht für responsive Templates geeignete Thickbox ein wenig responsive macht, dies natürlich um den Preis das so die Konfigurationseinstellungen bezüglich der Höhe und der Breite die man in der Shopadministration macht nicht mehr greifen.

@parrotsnature
Wie ich sehe hast Du jetzt im CSS für die Thickbox ein paar Anpassungen gemacht damit wenigstens das Popup in den Bildschirm passt, aber z.B. bei Smartphones werden Bilder in der Thickbox immer noch verzerrt dargestellt. Folgendes CSS das kgd vor einiger Zeit hier im Forum veröffentlicht hat macht die Thickbox responsive und sorgt unter anderem auch dafür das Bilder in der Thickbox responsive dargestellt und zentriert werden.

Code: CSS  [Auswählen]

#TB_window iframe{
         width:425px;
         max-width:100%;
         min-height:260px;
         height:100%;
}
#TB_window img,
#TB_Image{
         display:block;
         margin:15px 0 20px 15px;
}
#TB_secondLine{
         font:12px Arial, Helvetica, sans-serif;
         color:#666
}
#TB_window a:link{
         color:#666
}
#TB_window a:visited{
         color:#666
}
#TB_window a:hover{
         color:#000
}
#TB_window a:active{
         color:#666
}
#TB_window a:focus{
         color:#666
}
#TB_overlay{
         position:fixed;
         z-index:100;
         top:0;
         left:0;
         height:100%;
         width:100%
}
.TB_overlayMacFFBGHack{
         background:url(macFFBgHack.png) repeat;
}
.TB_overlayBG{
         background-color:#000;
         filter:alpha(opacity=35);
         opacity:0.35;
}
* html #TB_overlay{
         position:absolute
}
#TB_caption{
         height:25px;padding:7px 30px 10px 15px;
         float:left
}
#TB_closeWindow{
         height:25px;
         padding:11px 15px 10px 0;
         float:right
}
#TB_closeAjaxWindow{
         padding:5px 0 0 0;
         margin-bottom:1px;text-align:right;
         float:right
}
#TB_closeAjaxWindow a{
         text-decoration:none;
         font-size:14px;font-family:Arial,Helvetica,sans-serif;
         background:#ccc;
         padding:3px;
         display:block;
         font-weight:bold;
         margin-right:10px
}
#TB_closeWindow a{
         text-decoration:none;
         font-size:14px;font-family:Arial,Helvetica,sans-serif;
         background:#ccc;
         padding:3px;display:block;
         font-weight:bold
}
#TB_ajaxWindowTitle{
         float:left;
         padding:7px 0 5px 10px;
         margin-bottom:1px
}
#TB_title{
         height:30px;color:#000;
         font-size:150%
}
#TB_ajaxContent{
         clear:both;
         padding:2px 15px 15px 15px;
         overflow:auto;
         text-align:left;
         line-height:1.4em;width:94% !important;
         height:90% !important
}
#TB_ajaxContent.TB_modal{
         padding:15px
}
#TB_ajaxContent p{
         padding:5px 0 5px 0
}
#TB_load{
         position:fixed;
         display:none;
         height:13px;
         width:208px;
         z-index:103;
         top:50%;
         left:50%;
         margin:-6px 0 0 -104px
}
* html #TB_load{
         position:absolute
}
#TB_HideSelect{
         z-index:99;
         position:fixed;
         top:0;
         left:0;
         background-color:#fff;
         border:none;opacity:0.0;
         height:100%;
         width:100%
}
* html #TB_HideSelect{
         position:absolute
}
#TB_next a, #TB_prev a{
         font-size:18px;
         font-family:Arial,Helvetica,sans-serif;
         text-decoration:none
}
@media only screen and (max-width:800px)
{
#TB_window{
         font:12px Arial, Helvetica, sans-serif;
         font-weight:bold;
         position:fixed;
         background:#ffffff;
         z-index:999;
         color:#333333;
         display:none;
         border:0px solid #fff;
         text-align:left;
         top:3%;
         width:90% !important;
         margin-left:5% !important;
         margin-right:5% !important;
         margin-top:9% !important;
         -moz-border-radius:6px;
         -webkit-border-radius:6px;
         border-radius:6px;
         -webkit-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.65);
         -moz-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);
         box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);
}
#TB_window img,
#TB_Image{
         margin: 5px 0 10px 1% !important;
         width: 98%;
         height: auto;
}
* html #TB_window{
         position:absolute;
}
#TB_iframeContent{
         clear:both;
         border:none;
         margin-bottom:5px;margin-top:1px;
         width:100% !important;
         height:92% !important;
}
}
@media only screen and (min-width:801px)
{
#TB_window{
         font:12px Arial, Helvetica, sans-serif;
         font-weight:bold;
         position:fixed;
         background:#ffffff;
         z-index:101;
         color:#333333;
         display:none;
         border:0px solid #fff;
         text-align:left;
         top:50%;left:50%;
         -moz-border-radius:6px;
         -webkit-border-radius:6px;
         border-radius:6px;
         -webkit-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.65);
         -moz-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);
         box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);
         display:flex;
         -webkit-display:flex;
         flex-direction:column;
         -webkit-flex-direction:column;
}
* html #TB_window{
         position:absolute;
}
#TB_iframeContent{
         clear:both;
         border:none;
         margin-bottom:5px;margin-top:1px;
}
 

Einfach das komplette CSS für die Thickbox in deinem Shop mit obigem CSS ersetzen.

Gruss
Hanspeter