Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
YAG Isotope Design-Konfiguration
#1
Typo3 6.2.8
YAG 3.2.7
YAG Themepack jQuery 1.2.2

Confused  Nach Installation und Einrichtung von Galerien und Alben sehe ich zwar bei allen Modulen 'etwas' im Frontend, das Design ist aber Welten von den Beipielen entfernt.
Konkret gibt es Probleme, Isotope zu formatieren (hier sind drei Tags und alle Bilder ohne Abstand in einer Spalte links untereinander abgebildet).
Wie ändere ich das? Also z.B. quadratische Bilder, Spaltigkeit, Auffüllen von Lücken etc.
Die bestehenden Tutorials sind super für die Installation und Konfiguration; aber wie kann ich die Gestaltung anpassen?
Huh  Eine zweite Frage:
Seite/Galerie/Album/Bild werden ausgewählt und angezeigt; warum bleibt oberhalb der Auswahl der Balken mit 'Nicht ausgewählt' stehen?
Idea  Danke im voraus!
Zitieren
#2
Danke für's lesen!  Wink
Sad  Keiner eine Idee oder einen Tipp, wo man die Konfigurationsinfos oder Standardlayouts bekommen kann?
Zitieren
#3
Hallo,

probiere mal bei der Auswahl Motiv "Lightbox" auszuwählen. Dann ersetze mal die Lightbox.css (typo3conf/ext/yag/Resources/Public/CSS/Lightbox.css) mit diesem CSS:

Code:
/*
* Hacks & Co
*/
.tx-yag-item-meta:after, .tx-yag-navigation-clearer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


/*
* Breadcrumbs
*/
.tx-yag-breadcrumbcomtainer {


    margin: 3px 0 7px 0;
    padding: 5px 0 5px 0;
}

.tx-yag-breadcrumb {
   color: Black;
}


/* Redefine default theme */

.tx-yag-gallery-thumb-outerframe, .tx-yag-album-thumb-outerframe, .tx-yag-item-thumb-outerframe {
    height: auto;
}

.tx-yag-lightbox-leftcolumn {
    width:70%;
    float:left;
}

.tx-yag-lightbox-rightcolumn {
    width:30%;
    margin-left:70%;
    text-align: right;
}


.tx-yag-lightbox-permalink {
}


.offPageItems {
   visibility: hidden;
}


.yag-list-wrap {
   overflow: hidden;
}

.tx-yag-items:after {
    content:'';
    display:block;
    clear: both;
}



.tx-yag-thumb-outerframe {
    float: left;
    list-style-type: none;
}

.tx-yag-gallery-thumb-outerframe, .tx-yag-album-thumb-outerframe {
    margin-bottom: 25px;
    width: 50%;
}

.yag-item-thumb-outerframe {
    margin: 0 15px 15px 0;
}

.tx-yag-thumb-innerframe {
   overflow: hidden;
}

.tx-yag-gallery-thumb-innerframe, .tx-yag-album-thumb-innerframe {
    float:left;
}

.yag-item-thumb-innerframe img {
    width: 100%;
}

.tx-yag-gallery-galleryinfo, .tx-yag-album-albuminfo {
    margin-left: 210px;
}


@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
    .yag-item-thumb-outerframe , .tx-yag-gallery-thumb-outerframe, .tx-yag-album-thumb-outerframe  {
        max-width: 100%;
    }

    .tx-yag-gallery-thumb-innerframe, .tx-yag-album-thumb-innerframe {
        float:none;
        margin-bottom: 10px;
    }

    .tx-yag-gallery-galleryinfo, .tx-yag-album-albuminfo {
        margin-left: 0;
        float:none;
    }
}


@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .yag-item-thumb-outerframe {
       max-width: 50%;
   }

    .tx-yag-gallery-thumb-outerframe, .tx-yag-album-thumb-outerframe {
        width: 100%;
    }
}


@media only screen and (max-width : 1050px) and (min-width : 651px) {

    /* Small desktop / ipad view: 3 tiles */
    .yag-item-thumb-outerframe {
        width: 33.3%;
    }

    .tx-yag-gallery-thumb-outerframe, .tx-yag-album-thumb-outerframe {
        width: 100%;
    }
}


@media only screen and (max-width : 1270px) and (min-width : 1051px) {

    /* Medium desktop: 4 tiles */
    .yag-item-thumb-outerframe {
        width: 25%;
    }

    .tx-yag-gallery-thumb-outerframe, .tx-yag-album-thumb-outerframe {
        width: 50%;
    }
}




/* magnific popup css */

.yag-lightbox-meta {
   display: none;
}

/* overlay at start */
.mfp-fade.mfp-bg {
   opacity: 0;

   -webkit-transition: all 0.15s ease-out;
   -moz-transition: all 0.15s ease-out;
   transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
   opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
   opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
   opacity: 0;

   -webkit-transition: all 0.15s ease-out;
   -moz-transition: all 0.15s ease-out;
   transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
   opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
   opacity: 0;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
   opacity: 0;
   -webkit-backface-visibility: hidden;
   /* ideally, transition speed should match zoom duration */
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
   opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
   opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
   opacity: 0;
}

/* Fade animation for popup content */
@-webkit-keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}

@-o-keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}

@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}


.mfp-figure {
   -webkit-animation-name: fadeIn;
   -moz-animation-name: fadeIn;
   -o-animation-name: fadeIn;
   animation-name: fadeIn;
   -webkit-animation-duration: .5s;
   -moz-animation-duration: .5s;
   -ms-animation-duration: .5s;
   -o-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -ms-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility:    hidden;
   -ms-backface-visibility:     hidden;
}


/* Caption customization */
img.mfp-img {
   max-height: 80%;
   padding: 0;
}

.mfp-title {
   margin: 0 12px;
   padding-right: 0;
}

.mfp-bottom-bar {
   background-color: rgba(0, 0, 0,0.5);
   /* padding: 10px 12px; */
   position: relative;
   margin-top: 0;
   top: auto;
   padding: 10px 0;
}

.mfp-figure figure {
   margin: 0;
}

.mfp-figure:after {
   background: none;
   top: 0;
   bottom: 0;
}

.mfp-counter {
   top: 10px;
   right:  12px;
}

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
   top: -35px;
}


/* As overlay */

.mfp-bottom-bar {
   position: absolute;
   bottom: 0px;
   opacity: 0;
   -moz-transition: opacity 0.3s 0.1s;
   -o-transition: opacity 0.3s 0.1s;
   -ms-transition: opacity 0.3s 0.1s;
   -webkit-transition: opacity 0.3s 0.1s;
   transition: opacity 0.3s 0.1s;
}

.mfp-content:hover .mfp-bottom-bar {
   opacity: 1;
}


.mfp-content dl {
   overflow: hidden;
   *zoom: 1;
}

.mfp-content dt {
   float: left;
   clear: left;
   width: 115px;
   font-weight: bold;
}

.mfp-content dd {
   margin: 0 0 0 125px;
}

.mfp-content p {
   padding: 10px 0;
}


/* OffPageItems */

.offPageItems .tx-yag-thumb-outerframe {
    margin: 0;
    padding: 0;
}


/* Pager */

.tx-ptextlist-pager li {
    display: inline;
}

.tx-ptextlist-pager .active a {
    cursor: default;
    color: black;
}

Das Problem mit der Auswahl bei dem letzten Reiter "Bild" besteht, weil du ja den im Reiter vorher ausgewählten Ordner und nicht nur ein Bild auf deiner Galerieseite dargestellt haben willst. Deshalb bleibt eben beim 4. Reiter oben "Keine Auswahl" stehen...
Zitieren
#4
ach so. Hast du pt_extbase, pt_extlist installiert?
Zitieren
#5
(08.01.2015, 09:35)www-design schrieb: Danke für's lesen!  Wink
Sad  Keiner eine Idee oder einen Tipp, wo man die Konfigurationsinfos oder Standardlayouts bekommen kann?

Wenn hier nach 24 Stunden noch keiner geantwortet hat, braucht man noch nicht nachzufragen. Du kannst davon ausgehen, wenn hier jemand eine Antwort weiss, wird er sie auch posten. Manchmal kann das aber auch ein paar Tage/Wochen dauern Wink
Zitieren
#6
Danke für die Infos.
Alle Anregungen ausprobiert, alle notwendigen Ext. installiert. Isotope funktioniert auch weiterhin nicht.
Alle Bilder sind einspaltig links untereinander dargestellt und beim Anklicken der Tags verändert sich nichts.
Ist das javaabhängig, systemabhängig?
Alles deinstalliert und wieder neu installiert habe ich auch schon, die Rechte stimmern etc.
Sollte jemand einen Lösungsansatz haben würde ich mich freuen.
Zitieren
#7
(08.01.2015, 13:36)www-design schrieb: Danke für die Infos.
Alle Anregungen ausprobiert, alle notwendigen Ext. installiert. Isotope funktioniert auch weiterhin nicht.
Alle Bilder sind einspaltig links untereinander dargestellt und beim Anklicken der Tags verändert sich nichts.
Ist das javaabhängig, systemabhängig?
Alles deinstalliert und wieder neu installiert habe ich auch schon, die Rechte stimmern etc.
Sollte jemand einen Lösungsansatz haben würde ich mich freuen.

Ein Link zu deiner Seite könnte uns helfen.
Evtl. ein JavaScript Problem?
Schau mal ob es doppelt oder gar nicht geladen ist.

Gruß Carsten
Zitieren
#8
(10.01.2015, 13:45)Cubana13 schrieb: Ein Link zu deiner Seite könnte uns helfen.
Evtl. ein JavaScript Problem?
Schau mal ob es doppelt oder gar nicht geladen ist.

Die Seite ist noch nicht online aber das wird der Fehler sein. Zunächst habe ich die Pfade angepaßt und die Daten dort gespeichert, aber es wird nicht richtig eingebunden.
Bootstrap bindet ja grundsätzlich ein und YAG auch; aber auch wenn ich die automatische Einbindung der Ext. ausschalte wird das andere nicht eingebunden?
Wie mache ich das am besten?
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste