JoomlaCamp 2018 Essen - 03.02.2017 in Essen

Bild im Menü anpassen

    Bild im Menü anpassen

    Moin,

    ich habe folgendes gemacht:

    Details:
    Menüeintragstyp: URL
    Link: #

    Linktyp:
    Bild zum Link: xyz.png
    Menütitel hinzufügen: Nein
    Im Menü anzeigen: Ja

    Der Eintrag ist ein Untereintrag eines Haupteintrags. Verwendet wird ein hover Menü, wenn man mit der Maus über den Haupteintrag fährt, (tut es ihm weh :D ) und es das Untermenü mit dem oben beschriebenen Eintrag wird angezeigt.

    Das Problem ist jetzt, dass das Bild zu klein angezeigt wird und man es daher nicht erkennen kann. Wie kann ich die größe festlegen? Egal welche Auflösung das Bild hat, es wird immer auf die gleiche Größe reduziert. Kann man da schon etwas in den Optionen des Menüeintrags definieren? Evtl unter CSS-Bildstil? Meine Vermutung wäre sonst die template.css.

    Einen Link zur Seite kann ich nicht liefern, da es sich um ein Intranet handelt.

    Bin dankbar für jede Hilfe!

    Freundliche Grüße

    hhh
    Bilder
    • 1.PNG

      7,49 kB, 633×184, 27 mal angesehen
    • 2.PNG

      12,23 kB, 456×392, 28 mal angesehen
    • 3.png

      14,54 kB, 173×139, 147 mal angesehen
    Hallo,
    na dann geht's auch nur "so in etwa". Gehe jetzt aber von einem Eintrag aus bei: CSS-Style für Link. z.B.: bild
    Die CSS wäre dann:

    Quellcode

    1. a.bild img {
    2. width:50px;
    3. height:50px;
    4. }


    Kann dann aber auch verpixelt sein, falls es mit Originalgröße nicht übereinstimmt.
    Am besten in eine: user.css

    Liebe Grüße, Christine
    Hallo,

    meine Frage wäre: Hast Du ein zusätzliches Menümodul im Einsatz?
    Grund meiner Frage: Ich habe es gerade einmal mit Protostar und Deinen Angaben versucht und da hat das Bild immer die Originalgröße.
    Evtl. ist da in der template.css für img bereits etwas geändert worden (Zeile 50).
    CSS-Anpassungen beim Template Protostar am Besten in die user.css (siehe auch hier)

    Christian
    Vielen Dank für eure Antworten, vorallem das mit der user.css ist sehr hilfreich!

    Ich habe einen Weg gefunden, in der user.css habe ich nun folgendes css:

    Quellcode

    1. .item-182 a:before {
    2. content: url("http://intranet/images/bild.png");
    3. display: block;
    4. }

    (item-182 ist der Menü-Eintrag mit dem Bild)

    Jetzt würde ich noch gerne, wenn man mit der Maus über das Bild fährt den Wechsel der Hintergrundfarbe ausschalten oder auf die gleiche Farbe wechseln lassen.
    Im Anhang dazu ein Bild. Der Blaue Rahmen nervt.

    Das sollte natürlich nur für diesen Eintrag überschrieben werden, bei den anderen Menü-Einträgen sollte der Wechsel der Hintergrundfarbe bestehen bleiben.

    Ist nicht das wichtigste, möchte allerdings jetzt einfach wissen wie ich das ändern kann.

    In der template.css habe ich jede menge dazu gefunden, was dort theoretisch (aus meiner Sicht) mit reinspielen könnte, quasi von Zeile 2060 bis 2071 und 2975 bis 3120 und bei 7473. Aber wie spreche ich denn nun genau nur das eine Item an und nicht alle Menüeinträge gleichzeitig?

    Mir fehlen da wohl einfach auch ein bisschen die CSS fähigkeiten.. pardon

    Danke!
    Bilder
    • Hintergrund.png

      11,9 kB, 431×304, 16 mal angesehen
    Hier ein Tutorial, wie du selber die CSS-Angaben finden kannst. Da wir ja nicht ins Internet können, es aber notwendig ist, bei Designfragen jeglicher Art, selber nachzusehen, hilft dir das hier eventuell weiter:
    time4joomla.de/joomla-2-5/temp…n-css-angaben-findet.html


    Axel
    Tutorials zu Joomla! und MS-Office: time4joomla
    Webentwicklung, (Online-) Schulung und mehr: time4mambo
    Deutschsprachige Seblod-Community
    Danke für die Antwort Axel, ich habe schon zuvor dort hineingeschaut, allerdings kann ich da nichts finden, was mit meinem Problem zutun haben könnte.

    Quellcode

    1. <li class="item-179 deeper parent">
    2. <a href="#">
    3. <img src="/joomla30/images/icons8-settings.png" alt="Settings">
    4. </a>
    5. <ul class="nav-child unstyled small">
    6. <li class="item-182">
    7. <a href="#">&nbsp;</a>
    8. </li>


    Dieses Element:

    Quellcode

    1. Element {
    2. }
    3. .navigation .nav-child {
    4. position: absolute;
    5. top: 95%;
    6. left: 0;
    7. z-index: 1000;
    8. display: none;
    9. float: left;
    10. min-width: 160px;
    11. padding: 5px 0;
    12. margin: 2px 0 0;
    13. list-style: none;
    14. background-color: #fff;
    15. border: 1px solid #ccc;
    16. border: 1px solid rgba(0,0,0,0.2);
    17. *border-right-width: 2px;
    18. *border-bottom-width: 2px;
    19. -webkit-border-radius: 6px;
    20. -moz-border-radius: 6px;
    21. border-radius: 6px;
    22. -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    23. -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    24. box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    25. -webkit-background-clip: padding-box;
    26. -moz-background-clip: padding;
    27. background-clip: padding-box;
    28. }
    29. ul.unstyled, ol.unstyled {
    30. margin-left: 0;
    31. list-style: none;
    32. }
    33. .small {
    34. font-size: 11px;
    35. }
    36. ul ul, ul ol, ol ol, ol ul {
    37. margin-bottom: 0;
    38. }
    39. ul, ol {
    40. padding: 0;
    41. margin: 0 0 9px 25px;
    42. }


    Die Zeile "background-color: #fff;" ändert nur die dauerhafte Hintergrundfarbe, allerdings nicht die, die durch den hover-effekt genutzt wird.

    In welcher Datei werden denn die Klassen "item-182" und "nav-child unstyled small" definiert? Ich denke dort werde ich die Lösung finden.

    chr-hl schrieb:


    (z.B. Apfelkuchen)

    OT: Ich liebe dich! :* :D


    @BG_hhh
    Das ist eben das Problem. Ich kann das an Hand des Codes nicht erkennen. Ohne Analysetool habe ich da keine Chancen.
    Du musst damit das Problem "umzingeln". Ist es hier nicht, dann einen höher (oder tiefer). Du hast rechts die CSS-Angaben und links die HTML-Struktur und die -Blöcke. Ich sage nicht, dass es einfach ist, aber wir machden letztlich nichts anderes. Und manchmal muss man sehr lange suchen...


    Axel
    Tutorials zu Joomla! und MS-Office: time4joomla
    Webentwicklung, (Online-) Schulung und mehr: time4mambo
    Deutschsprachige Seblod-Community
    Sooo ich habe das Problem lösen können.

    In der Template.css habe ich folgenden code gefunden:

    Quellcode

    1. .navigation .nav-child li > a:hover,
    2. .navigation .nav-child li > a:focus,
    3. .navigation .nav-child:hover > a {
    4. text-decoration: none;
    5. color: #fff;
    6. background-color: #005e8d;
    7. background-color: #005783;
    8. background-image: -moz-linear-gradient(top,#005e8d,#004d74);
    9. background-image: -webkit-gradient(linear,0 0,0 100%,from(#005e8d),to(#004d74));
    10. background-image: -webkit-linear-gradient(top,#005e8d,#004d74);
    11. background-image: -o-linear-gradient(top,#005e8d,#004d74);
    12. background-image: linear-gradient(to bottom,#005e8d,#004d74);
    13. background-repeat: repeat-x;
    14. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005e8d', endColorstr='#ff004c73', GradientType=0);
    15. }


    dann habe ich in der user.css den code eingefügt und tada! es gibt keinen sichtbaren hover effekt mehr bei dem element.:

    Quellcode

    1. .navigation .nav-child li > a.schriftgroesse:hover,
    2. .navigation .nav-child li > a.schriftgroesse:focus,
    3. .navigation .nav-child:hover > a.schriftgroesse {
    4. text-decoration: none;
    5. color: #fff;
    6. background-color: #fff;
    7. background-color: #fff;
    8. background-image: -moz-linear-gradient(top,#fff,#fff);
    9. background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#fff));
    10. background-image: -webkit-linear-gradient(top,#fff,#fff);
    11. background-image: -o-linear-gradient(top,#fff,#fff);
    12. background-image: linear-gradient(to bottom,#fff,#fff);
    13. background-repeat: repeat-x;
    14. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005e8d', endColorstr='#ff004c73', GradientType=0);
    15. }


    ich bin die template.css einfach nach allen ":hover" elementen durchgegangen thinking und habe bei den möglichen elementen getestet ob ein effekt auftritt wenn ich die farbe mit einer anderen ersetze. In Zeile 7469-7483 hatte ich dann endlich Erfolg! :D

    Danke für eure Hilfestellungen! beer
    Das kannst du kürzen.
    Zeile 6 raus (doppelt)
    und für die mehrfachen background-image sollte ein einzelnes

    Quellcode

    1. background-image: none;

    reichen.
    Nur, falls nötig

    Quellcode

    1. background-image: none !important;


    Das background-repeat: sollte damit auch hinfällig sein.

    text-decoration: none; brauchst nicht überschreiben (vermute ich), weil schon im Original-CSS.

    und in der (dämlichen [nicht du]) filter:-Zeile für IE hast vergessen die Farben anzupassen. Weiß aber nicht, welche IE-Browser das überhaupt heutzutage noch brauchen / interpretieren.

    Auch Hintergrund: Dieses ganze Gradient-Gedöns bedeutet Last / Performance-Verschwendung, weshalb z.B. heutzutage Buttons und Kram bevorzugt flat und uni-farbig gestaltet werden.
    Joomla-Fachmann: ghsvs.de

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Re:Later“ ()

forum.joomla.de is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.