Zum Hauptinhalt springen
OpenID

Neu

Thema: Buttons mit Icons (Main Menu) (1100-mal gelesen) Vorheriges Thema - Nächstes Thema

0 Benutzer und 1 Gast betrachten dieses Thema.
  • Ruth
  • [*]
Buttons mit Icons (Main Menu)
Hallo, miteinander!

Mit viel Hilfe von den Jungs von ElkArte habe ich mal eine Möglichkeit ausgetüftelt, wie man Buttons mit einzelnen Icons (GIFs oder PNGs) versehen kann. Ich wollte Icons, die relativ groß sind (tw. mehr als 30 px) und in der Höhe etwas über die eigentlichen Buttons hinausragen.

Die Vorgehensweise ist je nach Button-Art etwas unterschiedlich; dies hier ist mal nur der Code für die Buttons im Main Menu.

Ich bin mit dem Resultat noch nicht ganz zufrieden. Es ist insgesamt ein bißchen viel Code und diese Vorgehensweise verändert die Höhen in der Top Section, bzw. die Abstände zu den Dropdowns im Main Menu deutlich. Dadurch schauen die "subsection indicators" (diese kleinen Pfeile, die kurz zu sehen sind, wenn man einen Button mit einem Dropdown-Menu berührt) etwas seltsam aus. Sie "rutschen nach unten". Dafür habe ich noch keine gute Lösung gefunden und sie deshalb vorläufig einfach auskommentiert.

Ich schreibe den Code jetzt trotzdem mal auf, vielleicht kann ihn jemand brauchen (oder verbessern) und ich hab eine Merkhilfe. ;)

Wenn man gleich große und nicht allzu große Icons verwendet, ist die Sache recht einfach. Man lädt die gewünschten Grafiken in den Ordner ".../themes/dein theme/images/theme" hoch und fügt z.B. in die index_light.css diesen vereinfachten Code ein:

#main_menu {
 position: relative;
}
#main_menu .listlevel1>a:before {
        margin: 0;
        position: relative;
        bottom: 8px;
        display: inline-block;
        z-index: 5;
        right: 5px;
        float: left;
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
 }

Bei kleineren Icons kann man die Werte bei height und width entsprechend verändern.

Damit auf den Buttons vorne, also links, mehr Platz ist und die Grafiken auf den Buttons erscheinen, muß man für jeden einzelnen Button im Main Menu zusätzlich eine solche Anweisung schreiben und die URL zur Grafik einfügen.

Dieser Code ist für den Home-Button:

#button_home a:before {
    background-image: url (.../themes/dein theme/images/theme/home.gif);
    content: '';
}

Nach dem gleichen Muster fährt man so für jeden Button fort, ein weiteres Beispiel:

#button_admin a:before {
    background-image: url (.../themes/dein theme/images/theme/admin.png);
    content: '';
}

Die Buttons und die Menuleiste verändern sich dann so:

  • Zuletzt geändert: 26. April 2016, 15:17 von Ruth

  • Ruth
  • [*]
Antw.: Buttons mit Icons (Main Menu)
Antwort #1
Meine Grafik für den Home-Button ist aber etwas größer und wird mit diesem Code nicht voll angezeigt.

Außerdem wollte ich die Buttons aus Platzgründen alle etwas kürzer haben und sehr verschieden große Icons verwenden, die mal mehr oben, mal mehr unten auf den Buttons sitzen sollen. Mein Code sieht deshalb so aus:

#main_menu {
position: relative;
}
#main_menu .listlevel1>a:before {
        margin: 0;
        position: relative;
        bottom: 8px;
        display: inline-block;
        z-index: 5;
        right: 3px;
        float: left;
        margin-left: -2px;
        margin-bottom: -3px;
}

Und für die einzelnen Buttons dann beispielsweise so:
#button_home a:before {
        background-repeat: no-repeat;
        background-image: url(.../themes/mein theme/images/theme/home.gif);
        width: 32px;
        height: 32px;
        top: -9px;
        content: '';
}

#button_mentions a:before {
        background-repeat: no-repeat;
        background-image: url(.../themes/mein theme/images/theme/like.gif);
        width: 30px;
        height: 49px;
        top: -20px;
        content: '';
}

Das schaut dann ungefähr so aus.

Die Höhe, auf der die Buttons liegen, ist sehr unterschiedlich, wenn man ein- oder ausgeloggt ist. Das gefällt mir nicht, liegt aber wohl nur an den sehr großen Grafiken, die ich verwendet habe und daran, dass sie verschieden groß sind.


  • Ruth
  • [*]
Antw.: Buttons mit Icons (Main Menu)
Antwort #2
Damit der Profilbutton ähnlich wie wie die anderen Buttons in der Menüleiste wirkt, habe ich hier noch diese Änderungen vorgenommen:

.listlevel1#button_profile img {
       max-width: 2.3em;
       max-height: 2.3em;
       margin: 0;
       margin-right: 0.4em;
       position: relative;
       float: left;
       top: -7px;
       left: -2px;
}

  • Jorin
  • [*][*][*]
  • Administrator
Antw.: Buttons mit Icons (Main Menu)
Antwort #3
Herzlichen Dank für diese Anleitung!  :)

  • Ruth
  • [*]
Antw.: Buttons mit Icons (Main Menu)
Antwort #4
Gern geschehen.

Meine User sind diese Smileys gewöhnt, die wir immer auf den Buttons hatten, deshalb habe ich sie hier auch wieder verwendet. Besser und weniger aufwändig wären sicherlich gleichgroße Icons. Ich werde mal noch eine Variante damit ausprobieren.

Ich habe übrigens gerade festgestellt, dass mit diesem Code die Icons auf den Buttons automatisch übernommen werden, wenn man das Forum im Browser so massiv vergrößert, dass es auf die mobile Ansicht umspringt.

Das schaut bei mir dann gegenwärtig so aus.  ;D

  • Zuletzt geändert: 26. April 2016, 08:33 von Ruth

  • Ruth
  • [*]
Antw.: Buttons mit Icons (Main Menu)
Antwort #5
Mit gleich großen Icons wären die Rahmen um die Grafiken vermutlich alle gleich groß und stünden hübsch in einer Reihe. Das würde natürlich deutlich besser aussehen.

Übergangsweise könnte ich hier statt dunkelgrau transparent als Farbe nehmen.
@media screen and (max-width: 50em)
[data-icon]:before {
    font-family: 'FontAwesome';
    border: 3px solid #666;

Es würde dann so aussehen:
  • Zuletzt geändert: 26. April 2016, 00:06 von Ruth

  • Jorin
  • [*][*][*]
  • Administrator
Antw.: Buttons mit Icons (Main Menu)
Antwort #6
Ist ja witzig. Wie gewollt!  :D

Ich würde die Smiley-Buttons aber nicht ohne Rahmen darstellen. Irgendwie muss man ja auf die Idee kommen, da drauf klicken zu können.

  • Ruth
  • [*]
Antw.: Buttons mit Icons (Main Menu)
Antwort #7
Nee...aber für so ein "Zufallsergebnis" wäre das erstmal okay.  ;) Ich glaube nicht, dass einer unserer User mit dem Handy ins Forum kommt. Ich selber besitze gar keines und könnte das nicht überprüfen, wie das Forum da aussehen würde.

Anders ist es im Meerschweinchenforum. Da gehen wohl etliche der Mädels regelmäßig mit dem Handy ins Netz. Da wäre also eine saubere Mobil-Ansicht von Vorteil.

Bestimmt lassen sich für die Mobil-Ansicht zusätzlich andere Grafiken ins Mainmenu einbauen; ich möchte das noch ausprobieren, wie das funktioniert, wenn man von FontAwesome wieder zurück zu "Bildchen" für die Gestaltung geht.

Jedenfalls finde ich ich es sehr praktisch, dass der Code offenkundig auch für die Mobil-Ansicht greift. Mit gleichgroßen und "quadratischen" Icons auf den regulären Buttons hätte man dann gleich eine individuelle Gestaltung für die mobile Version. Fürs Meerschweinchenforum werde ich das so mal ausprobieren.

  • Jorin
  • [*][*][*]
  • Administrator
Antw.: Buttons mit Icons (Main Menu)
Antwort #8
Ich glaube nicht, dass einer unserer User mit dem Handy ins Forum kommt. Ich selber besitze gar keines und könnte das nicht überprüfen, wie das Forum da aussehen würde.

Das kannst du ganz einfach simulieren, indem du dein Browserfenster am PC in der Seite kleiner ziehst. Irgendwann findet dann der Wechsel zur mobilen Ansicht statt, wenn das Fenster immer schmaler wird. Probier es mal aus.  ;)

  • Ruth
  • [*]
Antw.: Buttons mit Icons (Main Menu)
Antwort #9
Danke, Jorin. Das habe ich probiert. Ist das dann haargenau so wie auf einem Handy?
Ich kann mir das gar nicht vorstellen, mit so einem Ding ins Forum zu gehen. Völlig ungemütlich. ;)

Hab vorhin oben meinen ersten Beitrag noch editiert. Mit gleichgroßen Icons geht es auch mit weniger Code; so wie es jetzt oben drinsteht. (Die Zeile mit dem Content muß aber bei den einzelnen Buttons weiterhin mit drinstehen. Würde man sie in die erste Anweisung mit hineinschreiben, dann würde entweder der Profilbutton zu lang oder der Upshrinkbutton zu hoch werden.)

Ich hab für mich gerade eine Lösung gefunden, wie es auch mit unterschiedlich großen Grafiken funktioniert, ohne dass die Dropdowns verrutschen, weil die Buttons eine andere Position bekommen.  Dann kann ich die "subsection indicators" wieder anknipsen.

Das sollte dann auch in der Mobil-Ansicht besser aussehen. Muß da noch etwas herumprobieren.

  • Jorin
  • [*][*][*]
  • Administrator
Antw.: Buttons mit Icons (Main Menu)
Antwort #10
Danke, Jorin. Das habe ich probiert. Ist das dann haargenau so wie auf einem Handy?
Ich kann mir das gar nicht vorstellen, mit so einem Ding ins Forum zu gehen. Völlig ungemütlich. ;)


Ja, genau so schaut das dann auf dem Handy aus. Man gewöhnt sich an alles.  ;)

  • Ruth
  • [*]
Antw.: Buttons mit Icons (Main Menu)
Antwort #11
So...nun hab ich eine ganz gute Lösung für verschieden große Grafiken, die auf unterschiedlichen Höhen erscheinen sollen, gefunden.

Sie sind wieder genau an der gewünschten Stelle auf den Buttons, aber es ist nicht mehr soviel Code nötig wie zuvor. Der Raum unterhalb der Buttons ist nun nicht mehr verbreitert und die Dropdowns sitzen wieder genau in der richtigen Höhe.

Damit das möglich war und auch die Mobil-Ansicht ordentlicher erscheint, müssen alle Grafiken zumindest die gleiche Höhe haben.

Ich habe deshalb jede Grafik, die weniger hoch als meine höchste Grafik ist, auf einen 49 Pixel hohen transparenten Untergrund gesetzt. Je nach der Höhe der Grafik und wo sie später genau auf dem Button erscheinen soll, sitzt sie mal niedriger und mal höher auf diesem Untergrund. Damit die Buttons nicht breiter als nötig werden, habe ich den transparenten Hintergrund seitlich jeweils entsprechend beschnitten.

Mein Code sieht jetzt so aus:

#main_menu {
position: relative;
}
#main_menu .listlevel1>a:before {
    margin: 0;
    position: relative;
    background-repeat: no-repeat;
    bottom: 8px;
    display: inline-block;
    z-index: 5;
    right: 3px;
    float: left;
    margin-left: -3px;
    margin-bottom: -20px;
    top: -20px;
    height: 50px;
}

Für die einzelnen Buttons ist jetzt nur noch jeweils eine Anweisung für die Breite nötig, also z.B. so:

#button_admin a:before {
background-image: url(../images/theme/admin.gif);
width: 39px;
content: '';
}

#button_mentions a:before {
background-image: url(../images/theme/like.gif);
width: 30px;
content: '';
}

Wären alle Grafiken auf einem Hintergrund, der die gleiche Breite hätte, dann wären auch die Buttons in der Mobil-Ansicht gleich breit. Das hätte aber mit unterschiedlich breiten Grafiken nicht gut ausgesehen; es wäre auch nicht genügend Platz dafür in der regulären Ansicht vorhanden.

Bin stolz wie ein König, dass ich das mit den Buttons geschafft habe. ;) Das war knifflig und aufwändig.

  • Jorin
  • [*][*][*]
  • Administrator
Antw.: Buttons mit Icons (Main Menu)
Antwort #12
Schaut ja süß aus!  :)