Header nicht responsive

    Guten Tag,


    ich habe hier schon ein paar Wochen mitgelesen und hier viel gelernt, vor einigen Wochen wusste ich nicht mal was Joomal ist und heute macht es mir soviel Spass! Für einen Bekannten habe ich eine Webseite erstellt und bin mittlerweile schon fast zufrieden.

    Habe mir eine Vektorgrafik besorgt und diese mit Adobe Illustrator auch passend beschriftet, leider wird diese nicht responsive auf dem Smartphone dargestellt und so habe ich etwas getrickst und die Grafik lediglich genommen u die Beschriftung im Joomla direkt in den Header geschrieben, dass ist nicht optimal und deswegen bin ich hier. Die Vektorgrafik habe ich als png exportiert.


    Würde mich freuen wenn ihr tipps (auch Tipps darüber hinaus, würden mich sehr freuen) für mich habt und die Seite mal anschaut:


    http://joomla.bts-suhl.de/


    MfG

    Auf meinem SmartPhone wird alles sauber angezeigt.

    Android und Firefox-



    Aber du solltest besser für dich Webseiten machen. Möchte dir nicht zu nahe treten, aber Firmen wollen und sollen Umsatz über Webseiten generieren. Und um das zu erreichen braucht es eine Menge mehr Wissen, als zu wissen, wie man Joomla installiert und Texte einstellt.

    Ist nicht bös gemeint. Aber allein die fehlerhafte Datenschutzerklärung kann für deinen Bekannten sehr sehr teuer werden!

    Die Website selber ist auch sehr hausbacken. Ich persönlich würde den Elektriker nicht beauftragen über die Website.


    Die Joomlaversion ist auch nicht aktuell. Da die Site bereits Online ist: Menüverweise in denen keine Inhalte stehen, deaktiviert man und fügt erst Inhalte ein - denn die Suchmaschinen sind bereits unterwegs!



    Axel

    Zitat von time4mambo

    Auf meinem SmartPhone wird alles sauber angezeigt. Android und Firefox-

    Nein, wird es nicht. Das täuscht nur :) Die Beschriftung ist responsive, aber die Grafik nicht.


    Geht wohl da um die Bögen: http://joomla.bts-suhl.de/images/final2.png

    Code
    div class="custom_header" style="background-image: url(/images/final2.png);">
    <p style="text-align: center;"><span style="font-size: 14pt;">&nbsp;</span></p> .... usw.

    ist irgendwie Inline eingegeben worden.


    Hatte u.a. versucht, e.g. .custom_header {max-width:100%; height: auto;} zurechtzubiegen. Ging aber nicht.


    bigthe: Gibt's da nicht im backend bei den Stilen oder so, wo man ein Logo eingeben kann?

    Natürlich dann ein richtiges, samt die Beschriftung mit besserer Farbe, wie Indigo66 sagt.

    Mach das mal, danach sehen wir weiter.


    Liebe Grüße

    Christine

    Hallo,


    vielen Dank für die antworten und auch für die Tipps


    christine2

    ich habe den header selbst erstellt als modul und das Bild dann als Hintergrund anzeigen lassen. Ich kann das leider nicht umsetzen was du mir geraten hast. Würdest du mir bitte helfen?



    @time4mambo


    was konkret ist an der Datenschutzerklärung falsch? Würde mich sehr über Tipps freuen.


    MfG

    Guten Abend,


    ein Generator habe ich doch verwendet, alles selbst geschrieben habe ich das sicherlich nicht :). Bei diesem kostenlosen Generator habe ich alles angekreuzt. Was konkret fehtlt denn jetzt noch?


    Elwood:

    bei mir und auf meinem Tablet sieht das nicht ganz so schlimm aus, da passt eben nur der header nicht... aber werde demnächst mal auf Protostar umsteigen.

    Zitat von bigthe

    Was konkret fehtlt denn jetzt noch

    z.B. eine Angabe über die eingesetzten Cookies, evtl. auch über Schrift-Fonds, Arten der verarbeiteten Daten, Rechte betroffener Personen, ...

    schau einfach mal hier im Forum mit der Suchfunktion nach dem Stichwort DSVGO. Dann wirst Du sehen, was u.U. noch alles fehlt. Dort gibt es etliche Links zu Generatoren, die offensichtlich umfassendere Ergebnisse bieten. Ein weiterer hilfreicher Ansatz ist m.E. die Datenschutzerklärung der entsprechenden Kanzleien durchzusehen (z.B. https://datenschutz-generator.de/ oder https://www.juraforum.de/impressum-generator/ oder ...).

    Zitat von bigthe

    ich habe den header selbst erstellt als modul und das Bild dann als Hintergrund anzeigen lassen.

    hmm. Hab mal da geguckt, was das für ein Modul sein soll.


    Bei Dir ist es so:



    Modulpositionen sind hier: http://joomla.bts-suhl.de/?tp=1


    Also position: afterhead3. Von oben lesend, ein ganzer Schwung eben bis zu dieser .custom_header.

    Danach (nicht im Bild) kommen noch die Texte und das Bild: http://joomla.bts-suhl.de/images/canvas.png


    Herstellerseite, die Positionen: https://www.bakual.net/dokumentation/modulpositionen.html


    dort ist der Header so:



    Im header_container gibt es den header / logo / (halt ohne Bild) / slogan (für Text)


    a) schau doch mal ob Du bei der position: banner was machen kannst.


    b) ev. könnte man dann:

    #header_container {

    background-image: url("/images/final2.png“);

    }

    machen. Den Code bitte einstweilen noch nicht machen.

    Zuerst a) probieren.


    Liebe Grüße

    Christine

    Guten Morgen,


    danke danke nochmals für den Tipp mit dem unvollständigem Impressum, dass habe ich jetzt nochmals angepasst und werde die fehlenden Daten später noch nachreichen. Schon Heftig was man alles beachten muss, hatte mich auch an andere Elektrikerwebseiten orientiert und die haben kaum etwas dazu, trotz Kontakformular.


    christine2:


    Den Header von template allrounder benutze ich nicht weil ich nicht genau weiß wie ich die Schrift u Logo zb anpassen kann. Ich habe schon versucht eine custom.css zu erstellen u im Forum bakual die passenden Daten dazu eingegeben, hat leider nicht funktioniert und so habe ich es eben auf diese Weise versucht umzusetzen. Vielleicht wäre es doch nicht verkehrt den header von allrounder zu verwenden u dem mit der custom.css anzupassen nur wie genau? wo muss ich die custom.css hinkopieren? Schreibe ich dort nur die Regeln hinein die ich umsetzen möchte?


    Es gibt ja im joomla bzw beim template die Möglichkeit custom.css auf diesem wege zu verwenden, damit hatte ich auch ohne erfolg rumgespielt.


    habe versucht den header auf position banner zu ziehen aber da wird er nicht angezeigt.

    Zu dem #14


    kann nicht wirken, weil Deine custom.css nicht geladen/aktiviert ist:

    Code
    <link href="/templates/lessallrounder/css/template10.css" rel="stylesheet" type="text/css" media="all" />
        <script src="/templates/lessallrounder/js/effects.js" type="text/javascript"></script>

    Zu #13: Use Custom CSS Code: Ja.

    Zitat von bigthe

    Vielleicht wäre es doch nicht verkehrt den header von allrounder zu verwenden u dem mit der custom.css anzupassen nur wie genau? wo muss ich die custom.css hinkopieren? Schreibe ich dort nur die Regeln hinein die ich umsetzen möchte?

    Ja und siehe oben.

    Zitat von bigthe

    Ich habe schon versucht eine custom.css zu erstellen u im Forum bakual die passenden Daten dazu eingegeben, hat leider nicht funktioniert und so habe ich es eben auf diese Weise versucht umzusetzen.

    "im Forum bakual die passenden Daten dazu eingegeben"

    Heißt das, dass Du schon im Forum angefragt hast oder wie meinst Du das?


    Gibt da versch. Einträge: https://www.bakual.net/forum/s…521-header-gestalten.html

    https://www.bakual.net/forum/s…rplatzierung.html?start=0


    Mit dem Banner / Header hat es nicht funktioniert?


    Zu dem da:

    #header_container {

    background-image: url("/images/final2.png");

    }

    ist durch Kopieren (im Vorpost) ein falsches Gänsefüßchen entstanden.

    Aber wie schon in #12 gesagt, muss dieser (noch) nicht wirken, da Position etc. noch ausständig ist.


    Liebe Grüße

    Christine

    Nein ich habe mich lediglich hier angemeldet und auch gefragt, in dem anderen Forum war ich stiller Mitleser. Die Sachen werde ich gleich mal versuchen umzusetzen. Vielen Dank für die Mühe!

    Hey christine2


    ich habe natürlich daamal bei test custom css aktivuiert und zufällig auch die selbe Seite von bakual aufgerufen wie du, dass nachgebaut aber irgendwie funzte es nicht.

    Aktuell habe ich alles wie du schriebst auch mit dem richtigen " probiert aber mit wenig erfolg es wird irgendwie angezeigt aber auch irgendwie nicht....

    Also wenn ich den header von bakual nehme wird es nicht als hintergrund angezeigt lediglich ein kleiner streifen vom png.

    bei meinem eigenen modul wird es im hintergrund angezeigt allerdings wirds überschattet....

    http://joomla.bts-suhl.de/index.php

    wenn ich im modul den hintergrund entferne wird es weiß angezeigt.

    Ach, das ist ein Ding. Muss mir das in Ruhe ansehen. Der Ist-Stand zurzeit ist, dass es nun auf position afterhead3 und afterhead1 ist.


    Dann gibt's noch eine neue: div.module Klasse. Das gab's vorher nicht.


    a) Mach bitte jetzt folgendes:

    Erweiterungen > Templates Stile > Erweitert > Logo und gib das hier rein: http://joomla.bts-suhl.de/images/final2.png


    Dass da kein Text usw. drin ist, ist klar. Das ist ja alles extra (siehe #12) wobei der Aufbau jetzt natürlich wieder anders ist.


    b) Danach nimmst Dir ein Menü z.B. "Über uns" und aktivierst dort beim Template-Stil: Protostar default.

    Wird dann alles anders aussehen (egal) - möchte wissen, wie obiges Bild mobil aussieht.


    Liebe Grüße

    Christine

    hey,

    also wenn ich erweiterungen bin, kann ich wählen zw zb. templates und stile... aber nirgends finde ich logo. Bitte verzeih mir aber stehe gerade nach langem arbeitstag irgendwie aufn schlauch.

    habe im protostar das logo final2 eingefügt und für das menü "über uns" die zugehörigkeit geändert

    wie kann ich zb beim template protostar das ganze template vergrößern? was muss ich da in der css eintragen?

    Zitat von bigthe

    habe im protostar das logo final2 eingefügt und für das menü "über uns" die zugehörigkeit geändert

    prima. Das Bild ist nun mobil responsive.

    Zitat von bigthe

    wie kann ich zb beim template protostar das ganze template vergrößern? was muss ich da in der css eintragen?

    Erweiterungen > Templates > Stile > Erweitert > Fluid-Layout


    Schriftfarbe kannst dort auch ändern. Mehr schreib ich jetzt in Moment nicht dazu, wird zu viel.