Startseitenbild in Template Section in passender Größe platzieren

    Liebe Expertengemeinde,

    eigentlich hätte ich mehrere Fragen und weiß nicht, ob ich diese hier in diesem Unterforum passend platziere, ich hoffe, dass es zumindest zu meiner Hauptfrage passt.

    Ich bastle gerade probehalber an einem neuen Auftritt für unsere Bücherei. Dazu habe ich probehalber das Template Section von Ordasoft runtergeladen: https://ordasoft.com/section-f…tipurpose-joomla-template

    Von der Grundstruktur sieht dieses Template ja ein großes Bild auf der Startseite vor. Laut Backoffice steht dieses auf Position drei. Ich habe mir also ein Modul erstellt, das Bild eingefügt, und es an diese Stelle gerückt. Es erscheint auch dort, nur viel zu klein. Ich würde es höher bekommen, aber nicht breiter. Das schaut unheimlich bescheiden aus und irgendetwas mache ich falsch.

    Den Link zu meiner Testseite kann ich leider nicht öffentlich einstellen, würde ihn aber per PN verschicken.

    Da die Seite barrierefrei sein muss hätte ich außerdem die Frage, wie ich die Schrift des Menüs etwas größer bekomme und ggf. die Schriftart ändern kann. Ich nehme an, dass dies nur über die CSS funktioniert. Muss man da dann ein Override erstellen?

    Jedem, der bereit ist, mir zu helfen, danke ich vorab!

    Zitat von Joomuccia

    bin mir etwas unsicher, ob ich den Testlink hier online stellen lassen darf

    Die Forenregeln sagen, dass es sogar erwünscht ist.


    Das Problem ist, dass das Template umfassend mit der Klasse .container versehen ist und dieser nur eine maximale Breite von 1170px zulässt.


    Das könntest Du mit der zusätlichen CSS-Anweisung.

    CSS
    .bg_top .container {
    width: 100%;
}

    aushebeln.


    Inweiweit sich das auf die Unterseiten auswirken wird, kann ich nicht sagen.

    Vielen Dank für die Antwort - ich merke schon, das wird eine Nummer zu groß für mich. Ich verstehe nur nicht, warum das Template in der Demo so angezeigt wird, wenn dies dann nicht der Realität enspricht.

    Denn ich fürchte, in der CSS rumzumachen, wird für mich wohl zu kompliziert. Ich weiß zwar, was das ist und prinzipiell auch, wo ich es finde, aber ich habe zum Beispiel keine Ahnung, in welche der vielen Unterdateien, die da unter CSS liegen, ich das eintragen müsste ... Und vermutlich wird es zu kompliziert, das hier alles zu erfragen. Ich muss mir wohl doch professionelle Hilfe suchen.

    Unfassbar! Es hat geklappt! Ich bin begeistert! Hasst Du nun noch einen Tipp, wie ich die Schriftart im Menü oben etwas größer bekomme und ggf. den Font austausche? Und wie ich das komische, unten erneut erscheinende Home wegbekomme?

    Und wo ich als Geisteswissenschaftlerin einen Joomla-Expertenkurs machen kann :)

    PS: Der Nachteil ist leider der, dass das Startbild nun zwar auf dem Computer gut aussieht, aber nicht auf dem Handy. Muss ich da noch etwas hinzufügen?

    2 Mal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von Joomuccia mit diesem Beitrag zusammengefügt.

    Hallo,

    Zitat von Joomuccia

    PS: Der Nachteil ist leider der, dass das Startbild nun zwar auf dem Computer gut aussieht, aber nicht auf dem Handy. Muss ich da noch etwas hinzufügen?

    habe mir (während der neuen Meldungen) nur das wegen dem Startbild angesehen. Die anderen Posts müssen erst gelesen werden ......

    Geht ja nicht alles auf einmal :)


    Das Bild ist: Original 3404x1314px groß. Skaliert zu: 1170x452px.


    Hier steht in der style.css:

    Code
    .bg_top {
    background: url('../images/bg.png') no-repeat center;
        background-size: auto;
    background-size: cover;
    width: 100%;
    height: 700px;
    position: relative;
}

    eine Höhe von 700px; Sieht man den grauen Hintergrund. Mobil sieht man es zurzeit so (wegen der obigen Höhe):




    Wahrscheinlich hat in der Demo halt das Bild andere Ausmaße.


    Liebe Grüße

    Christine

    Oh, danke für die Antwort und für die genaue Angabe. Was muss ich jetzt am besten machen?

    Mein Bild bearbeiten? Auf dem Computer sieht es mit dem Zusatz in der CSS jetzt ja wie gesagt besser aus, nur auf dem Handy nicht.

    Zitat von Joomuccia

    Oh, danke für die Antwort und für die genaue Angabe. Was muss ich jetzt am besten machen?

    Mein Bild bearbeiten? Auf dem Computer sieht es mit dem Zusatz in der CSS jetzt ja wie gesagt besser aus, nur auf dem Handy nicht.

    Auf dem Computer stört doch auch dieser graue Balken? Und am Handy sieht man ja zusätzlich - siehe oben.


    So große Bilder sollte man nicht laden. Vielleicht auf die gewünschte Größe Original reingeben.

    Nicht gefragt, dennoch ein Hinweis: Bildnamen-Pfad bitte immer klein schreiben. (wenn wer Linux Server hat).


    Das Bild ist ja (skaliert) zu: 452px Höhe. Würde es nicht höher machen.


    Da es aber (siehe Code in #8) eine Höhe von 700px; hat, ist der Rest (Balken) grau zu sehen.

    Man müsste/könne, in der CSS die Höhe ändern.


    Liebe Grüße

    Christine

    Zitat von Joomuccia

    Ich verstehe nur nicht, warum das Template in der Demo so angezeigt wird, wenn dies dann nicht der Realität enspricht.

    Entspricht es. Wenn du das Quickstart-Package heruntergeladen und installiert hast, brauchst du das Bild suchen,

    welches du austauschen möchtest.

    Dann das neue Bild entsprechend erstellen und einstellen in den Ordner, wo das Originale ist.


    Auf der Demoseite hier:


    Code
    <img class="slide-image " src="https://ordasvit.com/business10//images/os_touchslider_113/original/bg20E3A293-3BD3-4837-2DC6-A07FFAE5C914.png" alt="bg20E3A293-3BD3-4837-2DC6-A07FFAE5C914.png" data-image-id="1">

    Vermutlich brauchst du kein Modul extra erstellen, sondern schaust mal in den Slider (Modul/Extension)

    und tausch es dort aus.


    Dann sollte es auch mobil passen ohne Code-Änderungen.

    Oh je, da bin ich wohl jetzt echt überfordert. Mmh, ich habe den Abschnitt mit der Höhe von 700px in der style css gesucht und nicht gefunden. Durchsuchen geht irgendwie nicht.

    Und am Bildnamenpfad habe ich bewusst gar nichts gemacht, Hiiiiilfe!

    Mit so Qickstart Pakete & Co. kenne ich mich nicht aus. Noch nie verwendet. Weiß Elwood besser.


    Nun grundsätzliche Infos zu:

    Zitat von Joomuccia

    Oh je, da bin ich wohl jetzt echt überfordert. Mmh, ich habe den Abschnitt mit der Höhe von 700px in der style css gesucht und nicht gefunden. Durchsuchen geht irgendwie nicht.

    Und am Bildnamenpfad habe ich bewusst gar nichts gemacht, Hiiiiilfe!

    Verwende den Inspector zum Untersuchen. Ich mach da immer: F12 (Firefox). Sieht dann so aus.

    Die Stelle, welche man ansehen möchte, markieren:



    Dann kommt man eben zu: <div class="bg_top"> #6 = style.css, Zeile 610


    Und in dieser Weise kannst Du die anderen Sachen auch untersuchen.


    Bild Pfad: Muss ja so eingegeben worden sein: http://bibtest.veitshoechheim.…s/5__BIB_VHH_Cafe_006.jpg


    Liebe Grüße

    Christine

    Hallo Ihr Lieben,

    wollte mich erst mal bedanken für all die guten Ratschläge, die so schnell zu mir gekommen sind. Ich werde mich jetzt erstmal in Ruhe damit beschäftigen (zumindest das mit dem Bildpfad kann ich korrigieren, denn da weiß ich nun doch, wie es dazu kommt). Bei den anderen Sachen bin ich nicht sicher, ob ich eine Chance habe, das hinzubekommen. Ich habe zwar tatsächlich schon ein Handbuch gelesen, bin mit diesen speziellen Fragestellungen wohl doch einfach überfordert. Aber ich gestehe, dass ich das Themenfeld ausnehmend interessant finde :-)!

    Zitat von Joomuccia

    ... außerdem die Frage, wie ich die Schrift des Menüs etwas größer bekomme und ggf. die Schriftart ändern kann. Ich nehme an, dass dies nur über die CSS funktioniert.

    Ob man das direkt im Template einstellen kann, musst Du schauen. Ev. gibt es auch eine custom.css.


    Hier ein kleiner Hinweis wegen Menü oben style.css, Zeile 101:

    Code
    .main_menu ul.menu > li > a {
    font-size: 14px;
    margin: 0 10px;
    padding: 20px 15px 18px;
    position: relative;
    text-transform: uppercase;
    font-weight: 400;
}

    font-size, text-transform.


    CSS Infos: https://www.w3schools.com/css/css_font.asp


    Liebe Grüße

    Christine

    Joa, inzwischen hab ich es auch gesehen :) Ist ja schon mal was. Nur das mit dem Bild kriege ich nie nie nie hin, das ist echt kompliziert. Vielleicht wäre ein anderes Template für uns doch besser. Die Schriftart (und damit meine ich den Font) müsste ich ja auch noch austauschen und selbst dann hätte ich erst einen Teil der Probleme gelöst (allerdings dafür, dass ich eigentlich keine Ahnung habe doch schon ganz schön viele :-).

    Zumindest weiß ich dann ungefähr, was ich will und brauche (und was nicht), wenn ich einen Freelancer suche.

    Kannst Du mir Dein Hirn für einen Tag leihen, dann hätte ich die Website vermutlich zackig fertig :)

    Danke, das ist auf jeden Fall eine echte Hilfe! Schon allein dafür hat die Anmeldung gelohnt.

    Das mit dem Slider, was Du mir sagtest, habe ich übrigens leider nicht gefunden, dafür habe ich die Höhe des Titelbildes in der CSS angepasst. Auf dem Computer sieht es nun aus, wie gewünscht, auf dem Handy leider immer noch nicht :(

    Tja, so was will eben einfach gelernt sein, chapeau vor Euch, die Ihr so was könnt!

    Ich nehme an, zweiteres, denn Joomla selbst hat mir unser Administrator aufgesetzt. Ich selbst habe das Template runtergeladen und entsprechend installiert.

    Mein Kollege meinte, es sei alles einfach, manches ist auch tatsächlich nicht so schwer, man merkt aber eben doch, dass man mit nicht ausreichenden Kenntnissen sehr schnell hängt. Ich hatte mir das so vorgestellt, dass es einen Platz für ein Titelbild gibt und man da sein gewünschtes Bild reinsetzt und ggf. noch in der Größe anpasst. Da hatte ich mich ja ziemlich geschnitten. :) Respekt vor der Technik ist eben immer angebracht.