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

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


    Ich verwende das Template protostar.


    Wenn ihr irgendwas bestimmtes braucht kann ich versuchen euch das zu liefern. Die Seite allerdings wie gesagt nicht.

  • 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:

    Code
    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:


    Code
    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!

  • 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:
    https://www.time4joomla.de/joo…n-css-angaben-findet.html



    Axel

  • 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.


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


    Dieses Element:


    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.


  • (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

  • Sooo ich habe das Problem lösen können.


    In der Template.css habe ich folgenden code gefunden:

    Code
    1. .navigation .nav-child li > a:hover,.navigation .nav-child li > a:focus,.navigation .nav-child:hover > a { text-decoration: none; color: #fff; background-color: #005e8d; background-color: #005783; background-image: -moz-linear-gradient(top,#005e8d,#004d74); background-image: -webkit-gradient(linear,0 0,0 100%,from(#005e8d),to(#004d74)); background-image: -webkit-linear-gradient(top,#005e8d,#004d74); background-image: -o-linear-gradient(top,#005e8d,#004d74); background-image: linear-gradient(to bottom,#005e8d,#004d74); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005e8d', endColorstr='#ff004c73', GradientType=0);}


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


    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

    Code
    1. background-image: none;


    reichen.
    Nur, falls nötig

    Code
    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.