Module aussehen anpassen

    Hallo erst einmal,

    ich bin noch sehr neu in dieser Materie, und beschäftige mich seid etwa einem Monat mit Joomla. Zudem sind meine Kenntnisse in CSS sehr beschränkt, auch hier bin ich noch Anfänger ;)

    Zu meinem Problem: Ich benutze den Style shape5 Vertex. Ich habe dort schon einiges angepasst, aber bei dem Modulaussehen hapert es noch.


    Das jetzige Design siehe Bild 1



    Ich möchte aber bei den Modulen "Dies ist eine Testbox", und auch im Hauptkontent (dem Beitragsfeld) einen anderen (zusätzlichen) Hintergrund haben,


    Siehe Bild 2



    Kann ich dies realisieren, und wenn ja wie?

    Ohne einen Link zum Problem kann dir das niemand beantworten!

    Ist die Site lokal, dann entweder das ganze Gerümpel auf einen Webserver spielen, Offline setzen, uns einen Offline-Zugang legen, den du wieder löschst, wenn das Problem gelöst ist und die Zugangsdaten solange hier einstellen.

    Oder: du lernst nun wie es geht und machst es selber:

    https://www.time4joomla.de/joo…n-css-angaben-findet.html

    CSS:

    https://www.time4joomla.de/joo…wie-funktioniert-css.html



    Axel

    Wir geben hier nur und ausschließlich Hilfe zur Selbsthilfe. Keinesdalls kannst du hier erwarten, dass jemand kostenlos deine Website fertig macht.

    Hast du denn meine Links mal durchgelesen und ausprobiert?



    Axel

    Das Problem ist ja eher, das nach meinem Verständnis von html/CSS ich ja innerhalb des Moduls noch mal einen Div ? zusätzlich einfügen muß, den ich dann die erforderlichen Parameter gebe. Ich habe die anderen Module ja mittlerweile weitestgehend selbst angepasst optisch, nur weiß ich eben nicht, wie ich innerhalb des Divs, den das Modul ja darstellt, noch einen Div anlege.

    Oder ist mein Ansatzpunkt völlig verkehrt, das würde mir dann eine Menge nachlesen ersparen, wenn man mich zumindest auf den richtigen Pfad bringt :)

    Sorry, die Zugangsdaten suggerierten mir, dass wir das für dich fertig machen sollen.


    Gehe in das Modul und vergebe eine Modulklassensuffix. Mit führendem Leerzeichen und idealerweise alles in Kleinburchstaben.

    Dann gibst du das hier neu in deine CSS-Datei ein (http://www.kristallsphere.de/t…5_vertex/css/template.css).


    Code
    .DeineModulKlassenSuffix {
background:url(../images/bild.jpg);
}

    Wenn du meinen Pfad übernehmen willst, musst du das Bild im Template ins Verzeichnis "images" legen. Sonst musst den Pfad anpassen.



    Axel

    Ich habe nun folgenden Code als eigenen eingetragen


    Code
    .modul_eigene01{
background:url(../images/hg_verlauf.png);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:solid 1px #77797d;
-webkit-box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.5) inset;
}

    Das zweite Bild Hintergrundbild konnte ich nur einsetzen, indem ich in der Modulfunktion ---> Optionen ein eigenen Hintergrundbild hochgeladen habe.

    Aber der Text ist so natürlich zu nahe am Rand. Das eintragen von "padding" mit einem Wert bringt mir nichts, ich bekomme dann nur quasi 2 Boxen ineinander,

    Welche Möglichkeiten würde es noch geben, den Abstand zum Rand der Box zu erhöhen?


    PS: @time4mambo Ich kenne das von früher als ich noch ein WBB-Forum betrieb, das die Hilfesteller oft einen ACP-Zugang wollten, daher war das in meinem Beitrag angeboten. Ich möchte natürlich aber nicht, das mir jemand die Webseite fertig stellt, aber kleine Hilfestellungen sind durchaus erwünscht, da ich mich mit dem erlernen der Materie etwas schwer tue. beer

    padding:10px;


    auch da rein, wo der Hintergrund implementiert ist.

    Bei mir ist dann ausreichend Abstand.


    Was du aber tunlichst nicht machen solltest: eine h1 Überschrift in das Modul einbauen! Sowas gehört sich nicht und kann zu SEO-Einbußen führen, wegen falschen Aufbaus.


    Faustregel:

    Eine H1 ist auf einer Seite nur ein einziges Mal zu sehen. Beiträge haben in aller regel eine H2 und die Module eine H3 Überschrift.



    Axel

    Erst einmal Danke für die Information mit der h1 Überschrift :)


    Das mit dem padding: Ich habe meinen Hintergrund über die moduleigene Funktion "Hintergrundbild auswählen" bei den Optionen des Moduls hochgeladen, und dort kann ich kein padding einbringen.

    Innerhalb meines oben geposteten Codes geht ebenfalls kein padding, dann bekomme ich lediglich einen doppelten Rahmen.

    Ich habe jetzt erst einmal eine "Hilfskrücke" genommen, indem ich in dem Modul erst einmal eine Tabelle mit einer Zelle gesetzt habe, und der Tabelle dann einen einen Zellenabstand von 10 zugewiesen habe. Nicht besonders elegant, aber zumindest funktioniert es bei einem eigenen Modul. Ich werde mich aber nach und nach in die Materie einlesen search und hoffe dann eine bessere Lösung zu finden

    Zitat von Thorsten

    Erst einmal Danke für die Information mit der h1 Überschrift :)


    Das mit dem padding: Ich habe meinen Hintergrund über die moduleigene Funktion "Hintergrundbild auswählen" bei den Optionen des Moduls hochgeladen,

    Das stimmt nicht, was du sagst. In Zeile 523 der css.css findest du diesen Code:

    Code
    .modul_eigene01 {
    background: url(../images/hg_verlauf.png);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: solid 1px #77797d;
    -webkit-box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 0 18px 2px rgba(0, 0, 0, 0.5) inset;
}

    Und da gehört auch das padding rein.


    Von uns würde niemand auf die Idee kommen, dass im Modul selber einzugeben, sondern macht das immer über CSS ;)



    Kleiner Themenwechsel:

    Ich finde es generell toll, wenn Menschen sich mit Webdesign beschäftigen und da selber was machen. Aber Webdesign ist heutzutage sehr komplex geworden und alles andere als einfach. Deine Site ist, so wie sie sich gerade entwickelt, in vieler Hinischt nicht mehr zeitgemäß, wenn auch responsiv (mobiltauglich). Schwarz/weiss ist okay, abr das mit den metallenen Hintergründen, abgerundeten Ecken, breiten Rahmen, fette Schrift (SEO-feindlich!), viel zu große Schrift - das sind so Dinge, wo man den Amateur dran erkennt. Dazu die falsche Struktur der Website...


    Ich will dir nichts böses - bitte nicht falsch verstehen.

    An deiner Stelle würde ich jedoch ein modernes fertiges Template nehmen und das mit deinen eigenen Bildern anpassen.

    Nur so als Tipp.




    Axel

    Hallo Ihr 2 - nee jetzt 3,


    also jetzt geb ich da auch meinen Senf dazu :)


    glaube, dass das Template selbst, in Ordnung ist. Wenn man es natürlich dann mit Tabellen verbaut (welche im Layout Design hier nicht notwendig sind), tja dann kommt wohl sowas raus.


    Tabellen kannst Du verwenden, wenn Du z.B. eine (echte) Tabelle für chemische & sonstige Angaben der Mineralien brauchst :)


    Die Schrift: Also nee, die finde ich OK. Ist doch besser, als wenn alles so winzig ist.

    Man könnte (sehe gerade post von Christiane) diese Formatierungen über CSS machen.

    Außerdem hast Du eine: custom.css


    Farben: Ja, könnten freundlicher sein.


    Zu den paddings:

    Nun ja, es ist so, dass im eigenen HTMl Modul nochmals der suffix ".module_eigene01" drinnen ist.
    Ein padding: 10px, ginge grad noch. Aber ein z.B. padding-left:10px; nicht, weil es dann zu 2 Boxen kommt.


    Ginge dann so (kürze es hier ab):


    Code
    .custom.modul_eigene01 {
deine formatierung
}

    Und bei den Menüpunkten (unterhalb) bitte dort auch keine Tabellen.


    Liebe Grüße

    Christine

    Zitat von firstlady

    bei den meisten Punkten stimme ich zu, aber große Schrift fand ich nirgends? Und Weshalb ist fette Schrift SEO-feindlich?

    Jetzt wo du es sagst....

    Denke, es liegt an der fetten Schrift und der falschen Struktur, dass mir der "normale Content" größer erscheint.


    Zitat


    Und Weshalb ist fette Schrift SEO-feindlich?

    Neben diverser weiterer Dinge kannst du mit Fettschrift die Gewichtung einzelner Wörter im Zusammenhang mit SEO steuern. Die Nähe bestimmter Wörter zur Überschrift - wenn du dann noch solche Wörter fett machst, sind sie besonders wichtig. Nicht fett: ziemlich wichtig. Nah zur Überschrift: sehr wichtig. Weiter weg von der Überschrift: nicht mehr so wichtig. Die aber fett: wichtiger als nicht fett ;)


    Ich bin kein SEO-Fachmann, aber es gibt mittlerweile den Online-Redakteur unter SEO-Aspekten. Die lernen sowas richtig. Das Arbeitsamt bezahlt sogar 8wöchige Kurse für so etwas und man kann auch gut Geld damit verdienen, wenn man das beherrscht ;)


    Das Problem bei vielen Webseiten: da werden solch unwichtigen Wörter wie: "Herzlich Willkommen" nicht nur mit einer H1-Überschrift versehen, sondern oftmals noch zusätzlich fett (strong) gemacht. Oder auch solche Sachen wie:


    Dieser Text ist eigentlich völlig unwichtig, weshalb wir ihn nur am Rande erwähnen.


    In einem Buch kann das Sinn machen, das Wort "weshalb" hervorzuheben, um die Betonung beim Lesen darauf zu lenken. Aber die Website ist kein Buch ;)

    Und hier wäre es verschenkte SEO.




    Axel

    font-weight weiß ich nicht.


    Zitat

    Hervorhebungen durch Fettschrift strukturieren SEO-Text

    Mittels des HTML-Tags „strong“ können Textteile oder Wörter eines SEO-Textes fett markiert werden und drücken so aus, dass es sich hier um eine wichtige Information für den User handelt. Neben dem strong-Attribut gibt es des Weiteren das HTML-Tag „b“ für das englische Wort „bold“. Auch hier gibt es formal keine Unterscheidung durch den Algorithmus von Google.

    Die Markierung oder Hervorhebung durch Fettschrift hat sich im SEO-Bereich besonders bei Keywords etabliert. So können die wichtigen Keywords im Text fett markiert werden und signalisieren dem Nutzer sowie dem Crawler augenblicklich die wichtigen Informationen, die sich im Text befinden. Aber auch dem Haupt Keyword verwandte Suchbegriffe können durch Fettschrift hervorgehoben werden. Dadurch kann Ihre Website im Ranking wertvolle Plätze hinzugewinnen.

    Quelle: https://www.loewenstark.com/wissen/seo-hervorhebungen/



    Axel

    @time4mambo

    Doch, den Hintergrund zum beschriften habe ich wie beschrieben über die eigene Modulfunktion Hintergrundbild auswählen" eingetragen, der im Code hinterlegte Hintergrund bestimmt den Rahmen.


    Füge ich das padding in den Code ein


    erhalte ich nicht nur einen Abstand, sondern zusätzlich quasi einen zweiten Rahmen, den ich nicht möchte



    Deswegen ja versuchsweise die Tabelle, um das zu umgehen :)


    Zu den Templateaussehen generell: Ja, das Design ist sicher etwas eigenwillig, und vielleicht auch nicht "modern", aber mir gefällt so etwas. Ich bin auch nicht mehr der Jüngste, von daher ist etwas "Retro" nicht verkehrt - Nur vom Aussehen gesprochen jetzt :)

    Das mit dem SEO werde ich überarbeitem, zur Zeit sind die Texte nur Platzhalter, Im Moment versuche ich erst einmal das Design so hin zu bekommen, wie ich es möchte :)

    deswegen mein obiger Hinweis. Siehe post #16 (Code) Zeige es auch bildlich:



    wobei ich jetzt nicht weiß, ob es sein soll:

    a) background:url(../images/modulboxen/hg_verlauf.png oder:

    b) background:url(../images/hg_verlauf.png);

    weil im custom Modul = a)


    Liebe Grüße

    Christine

    Es sind 2 verschiedene Hintergründe


    Modulhintergrund allgemein

    background:url(../images/hg_verlauf.png);


    Der Hintergrund innerhalb der des Moduls bzw. innerhalb des Rahmens

    background:url(../images/modulboxen/hg_verlauf2.png


    Das ist ja soweit gewollt, der zweite Hintergrundverlauf ist gegenläufig zum ersten (180 Grad)

    Ok, also dann Thorsten, das mit dem padding, wie Axel vorschlägt, erzeugt einen doppelten Rand, wie Du selbst festgestellt hat. Die Tabelle ist aber keine praktikable Lösung.


    Man erzeugt in solchen Fällen eine innere Box, der man dann das padding gibt.


    Zuerst entfernst Du wieder die paddings: 10px; in der: .modul_eigene01.......


    In Deine Box schreibst vor dem Text (den hast Du ja schon):


    Code
    <div class="box-inner">
      <p>Testtext für die Box</p>
<p>und noch was</p>
</div>

    In der CSS dann (extra eintragen):


    Code
    .custom.modul_eigene01 .box-inner {
      padding: 1rem;
}

    so wärs halt noch klassischer.


    weiß nicht, warum Du meinen Code von vorhin nicht ausprobiert hast und wieder in die Zeile 523 gegangen bist.


    Liebe Grüße

    Christine