Protostar mit Bordmitteln umdesignen - bitte um Tipps

    Hallo,


    ich muss erwähnen, dass ich mich erst seit gestern mit bootstrap und css auseinandersetze.


    Link zur Seite: http://oppermann-events.com/ (das sind bisher alles nur Testbilder, um die Funktionen zu verstehen :-))


    Ich will dieses Mal keine Erweiterungen nutzen und mein Template selbst designen.


    Hab jetzt erstmal eine custom.css erstellt und das Hintergrundbild so eingefügt, damit es responsive bleibt.


    body {
    background-image: url("../images/hintergrundbild.png");
    background-position: center center;
    background-size: cover; /* oder contain
    background-repeat: no-repeat;
    }


    Jetzt würde ich gerne das Template in 3 Teile aufteilen. Head mit Logo, Banner und Inhaltsbereich. Dabei habe ich mir gedacht, dass ich zwei neue Module anlege auf die Position Banner und diese oberhalb und unterhalb des Hauptbanners einfüge. Diese zwei Bereiche würde ich dann gerne transparent machen, damit meine Seite 3-geteilt ist. Später möchte ich dann in die restlichen Bereiche eine leichte Transparenz einfügen, damit man das Hintergrundbild leicht durchschimmern sieht.


    Gehe ich vom Ansatz her richtig ran an die Sache? Was muss in der custom.css stehen, damit die 2 Module transparent werden?


    Hab mich schon mit Firebug beschäftigt und viel gegoogelt, aber irgendwie klappt es nicht so richtig.


    Danke!
    Tim

    Hallo Tim,


    bevor du anfängst Änderungen am Template durchzuführen, solltes du eine Kopie vom Template (nicht Stile!) im BE machen und es Umbenennen damit deine Änderungen nach einem Core-Update nicht verloren gehen.


    Aber vielleicht hast du es ja schon gemacht. ;)

    Hallo Elwood,


    ja die oroginal template.css hab ich ja gesichert und taste die auch nicht an. Nach einem Update müsste ich nur wieder in der index.php den link zur custom.css einfügen. Oder werden auch die anderen Ordner wie /images usw. komplett überschrieben, so dass nach einem Update die Bilder gelöscht sind?

    Oh man... vielen Dank für den Tipp!!!! Da hab ich falsch gedacht.


    Dann werde ich jetzt erstmal das "leicht" angepasste Template kopieren und mit der Kopie weiter arbeiten. Dann kann das Jetzige beim nächsten Update einfach überschrieben werden und ist wieder standard.


    Da hast du mir echt den A... gerettet, weil ich hätte so weiter gemacht und spätestens beim nächsten Update blöd aus der Wäsche gekuckt!

    Da stellt sich mir aber doch noch eine Frage! Wenn ich jetzt mit einer kompletten Template Kopie arbeite, dann benutze ich ja immer noch das 3.4.8 Protostar Template, selbst wenn es schon Joomla 4 usw. gibt und es wurde immer nur das originale geupdatet. Ich dachte, so ein Update ist wie eine Synchronisation. Dateien mit dem selben Namen werden überschrieben und meine eigenen Dateien wie hintergrundbild.png, custom.css bleiben erhalten, so dass ich immer mit aktuellen index.php´s und *.js Dateien usw. arbeite.

    Es wäre echt nicht schlecht, wenn Du etwas strukturierter fragst und es evtl in einen Post bringst. Danke!

    Zitat von TimO

    Gehe ich vom Ansatz her richtig ran an die Sache? Was muss in der custom.css stehen, damit die 2 Module transparent werden?


    Wenn Du mit einer Templatekopie arbeitest, ist das egal. Evtl hilfreich für die Übersicht, kann eine custom.css sein. Der Nachteil, Du erzeugst unnötig Code, weil Du immer nur am überschreiben bist.

    Zitat von TimO

    Kann man sich das Protostar Template nochmal seperat runterladen ohne gleich Joomla komplett neu zu installieren?


    Nein nicht direkt, aber warum auch, wenn Du eh eine Kopie hast? Über Erweiterungen > Verwalten > Überprüfen sollte eine nachinstallation funktionieren, falls Du das Protostar gelöscht hast.

    Zitat von TimO

    dann benutze ich ja immer noch das 3.4.8 Protostar Template, selbst wenn es schon Joomla 4 usw. gibt und es wurde immer nur das originale geupdatet.


    Jetzt kommt erst 3.5 und es sollte auch unter 4 funktionieren. Bis dahin kann es auch sein, dass Du sowieso was neues willst.

    Hallo Indigo66,


    danke für deine Antworten!


    Wie oben beschrieben baue ich gerade diese Seite auf: http://oppermann-events.com/


    Als Hintergrundbild werde ich noch ein anderes einsetzen.


    Ich möchte das Protostar Template wie nach diesem Beispiel umbauen: http://t3n.de/news/wp-content/…12/06/bresson-595x334.jpg


    Ich möchte es also in 3 Teile aufteilen. Ich dachte mir, dass ich oberhalb und unterhalb der Modul Position Banner zwei neue Module einsetze und diese auf transparent setze in der custom.css. Ist das eine ordentliche Herangehensweise oder verstößt das gegen saubere Programmierung von CSS und HTML? Ich habe schon viel probiert, aber bekomme es nicht hin, diese Module transparent zu machen und den Head, Body und Footer halbtransparent zu machen.

    Hallo Tim,


    puhh. Also das letzte post hab ich jetzt nicht mehr genau(er) analysiert, weil ich am Werkeln war :)


    Hier mal die Modulpositionen: http://bj.zemplate.com/protost…rotostar-module-positions


    Kannst ja probieren, z.B. den banner zu duplizieren. Müsstest aber in der index.php des templates machen. Hast ja ne Kopie jetzt. Strengstensfalls noch eine Kopie der Kopie :)


    Zur Formatierung - so in etwa:


    Code
    .body .container {
background-color:rgba(255,255,255,0.8);
}


.list-striped li:nth-child(2n+1),
.list-striped dd:nth-child(2n+1), .row-striped .row:nth-child(2n+1),
.row-striped .row-fluid:nth-child(2n+1) {
    background-color:transparent;
}


    der 2. Code ist aber eventmodule. Möglicherweise dort auch umstellbar.


    Oder: rechts gibt es ja: #aside bzw. #aside.well > kann man auch anders formatieren.
    links wäre ja #sidebar-nav


    Damit möchte ich sagen, dass Du die Module ansprechen kannst & extra formatieren. Bei neuen Modulen ev. noch mit einem Suffix.


    Dös ist jetzt nur so in etwa gewesen.


    Liebe Grüße, Christine

    Hi Christine,


    vielen Dank für deinen Tipp! Hab den Code zum Einfügen vom Bild noch etwas angepasst, damit es sich an die Bildschirmgrößen anpasst und fixiert ist.


    body {
    background: url("../images/oppermann-events-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }


    .body .container {
    background-color:rgba(255,255,255,0.95);
    }
    .list-striped li:nth-child(2n+1),
    .list-striped dd:nth-child(2n+1), .row-striped .row:nth-child(2n+1),
    .row-striped .row-fluid:nth-child(2n+1) {
    background-color:transparent;
    }


    Hier ist das Ergebnis: http://oppermann-events.com/no…ahrmarkt-oktoberfest.html


    Liebe Grüße
    Tim