ilch Forum » Ilch CMS 2.X » Design und Templates » Ilch-Portfolio Farbmodus

Geschlossen
  1. #1
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Ilch Version: 2.2.12 | Layout Version: 1.0.1

    Hallo ihr lieben,

    ich bin ein großer Fan des Layout "Ilch-Portfolio" von Lord|Schirmer. Ich habe in den Einstellungen den Dunkelmodus eingestellt weil ich diese bevorzuge.

    Ich habe da ein Problem mit dem Galerie Modul, das dort der Dunkelmodus nicht überall verwendet wird.

    1. In der Galerie Übersicht danladi.net/index.php/gallery/index/index
    gesperrtes Bild

    2. Anzeige eines Bildes in Groß danladi.net/index.php/gallery/index/show/id/4
    gesperrtes Bild

    Ich hätte am liebsten beide Sachen im Dunkel Modus, aber mindestens mal die Übersicht der Galerie bzw Kategorien.
    Vielleicht kann man das ja in einem Layout Update anpassen.

    Gerne könnt Ihr mir aber sagen wie ich es selber anpasse. Möchte jetzt nicht in den Modulen rum fuschen.

    Gruß Daniel

    betroffene Homepage: danladi.net
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    Hallo Daniel,

    es handelt sich hierbei um das Design vom Gallery-Modul. Dies hat nichts mit dem Ilch Portfolio Layout zu tun.
    Was du aber machen könntest:

    1)
    Adminbereich -> Module -> Gallery -> Einstellungen
    Hier findest du die Venobox Einstellungen.
    Passe hier die Hintergrundfarbe entsprechend an.
    Wenn du nun ein Gallerybild im Vollbild anschaust wird hier deine gewählte Hintergrundfarbe verwendet.

    2)
    Adminbereich -> Einstellungen -> Benutzerdefinierte CSS
    Hier fügst du diesen CSS-Code ein, damit überschreibst du die Standards.

    .lib-panel .row,
    .lib-panel .col-md-6 {
        padding: 0;
        background-color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
    }
    
    .lib-panel .lib-row.lib-header {
        background-color: #FFFFFF;
        font-size: 20px;
        padding: 10px 20px 0 20px;
    }
    
    .lib-panel .lib-row.lib-header .lib-header-seperator {
        height: 2px;
        width: 100%;
        background-color: #d9d9d9;
        margin: 7px 0 7px 0;
    }


    Passe im CSS-Code die background-color an.
    Zum Beispiel auf transparent / #ffffff00

    3) Du könntest auch die Views überschreiben und eigene CSS-Klassen verwenden.


    Denke, diese Punkte bringen dich aber schon weiter.

    mfg
    rtx
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Also dein Punkt 1 hat mich in meinem Punkt 2 weitergebracht. Die Anzeige eines Bildes in Groß ist nun auch in Dunkel.

    Aber bei meinem Punkt 1 komme ich nicht weiter. Die Kategorie Übersicht ist immer noch weiß. Der Code von deinem Punkt 2 scheint garnichts zu verändern.

    Dein Punkt 3... Verstehe nur Bahnhof.
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    Alles klar, dann gehen wir gar nicht weiter auf Punkt 1 und 3 ein.

    Jetzt aber nochmal ein bisschen anders, weil ich selbst etwas übersehen hatte.

    Füge diesen gesamten Code bei Benutzerdefinierte CSS ein (background-color anpassen !) und speichere.

    .lib-panel {
        margin-bottom: 20Px;
    }
    
    .lib-panel img {
        width: 100%;
        background-color: transparent;
    }
    
    .lib-panel .row,
    .lib-panel .col-md-6 {
        padding: 0;
        background-color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
    }
    
    .lib-panel .lib-row {
        padding: 0 20px 0 20px;
    }
    
    .lib-panel .lib-row.lib-header {
        background-color: #FFFFFF;
        font-size: 20px;
        padding: 10px 20px 0 20px;
    }
    
    .lib-panel .lib-row.lib-header .lib-header-seperator {
        height: 2px;
        width: 100%;
        background-color: #d9d9d9;
        margin: 7px 0 7px 0;
    }
    
    .lib-panel .lib-row.lib-desc {
        position: relative;
        height: 100%;
        display: block;
        font-size: 13px;
    }
    .lib-panel .lib-row.lib-desc a{
        position: absolute;
        width: 100%;
        bottom: 10px;
        left: 20px;
    }
    
    .row-margin-bottom {
        margin-bottom: 20px;
    }
    
    .box-shadow {
        -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
        box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
    }
    
    .text-start{
        font-size: 15px;
    }


    Nun im Editor folgende Datei zum bearbeiten öffnen:

    /application/modules/gallery/views/index/index.php

    Zeile 92 ändern in
    <!--<link href="--><?php //=$this->getModuleUrl('static/css/gallery.css') ?><!--" rel="stylesheet">-->

    oder löschen.

    Anmerkung: Bei einem Update ist wieder alles beim alten bezüglich dieser Zeile !

    Jetzt läuft es ganz bestimmt...


    Zuletzt modifiziert von RTX2070 am 14.08.2025 - 08:04:20
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Jaaa verliebt das funktioniert. Das diese Zeile bei einem Modul Update möglicherweise überschrieben wird ist mir bewusst. Für sowas führe ich eine Doku was alles geändert wurde.

    Jetzt gibt es noch einen Schönheitsfehler... (rote Pfeile)
    gesperrtes Bild
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    Was gefällt daran nicht?
    Die Breiten? Willst du es einheitlich?
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Ja wäre schon schön wenn es Einheitlich wäre. Die Kategorien etwas breiter.
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    Beim Benutzerdefinierten CSS zusätzlich noch folgendes hinzufügen.

    #gallery { width: 100%; }
    #gallery .row, #gallery .lib-panel, #gallery .lib-item { max-width: none; }
    #gallery .lib-item { width: 100%; }
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Ohh Dankeschön. War nur ne kleine Sache. Aber die macht es aus finde ich.
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Hätte noch eine andere Sache.

    Alle Inhalte bei denen das Rechte Menü zusehen ist (alles außer Galerie), sind von den Abständen her nicht gleich.
    Heißt Links ist sehr viel mehr Rand als Rechts zum Menü. Wie kann ich die Inhalte weiter nach Links verschieben ? Bzw auch das Rechte Menü weiter nach Rechts ?

    Du kannst ja auf der Website selber mal schauen.

    gesperrtes Bild


    Zuletzt modifiziert von xSteveUrkelx am 18.08.2025 - 12:00:35
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.685
    Beitragswertungen
    1219 Beitragspunkte
    Der Content und die rechte Sidebar sind ein Container class="portfolio-details" welcher zentriert ist, somit verschiebt sich je nach Anzeigegröße des Browserfensters der Inhalt immer in die Mitte und somit weg oder ran an das linke Menü.

    Man könnte grundlegend auch der Klasse class="portfolio-details" und somit dem Inhalt sagen, dass dieser immer links aber mit Abstand vom Menü angezeigt werden soll.

    z.B. in style.css [289] mit:
    float: left;
    padding-left: 30px;



    Zuletzt modifiziert von Lord|Schirmer am 18.08.2025 - 19:12:57
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    In deinem Layout Ilch/Portfolio in den Dateien index.php und index_full.php folgendes ändern.

    Zeile 68 in beiden Dateien....

    <div class="container">


    ändern zu

    <div class="container-fluid">



    Teste das mal aus, vielleicht reicht es dir ja so.
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Also die Variante von Schirmer sagt mir garnicht zu weil es nur den Inhalt nach links verschiebt ohne resizing. Das Hintergrund bild wird auch noch mit verschoben.

    Die Variante von RTX finde ich okay (Ist gerade aktiv). Aber es ist nicht ganz das was ich möchte.

    So wie ich das gesehen habe ist ".portfolio-details" in 2 Teile unterteilt.
    Der Inhalt ist "col-lg-8", das rechte Menü ist "col-lg-4"

    Der fluid Ansatz von RTX passt soweit, allerdings sollte das rechte Menü (col-lg-4) nicht breiter werden. Das es jetzt rechts am Rand ist finde ich sogar gut. Aber es sollte wieder schmaler sein und mehr Platz für den eigentlichen Inhalt sein.
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    Dann kannst du gegebenenfalls die Klassen col-lg-8 und col-lg-4 anpassen.

    Zum Beispiel ändern auf 10 und 2...
    Also col-lg-10...

    Hier zum nachlesen

    getbootstrap.com/docs/5.3/layout/grid/



    Zuletzt modifiziert von RTX2070 am 19.08.2025 - 06:23:16
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    In welcher Datei müsste ich denn was ändern ?
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    Hast du doch selbst oben geschrieben...die Portfolio-Details sind in 2 Teile....Hier natürlich zwinker


    Zuletzt modifiziert von RTX2070 am 19.08.2025 - 15:24:46
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Ja mit F12 im Browser keine Ahnung in welcher Datei.
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    RTX2070 Coder
    Registriert seit
    14.06.2019
    Beiträge
    315
    Beitragswertungen
    49 Beitragspunkte
    ZitatZitat geschrieben von xSteveUrkelx
    Ja mit F12 im Browser keine Ahnung in welcher Datei.


    Mit hoher Wahrscheinlichkeit wohl die index.php vom Layout... zwinker frech
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    xSteveUrkelx Mitglied
    Registriert seit
    06.06.2018
    Beiträge
    61
    Beitragswertungen
    1 Beitragspunkte
    Keine Ahnung
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.685
    Beitragswertungen
    1219 Beitragspunkte
    application/layouts/portfolio/index.php

    ab Zeile 66 <!-- portfolio details section -->


    Zuletzt modifiziert von Lord|Schirmer am 21.08.2025 - 16:41:50
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten