Menügrafik responsive machen

    Worf aller Anfang ist schwer. Uns allen ging es am Anfang genauso wie dir. Frag christine2



    Also zur Erklärung. Das Template Protostar holt sich die standard template.css Datei. Diese wird von einem Compiler erzeugt und ist ziemlich riesig.

    Also hat man für die Anwender eine kleine Brücke gebaut:

    Wenn sie sich die user.css selber anlegen, dann nimmt das Protostart diese Datei auch mit.

    Und zwar nach der template.css. Nun ist es wie beim Malen. Der neue Maler übermalt den alten.#

    Alles was du in die user.css schreibst, übermalt die template.css.


    Du brauchst also nichts weiter tun als die Datei erzeugen. Alles andere passiert automagisch

    Ja Danke, das kann ich verstehen und mich dann mal an die Arbeit begeben.

    Ein sehr schöner Vergleich und ja auch ich hab mir Joomla einfacher Vorgestellt.


    Liebe Grüße

    Worf

    mit Joomla hat das ja nichts zu tun, das ist einfach Grundlagenwissen von HTML/CSS und überall gleich.


    So ganz ohne Kenntnisse geht es nicht, ausser du verwendest ein gutes fertiges Template, das die Bilder schon so hat wie du sie willst.

    Oder postest einen Link zu deiner seite, dann können wir dir helfen.


    Du musst natürlich die Klasse deines Menüs schon richtig eintragen.


    Dazu stellst du im inspector fest, wie diese klasse heisst. Vielleicht ".nav-link" ?

    Oder du verwendest einfach "#nav img {... }

    Zitat von firstlady

    Worf aller Anfang ist schwer. Uns allen ging es am Anfang genauso wie dir. Frag christine2

    Wie wahr, wie wahr :) Möchte aber dazusagen, dass ich großartige Hilfe von Supportern erfahren durfte & hoffentlich noch weiter bekomme.


    Es bedarf aber auch viel selber probieren, testen, wieder probieren, auf Schnauze fallen, aufrappeln, Anleitungen lesen .... usw.


    Ich kann mir immer noch nicht vorstellen, dass die Menügrafik nicht responsive ist.

    Im Originalprotostar gibt es bereits ein allgemeines:

    img

    max-width:100%;

    height:auto;


    In manchen Fällen kann es notwendig sein, dass man dem Logo noch extra was verpasst.

    Ca. so: .logo img {formatierung} Ist jetzt nur beispielhaft.


    Meine Frage: WIE hast Du die Menügrafik erstellt bzw. WO eingetragen?


    Schauen wir mal in Nachbars Garten, öhm Nachbarthread: Icon Menü anpassen.


    Ist zwar ein anderes Templates & andere Klassen, also dortige Einträge nicht nachmachen :)


    Frage: Schau dort auf den 1. screenshot, rechts. Gibt es da einen Eintrag bei: "Bild zum Link"?


    Diese Nachfragen wären alle nicht notwendig, wenn wir einen Link hätten ....


    Liebe Grüße

    Christine

    Hallo liebe Ladys,

    Ich hab mir das etwas einfacher Vorgestell mit Joomal. So wie es aussieht muß ich mich doch mal mit HTML / CSS beschäftigen.?(


    @ Christine2, musst du dir nicht vorstellen, es ist einfach so. Auch andere Module im Standart Protostar sind nicht wirklich responsive.

    Jedenfalls nach meiner Meinung wo alle Inhalte sich so verhalten sollten. Ich habe die responsivität halt Grafisch auf der Adminsite eingestellt ( Statisch/ Fluid).

    Ich habe ausschließlich Jpeg und PNG Dateien verwendet. Eingetragen habe ich diese im Grafischen unter Menü und Linktype - Bild zum Link.


    Seid mir nicht böse aber Ihr sprecht sachen an mit dehnen ich manchmal nicht viel anfangen kann. Fehlende Grundkenntisse halt.


    Da ich die Seite nicht allein Betreiben werde muß ich auch mal Rücksprache mit den Co Autoren halten. Ich Arbeite daran euch einen Link zu geben, leider ist das Zeitnah nicht so einfach.

    Datensicherheit ist mir auch wichtiger als eine Kostenlose Testzeit. ( Wo bekommt man denn was Kostenlos? )


    Es ist nicht dringend, aber ein weiterkommen mit der Seite ist nun mal anspornend.


    Habt Geduld mit mir und Liebe Grüße


    Worf


    PS: Ich erarbeite die Seite gerade auf meinem Qnap NAS, der bietet mir nun mal nur die PHP 5er Vers. Aktuell ist ja die 7ner Vers.' Ich hoffe das es nicht mit meinem Anliegen zusammenhängt.

    Zitat von Worf

    Kann ich den Privat schicken, per Mail oder sonstwie?

    Nein. Wozu? Ist das eine Geheimseite, die niemand sehen darf? Dann solltest du sie komplett aus dem Internet entfernen.

    Dieses Forum lebt davon, dass zukünftige Hilfesuchende Threads vorfinden, wo sie Lösungen finden können und dann eventuell sich das Anmelden/selber fragen sparen können.

    Außerdem bedeutet "privat senden" dass du Individualsupport in Anspruch nehmen möchtest. Bedeutet für den, der das privat gesendet bekommt, dass er ganz allein die Lösung versuchen muss zu finden. Alle anderen dürfen nicht mitraten/mitsuchen/Lösungen finden.


    Ich nehme für Individualsupport Geld. Stundensatz.

    Damit es aber nicht falsch verstanden wird: ich mache deine Site nicht gegen Geld. Will also weder einen Privat-Link, noch Geld dafür haben. Will dir nur vor Augen führen, was du hier verlangst!


    Was ist an deiner Site, dass du sie nicht öffentlich stellen kannst? Die Links hier werden von Google und Co nicht indexiert, weil sie ein "nofollow" im Forum haben. Wo ist also dein Problem?


    NACHTRAG

    Gerade im anderen Thread gesehen: Landingpage: Mehrere Kategorie-Blogs auf einer Startseite



    Axel

    Ok. Ja letztendlich sollten ja so viele wie Möglich die Seite sehen und auch Unterstützen. Wir wollen noch nich eineml damit Profit machen und unsere Erkenntnisse kostenfrei zur Verfügung stellen. Wir möchten aber auch nicht mit einer Baustelle anfangen und uns selbst dem Druck setzen lassen, auch nicht mit einer "mitrate Callange ".

    Mitsuchen und eine Lösung finden finde ich da virel besser.


    [Link entfernt]

    Warum machst Du eine Bild als Menüpunk? Ich dachte Du willst ein Icon o.ä. als Zusatz zum normalen Menüpunkttext. Das ganze Grafische lässt sich per CSS erstellen und ist somit fast automatisch responsive.


    Ein Bild als Menüpunkt hab ich Anfang der Jahrtausendwende das letze mal eingesetzt. Also das ist wirklich nicht mehr zeitgemäß.


    Bei Deinem Thema auf der Webseite vielleicht sogar Imageschädigend.

    Jemand will mir was von IT-Sicherheit sagen und verwendet veraltete Techniken auf der Webseite.

    Naja, meine Site ist zwar auch schon in die Jahre gekommen, aber ich habe auch noch grafische Menüicons auf meiner Firmensite. Allerdings nicht solche "Home"-Buttons. Das ist tatsächlich etwas altertümlich. Meine Icons sind immer gleich groß. Egal in welcher Auflösung. Wobei sie irgendwann mal weggeschaltet werden, wenn der Bildschirm eine bestimmte Größe erreicht. Die Icons sind direkt im Menü eingebunden. Alles andere dann per CSS. Aber bei mir ist das dann lediglich etwas Abstand bei den unterschiedlichen Displaygrößen. An der Grafik selber ändere ich nichts.


    Ich empfehle dir eines der fertigen Menüs aus der JED zu nehmen oder einfach das bestehende unverändert zu übernehmen. Das sieht schon etwas merkwürdig aus mit dem "Home". Da muss ich Tom recht geben. Sowas ist nicht mehr zeitgemäß.


    Wenn du nicht so ein Theater um deine Site gemacht hättest, dann hätte ich noch nicht einmal darauf geachtet, um was es eigentlich geht auf deiner Site. Aber so: auch Kohle und Stahl darf mit niedrigem Budget eine Website nach heutigen technischen Standards erwarten!


    Das Problem erkenne ich aber nicht: Was genau passt dir denn da nicht/möchtest du ändern?




    Axel

    Worf du kannst die Techniken von vor 20 Jahren nicht auf ein modernes Templates übertragen.


    Du bist Spezialist für Datensicherheit, deshalb brauchst du nicht CSS Spezialist sein. Ich z.B. kann CSS aber wenn es um Datensicherheit geht werde ich einen Fachmann fragen. Umgekehrt kannst du ruhig jemand für das Template beauftragen oder einfach ein fertiges herunterladen / kaufen.

    Falls du aber gerne selbst Handanlegst:

    Es ist eine gute Entscheidung, das Protostar einzusetzen, aber so wie du es dir vorstellst geht es nicht. Protostar basiert auf Bootstrap Version2 (leider).

    Dein image ist in einem Container, nav-pills. Die nav-pills umschließen einen Text, kein Bild. Du könntest dann die nav-pills mit css so gestalten dass sie aussehen wie deine Grafik, mit Farbverlauf und einem sichtbaren Rahmen, wenn du willst.

    Schau dir das an: Bootstrap. https://getbootstrap.com/2.3.2/

    Indigo66

    Zitat

    Warum machst Du eine Bild als Menüpunk? Ich dachte Du willst ein Icon o.ä. als Zusatz zum normalen Menüpunkttext. Das ganze Grafische lässt sich per CSS erstellen und ist somit fast automatisch responsive.

    Joomla / Protostar bietet mir als Einsteiger nun mal an ein Bild zu nehmen. Momentan sehe ich keine Alternative ausser es in CSS zu Progrmieren.

    Muss ich mir jetzt sorgen machen das Joomla / Protostar auch seit 20 Jahren veraltet sind obwohl ich die aktuellen Versionen einsetze?


    @time4mambo


    Zitat

    Ich empfehle dir eines der fertigen Menüs aus der JED zu nehmen oder einfach das bestehende unverändert zu übernehmen. Das sieht schon etwas merkwürdig aus mit dem "Home". Da muss ich Tom recht geben. Sowas ist nicht mehr zeitgemäß.

    Wir möchten unser Menü so aufbauen wie wir es haben wollen. Das nur der Home Button da ist heist erst mal nichts, es wird schon ein ordendlichs Menü eingebaut.

    Und was ist denn zeitgemäß? Das ich jeden Trend hinterherlaufen muss?


    firstlady #


    Zitat

    Du bist Spezialist für Datensicherheit, deshalb brauchst du nicht CSS Spezialist sein. Ich z.B. kann CSS aber wenn es um Datensicherheit geht werde ich einen Fachmann fragen. Umgekehrt kannst du ruhig jemand für das Template beauftragen oder einfach ein fertiges herunterladen / kaufen.

    Falls du aber gerne selbst Handanlegst:


    Ja wir legen gern selbst Hand an. Ein kauf würde hohe Kosten mitsichbringen. Wir wollen unsere Seite aber kostenlos zur Verfügung stellen.

    Daher hoffen wir auch von eurer seite Unterstützung bein Aufbau der Seite zu erhalten.


    Zitat

    Dein image ist in einem Container, nav-pills. Die nav-pills umschließen einen Text, kein Bild. Du könntest dann die nav-pills mit css so gestalten dass sie aussehen wie deine Grafik, mit Farbverlauf und einem sichtbaren Rahmen, wenn du willst.


    Den Rahmen wollen wir nicht. Bis jetzt bin ich aus euren Schiderungen der Meinung das Joomla und seine Grundfunktionen vor 20 Jahren stehen geblieben ist, was das Design angeht, und man da nur mit CSS ein Eigenständigen Webdesign hinbekommt. Letztendlich ist es so das wir kein Template kaufen wollen ( das ja auch angepasst werden muss ) wir aber letztendlich Containt veröffendlichen wollen.

    Zitat von Worf

    Den Rahmen wollen wir nicht.

    Dieser Thread driftet langsam gefährlich ab, aber endlich (!) habe ich verstanden, was du wirklich möchtest ;). Das hat allerdings absolut nichts mit "Grafik responsive machen" zu tun. Ich glaube, du hast den Begriff "responsive" in diesem Zusammenhang etwas missverstanden, und es würde den Rahmen sprengen, hier alles genau zu erklären. Versuche es einfach damit im user.css:



    Zitat


    Momentan sehe ich keine Alternative ausser es in CSS...

    Das lässt sich kaum vermeiden, egal welches CMS oder welches Framework. Wenn du etwas Individuelles willst, dann wird dir nichts anderes übrig bleiben. Das ist wie mit Kleidern von der Stange. Wenn du daran etwas ändern willst, dann musst du wenigstens ein bisschen Ahnung vom Nähen haben ;).

    Zitat
    Bis jetzt bin ich aus euren Schiderungen der Meinung das Joomla und seine Grundfunktionen vor 20 Jahren stehen geblieben ist, was das Design angeht

    Bei allem Respekt, aber ich würde das eher anders herum sehen. Nimm doch einfach das Template wie es ist und ersetze den Header). Dann hast du sofort ein funktionsfähiges modernes, responsive template und kannst es mit Inhalten füllen.

    Natürlich helfen dir die Supporter. Aber du solltest auch auf sie hören, es sind ja Profis.

    Ja, wollen wir aber nicht. Das Protostar in sich ist ja nunmal auch nicht komplett responsiv. Man schaue sich das Login Modul an.

    Wir sind auch nicht Beratungsresistent, und wir wollen kein standart Template.


    Wir sind halt Anfänger im punto Joomla und haben großes vor. Aber meint Ihr nicht man sollte Designvorlagen mal anders sehen und nicht als Altertümlich und unmodern abtun.

    Wenn man mal in richtung Mode schaut sind altertümer plötzlich wieder Modern und sehr gefragt.


    Ja und dann Code schnipsel wie von "anka" . Ich frage mich Hmmm sieht gut aus aber wohin damit.


    Ihr meint es sicherlich gut, hilft mir aber nicht wirklich weiter.

    Das login Modul hat die Klasse span7 und ist daher zu schmal.

    Kann es sein, dass in dem Modul Login beim Parameter Bootstrap size 7 steht? Es ist besser, die volle Breite, also 0 oder 12 zu nehmen.

    Zitat von Worf

    ...Das Protostar in sich ist ja nunmal auch nicht komplett responsiv. Man schaue sich das Login Modul an.

    Sei bitte nicht böse, aber du solltest dich vielleicht wirklich noch einmal damit beschäftigen, was "responsiv" bedeutet. Glaube doch den Leuten hier, die versuchen dir zu helfen: das Protostar IST komplett responsive. Wenn das Login-Modul nicht so aussieht, wie du es erwartest, dann liegt es daran, dass du an den erweiterten Einstellungen des Moduls geschraubt hast, ohne zu wissen, welche Auswirkungen es haben wird. Auf diese Weise kann man natürlich jedes responsive Template zerschiessen ;).

    Zitat

    Ja und dann Code schnipsel wie von "anka" . Ich frage mich Hmmm sieht gut aus aber wohin damit.

    Hmmm, habe ich doch geschrieben: füge es in die Datei user.css ein.