Vorhandenes template als responsive umschreiben - Hilfe gesucht

    Hallo Allerseits!


    Ich möchte ein von mir vor einiger Zeit erstelltes template jetzt, bei gleichbleibendem Design, als responsive Variante umgewandelt haben.


    Zu diesem Zweck habe ich auf einem separaten Server eine Testinstallation erstellt und dort sowohl das bisherige non-responsive template (zwecks Vorlage und Vergleich), als auch ein neues template installiert, welches dann das responsive werden soll.


    Leider komme ich bereits bei der Navigation nicht wirklich weiter und würde bevorzugt die Hilfe Jemandes in Anspruch nehmen, der da entsprechend routiniert ist, und das verhältnismäßig leicht umsetzen kann - entgegen eine entsprechenden Aufwandsentschädigung natürlich.


    Es geht um keinerlei gestalterische Leistungen - das ist alles vorgegeben - sondern "nur" um die programmiertechnische Umsetzung. Letztlich vornehmlich die beiden Dateien index.php und template.css betreffend.


    Die Arbeit könnte direkt an der template Datei auf dem Webserver erfolgen.
    Dies ist das bisherige non-responsive template auf der dummy-site: http://www.lyzarr.com/testsite/de/nicht-responsive
    Und dies soll dann die responsive Variante werden: http://www.lyzarr.com/testsite/de/neu-responsive


    Das gewünschte Design des condensed menus würde ich als jpg vorgeben.


    Besten Dank schonmal im Voraus.
    Gruß,
    Dan

  • Zum hilfreichsten Beitrag springen

    Responsiv heißt ja eigentlich erst einmal nur, dass die Darstellung des Templates je nach Bildschirmgröße unterschiedlich ist (reagiert). Und du als
    Templateersteller bestimmst, wie es reagieren soll.


    Du willst also erst einmal mit dem Menü beginnen. Wie soll das Menü denn bei kleineren Bildschirmen aussehen und ab welcher Bildschirmbreite willst du eine andere Darstellung haben?

    Ich habe zwar keine Ahnung von Template-Erstellung, aber ICH würde für MICH eines der vielen schon responsiven Templates nehmen und es nach meinen Wünschen anpassen. Auch mit deinem Design wird es ein Passendes geben.


    MIR wäre das einfach zu viel Arbeit, zudem im Nachhinein noch weitere Fehler auftreten könnten.


    Hier gibt es jede Menge responsive Templates:


    Woher bekomme ich Templates bzw. Themes für Joomla?


    Oder, wenn nicht, vielleicht hier eine Hilfe:


    http://www.joomla-css.nl/en/

    Gruß Elwood

    2 Mal editiert, zuletzt von Elwood () aus folgendem Grund: Typo

    Hallo Dan,


    schau Dir informationshalber mal die template.css von Protostar an. Sie hat über 7000 Zeilen, und dann erkennst Du, wieviel Arbeit es ist, um ein Template responsiv zu machen. Das Template responsiv zu machen, ist dabei nicht mal die Hauptarbeit, sondern die vielen Sonderfälle. Denn Deine Webseite soll ja auch unter den verschiedenen Microsoft Explorern genauso fehlerfrei angezeigt werden wie unter Chrom, Firefox und Opera. Ich kann mich Elwood nur anschließen und empfehle Dir, nimm Protostar oder auch ein anderes fertiges Template und passe es Deinen Wünschen an.

    Danke Euch allen für Eure Antworten und links.


    Ich weiß nur nicht, ob ich mich etwas zu kryptisch ausgedrückt habe, oder ob Anfragen nach vergüteter Hilfestellung hier untersagt sind, und deshalb von Euch wohlwollend ignoriert wurden. :)


    Das war es, worum es mit eigentlich ging - Jemanden zu finden, der das für mich umsetzt.


    Ich kann den Aufwand auch gut abschätzen, da ich bereits selbst ein responsives template auf Basis eines deutlich komplexeren Designs umgesetzt habe.
    Übrigens ebenfalls auf Basis des niederländischen Tutorials, auf welches ich hier im Forum selbst schonmal hingewiesen habe, kurz nachdem es erschien (Suche Einfachstes Template). - Insofern mußte ich etwas grinsen, Elwood - natürlich trotzdem vielen Dank. :)
    Aufgrund mangelnden Wissens und Erfahrung war dies aber eher ein Trial and error vorgehen beim Anpassen vorallem der css - demzufolge entsprechend langwieriger.
    Da dies bisher das erste Mal war, gestaltet sich das ganze dieses Mal ähnlich umständlich.
    Aus Zeitgründen wollte ich also nach der zuvor beschriebenen Hilfe suchen.


    Da mir das aber natürlich keine Ruhe gelassen hat, habe ich dennoch weiter daran geschraubt, und zumindest das Styling des regulären Menüs fertigbekommen.
    Nur das condensed Menü bekomme ich nicht gebacken.


    Daher bitte ich dann jetzt mal hier gezielt um Hilfe für bestimmte Probleme. :)


    Es schaltet zwar dazu um (schwarzer Streifen mit hamburger menu) paßt sich selbst dann aber in der Breite nicht weiter an (stauchen).
    Darüberhinaus ist es im aufgeklappten Zustand unten abgeschnitten und zeigt nicht alle Punkte an, und diese sind auch nicht sichtbar, da das Styling nicht stimmt, und ich auch nicht herausbekomme, wie ich dies in der css ansprechen kann.
    (mit Website im browser untersuchen komme ich da nicht so recht weiter)


    Würde mich sehr über Hilfe freuen.

    Zitat von lyzarr

    oder ob Anfragen nach vergüteter Hilfestellung hier untersagt sind, und deshalb von Euch wohlwollend ignoriert wurden


    Gut erkannt!
    Hättest Du die Forenregeln vorher gelesen, so wüsstest Du dass kommerzielle Anfragen und Angebote hier nicht erwünscht sind.
    Hilfe zur Selbsthilfe kannst Du hier aber jederzeit erhalten.


    Nun zu Deinem Problem.
    .navbar .nav solltest Du eine min-height von ungefäht 200px geben.
    Dann hast Du für .navbar-inverse .nav > li > a die Farbe #00000000 was auch noch unnötig ein !important hat. Schwarz auf schwarzem Hintergrung liest sich einfach schlecht.

    Danke Dir.
    Ich habe deine Hinweise so umgesetzt, da es so erst einmal der Lesbarkeit dienlich ist.


    Daß schwarz auf schwarz wenig Sinn macht ist mir klar. :)
    Ich möchte eigentlich den Hintergrund des condensed Aufklappmenüs gerne weiß haben (+ dunkler Schrift).
    Der Balken oben (Logo und hamburger menu soll weiterhin schwarz sein)


    Wie bereits geschrieben, ich habe ein Problem die relevanten Punkte anzusprechen um sie in der css wie gewünscht anzupassen.
    Das condensed Klappmenü haut aktuell noch überhaupt nicht hin (Schrift, Hintergrund, Ausrichtung, Breiten, etc.)
    Ich habe es von meinem alten Projekt direkt übernommen und wollte es nun "umpinseln".


    Gruß,
    Lyzarr

    Kleiner Nachtrag.


    Mein Problem ist, daß ich für das reguläre und das condensed Menü eine grundlegend unterschiedliche Optik haben möchte.


    .navbar-inverse .nav > li > a
    ist für die reguläre nav ja schon korrekt, wenn ich das in #fff ändere ist auch ist die ja dann auch weiß - soll aber nur im condensed Menü sein.


    Ich habe das jetzt zumindest herausbekommen ("Untersuchen" im Firefox bringt wesentlich mehr Einsicht als in Chrome...)
    .navbar-inverse .nav-collapse .nav > li > a,
    .navbar-inverse .nav-collapse .dropdown-menu a {
    color: #FFF !important;
    }
    Damit kann ich gezielt nur im condensed Menü die Schrift ansprechen


    [update]
    Nein, Irrtum - damit hat sich dann auch wieder das reguläre Menü geändert.
    Also, ich trete auf der Stelle...

    Hallo,


    ist bei deinen Links oben immer die neueste Version zu sehen? Bei mir verschwindet das Menü beim Verkleinern des Fensters beim responsiven Beispiel im Moment nur ...


    Wie bestimmt du genau, welches Menü angezeigt werden soll? Verwendest du Media Queries?

    Ja, ich schraube immer direkt an der oben verlinkten responsiven Variante.
    Das Menü rutscht nach oben in einen schwarzen Balken (links kleineres Logo, rechts Hamburger Menü) - das zumindest funktioniert hier bei mir auch auf IE11, Firefox und Chrome.


    Und ja, ich verwende media queries. Und so wird die navi aktuell in der index.php aufgerufen:


    Die Sprachwahl habe ich da vorerst auskommentiert, da das so auch nicht funktioniert hat - ersteinmal die elementaren Funktionen zum Laufen bringen. :)

    Mein aktuelles Hauptproblem ist, daß ich nicht weiß, wie ich die die Elemente der regulären und der condensed Navigation unabhängig voneinander ansprechen und stylen kann.


    Die normale nav ist aktuell bereits wie gewünscht gestaltet. Sobald ich die condensed stylen will, verändere ich die normale mit.


    Ich habe mal schnell per Bildbearbeitung einen Entwurf des gewünschten condensed Menüs (welches auch über die volle Bildbreite gehen soll) erstellt, um das Problem mal aufzuzeigen.


    So, nach langer Pause da keine Zeit, setze ich mich nun wieder ran...
    http://www.lyzarr.com/testsite/de/neu-responsive.html


    Danke Deines Hinweises, Tom, konnte ich jetzt das condensed Menü unabhängig vom regulären stylen.


    Ansonsten liegt da aber noch immer von der Funktionalität einiges im Argen.


    1.) Soll die Navi horizontal zentriert sein, was sie aktuell nicht ist
    2.) springt die Ausrichtung an bestimmten Punkten (condensed und regulär) immer, sehe aber nicht, daß dies durch viewport Einstellungen verursacht wird
    3.) schiebt sich das condensed Menü nicht weiter zusammen, sprich der Hamburger button verschwindet irgendwann im rechten Bildrand
    4.) paßt sich das condensed Menü nicht in der Höhe an - die Navi-Punkte werden abgeschnitten


    Ich gehe davon aus, daß irgendein Fehler für mehrere der Punkte verantwortlich ist, bin aber leider nicht im Stande diesen zu identifizieren.


    Wäre über eine tendenziell eher "idiotensichere" Hilfe ;) äußerst dankbar.


    Nachfolgend im Spoiler die index.php: