Hallo Leser)

In diesem Artikel befassen wir uns mit dem Einfügen sozialer Symbole auf Ihrer Joomla-Website.

Damit der Benutzer Ihren Artikel oder einen Link zur Website über soziale Netzwerke teilen kann, werden soziale Symbole benötigt.

Gehen wir zunächst zur Website share42.com/ru.

Auf dieser Website können Sie ein Skript erstellen und Aussehen Symbole

Schritt 1 – Wählen Sie die Größe und markieren Sie die gewünschten Symbole:

Wählen Sie die Symbolgröße (32x32, 24x24, 16x16 Pixel). Der Standardwert ist 32x32 Pixel.

Wir wählen die Netzwerke aus, die wir benötigen (klicken Sie einfach auf die Symbole, Sie können per Drag & Drop die gewünschte Reihenfolge festlegen)

Schritt 2 – Einrichtung:

• Wählen Sie den Paneltyp mit Symbolen aus: horizontal, vertikal (schwebend);
• Begrenzen Sie die Anzahl der sichtbaren Symbole (verfügbar bei Auswahl des Typs – vertikal);
• Site-Kodierung, für Joomla ist es UTF-8;
• Fügen Sie ein Share42-Site-Symbol hinzu oder nicht (nach Ihrem Ermessen);
• Link zu RSS, verfügbar, wenn das RSS-Symbol zuvor markiert wurde;
• JQuery aktivieren, für den Veröffentlichungszähler festlegen;
• Nach diesen Schritten können wir uns ein Beispiel ansehen, wie unser Symbolblock aussehen wird, und das fertige Skript herunterladen.

Die nächsten Schritte bestehen darin, das Skript auf Ihrer Website zu installieren.

Nachdem Sie das Archiv mit dem Skript heruntergeladen haben, müssen Sie den Ordner „share42“ im Stammverzeichnis der Site entpacken.

Wählen Sie in Punkt Nr. 4 – „Wählen Sie den am besten geeigneten Site-Typ aus“ „Jede Site“ aus.

Kopieren Sie nun den Code:

Geben Sie anstelle von site.name die Domain Ihrer Site an. Und fügen Sie es in den Quellcode der Vorlage oder in ein Modul vom Typ „HTML“ ein.

Um das Icon-Panel zu gestalten, verwenden wir den vorgeschlagenen CSS-Code:

#share42 (Padding: 6px 6px 0; Hintergrund: #FFF; Rand: 1px durchgezogen #E9E9E9; Randradius: 4px;)

#share42:hover (Hintergrund: #F6F6F6; Rand: 1 Pixel durchgehend #D4D4D4; Boxschatten: 0 0 5 Pixel #DDD;)

#share42 a (Deckkraft: 0,5)

#share42:bewegen Sie a (Deckkraft: 0,7)

#share42 a:hover (Deckkraft: 1)

Wir fügen es in jede CSS-Datei auf Ihrer Website ein.

Zusätzliche Einstellungen zum Konfigurieren:

Parameter	Beschreibung	Anwendungsbeispiel
	Seitentitel
Datenbeschreibung	Beschreibung für die Seite
	Pfad zum Ordner mit der Datei „icons.png“.
Vertikale Panel-Optionen
	Abstand vom Seitenanfang bis zum Panel in Pixel
	Abstand vom oberen Rand des sichtbaren Bereichs der Seite zum Panel in Pixel
	horizontaler Versatz des Panels in Pixel (negativer Wert – nach links, positiver Wert – nach rechts)

So sollte es aussehen:

Das ist alles, viel Glück)

P.S. Wenn etwas nicht klar ist, schreiben Sie Kommentare.

Dieses Tutorial zeigt Ihnen, wie Sie Bilder anstelle von Text für Menüelemente in Joomla verwenden.

Es gibt mehrere Möglichkeiten, dem Menü Symbole hinzuzufügen:

Hinzufügen von Bildern zu Menüs mithilfe des Menü-Managers

Mit dem Standard-Joomla-Modul zum Arbeiten mit Menüs können Sie die Namen von Menüelementen durch Bilder ersetzen:

Bilder mit CSS-Code hinzufügen

Die zweite Methode basiert auf dem Hinzufügen der Bild-CSS-Klasse zur Datei (wobei ### die Nummer Ihrer Vorlage ist). Bei einigen Menümodulen für Joomla, z. B. dem IceMegaMenu-Modul, können Sie kein Bild für einen Menüpunkt im Admin-Bereich hinzufügen. Sie können ein Bild mithilfe von CSS-Code hinzufügen:

Hintergrundbild im CSS-Code verwenden:

Verwenden von FontAwesome-Symbolen:

Erkunden Sie Ihre Website mit dem Developer Tool, um eine benutzerdefinierte CSS-Klasse zu finden.

Nehmen Sie Änderungen an der Datei templates/theme###/css/templates.css vor (wobei ### Ihre Vorlagennummer ist).

Der CSS-Code, den Sie der Datei hinzufügen müssen, sieht normalerweise so aus:

#iceMenu_101 .iceMenuTitle:before ( Schriftfamilie: FontAwesome !important; Inhalt: „###“ !important; Schriftgröße: 45px !important; oben: 20px !important; Position: relativ !important; Anzeige: Inline-Block !important; Zeilenhöhe: 45px !important; ) #iceMenu_101 .iceMenuTitle ( Schriftart:0/0 a !important; )

Wobei ### die FontAwesome-Symbolklasse ist. Eine Liste der verfügbaren Symbole finden Sie auf der FontAwesome-Website.

Überprüfen Sie Ihre Website, um Änderungen zu sehen.

Jetzt wissen Sie, wie Sie in Joomla-Menüelementen Bilder anstelle von Text verwenden.

Favicon ist eine Art Site-Symbol. Es ist in den Browser-Registerkarten zu sehen. Hier ist ein Beispiel für vier beliebte Websites. Jeder von ihnen hat sein eigenes Favicon-Bild.

Außerdem zeigt die Yandex-Suchmaschine neben dem Seitentitel ein Favicon an.

Die überwiegende Mehrheit der Websites verfügt über ein Favicon; es hilft, sich von anderen Ressourcen abzuheben und die Website besser erkennbar zu machen. Mit einem Favicon können Sie Ihre Positionen in Yandex einfacher verfolgen.

Erstellen eines Favicons mit einem Online-Generator

Zunächst müssen Sie ein Bild mit den Maßen 16 x 16 Pixel vorbereiten. Das Standardgröße Favicon. Dazu können Sie das Site-Logo oder Ihr Lieblingsbild verwenden. Um die gewünschte Größe anzupassen, können Sie das Programm „Paint“ oder ein anderes Programm eines Drittanbieters verwenden.

Bitte beachten Sie dies bei der Komprimierung des Bildes auf 16 x 16 Pixel. Die Abmessungen der Seiten des Originals müssen gleich sein. Sagen wir 243 x 243 Pixel. Andernfalls wird das ohnehin kleine Bild beim Komprimieren unscharf.

Als nächstes verwenden wir den Online-Favicon-Generator. Indem Sie diesem Link folgen favicon.ru Auf der Hauptseite im Punkt „Favicon aus einem Bild erstellen“. Wählen Sie auf Ihrem Computer ein vorbereitetes Bild mit den Maßen 16 x 16 Pixel aus.

Der nächste Schritt ist „Bild bearbeiten“. Hier klicken wir auf „Proportionen speichern“ und „Weiter“.

Jetzt ist unser Favicon fertig. Jetzt müssen Sie nur noch sehen, wie es im Browser aussieht, und es herunterladen. Sie können das Bild auch bearbeiten, wenn Sie möchten. Oder erstellen Sie es von Grund auf.

Das heruntergeladene Favicon hat das erforderliche Format (.ico) und den Favicon-Namen. Es besteht keine Notwendigkeit, etwas zu ändern. Es bleibt nur noch die Installation auf der Website.

Favicon auf Joomla 3 installieren

Die erste und einfachere Installationsmethode besteht darin, das native Favicon zu ersetzen. Die meisten Joomla-Vorlagen verfügen bereits über ein Favicon. Sie müssen es nur in das von uns vorbereitete Favicon ändern.

Dazu müssen Sie zum Stammverzeichnis der Site gehen. Gehen Sie als Nächstes zum Ordner „Vorlagen“ und suchen Sie den Ordner mit der Standardvorlage. Ich habe diese native Vorlage „Beez3“ und ändere das Favicon dort durch das von uns erstellte.

Gehen Sie dann auf Ihre Website und aktualisieren Sie sie Homepage. Wenn sich das Favicon nicht geändert hat, leeren Sie den Cache Ihres Browsers, schließen Sie ihn und öffnen Sie ihn erneut, indem Sie die Seitenadresse erneut eingeben. Das Symbol sollte sich ändern.

Sie sollten jedoch nicht sofort auf das Favicon in den Yandex-Suchergebnissen warten. Es erscheint, nachdem ein spezieller Bot Ihr Bild indiziert und in das JPG-Format konvertiert. Dies kann mehr als einen Monat dauern.

Sie können überprüfen, ob Yandex Ihr Favicon indiziert hat oder nicht, indem Sie in Ihren Browser Folgendes eingeben: http://favicon.yandex..ru und den Domainnamen Ihrer Website eingeben.

Für Google: http://www.google.com/s2/favicons?domain=site

Wenn die erste Installationsmethode nicht geholfen hat und das Favicon nicht auf Ihrer Website angezeigt wurde, können Sie es installieren, indem Sie den erforderlichen Code in die Datei index.php schreiben.

Die zweite Möglichkeit, Favicon auf Joomla 3 zu installieren

Um ein Bild zu installieren, müssen Sie das von uns vorbereitete Favicon im Stammverzeichnis der Site platzieren.

Gehen Sie als Nächstes in den Ordner mit der Standardvorlage: templates / default template. Suchen und öffnen Sie die Datei index.php mit Notepad++. Geben Sie in diesem Dokument zwischen dem öffnenden Tag und dem schließenden Tag den folgenden Code ein:

Es bleibt nur noch, den Browser-Cache zu leeren und die Seite neu zu laden. Danach sollte das Favicon auf Ihrer Website erscheinen.

Vom Autor: Grüße, liebe Leser. In diesem Artikel sprechen wir mit Ihnen über ein kleines, aber gleichzeitig nützliches Detail jeder guten Website, ein Symbol für CMS Joomla – Favicon. Sie erfahren, wie Sie einer Website ein Favicon hinzufügen und ein vorhandenes ändern.

Für diejenigen, die es nicht wissen: Ein Favicon ist ein kleines Symbol (Icon) einer Website, das von einem Webbrowser im Tab unmittelbar vor dem Titel der Website, genauer gesagt vor dem Inhalt des Titel-Tags, angezeigt wird. Das heißt, im Großen und Ganzen handelt es sich um ein Bild eines bestimmten Formats und einer bestimmten Größe mit der Erweiterung ico.

Gleichzeitig stimmen Sie zu, dass ein richtig ausgewähltes Favicon der Site Einzigartigkeit und Einzigartigkeit verleiht und den Benutzern auch schnell in Erinnerung bleibt. Suchmaschinen Beim Erstellen einer Suchergebnisliste (Suchergebnisliste) wird außerdem ein Favicon vor dem Seitentitel angezeigt.

Dies bedeutet, dass das erste, was dem Benutzer ins Auge fällt, genau das Symbol ist – das Site-Symbol. Es lohnt sich also nicht einmal darüber zu sprechen, dass der Benutzer, wenn er einen Freund unter ihnen sieht, ihn dazu drängt, die Site zu besuchen . Daher ist die Frage, wie man das Favicon in Joomla 3 ändert, bei Anfängern sehr beliebt, und im Folgenden werde ich versuchen, eine detaillierte Antwort zu geben.

Um die browserübergreifende Kompatibilität zu gewährleisten, wählen Sie beim Erstellen eines Favicons in der Regel das ICO-Bildformat, da es von absolut allen Browsern unterstützt wird. Obwohl moderne Browser mittlerweile Formate wie PNG und GIF unterstützen, Mozilla Firefox auch JPEG, sowie animiertes GIF. Aber auf die eine oder andere Weise gibt es Benutzer, die es verwenden veraltete Versionen Daher lohnt es sich meiner Meinung nach immer noch, das allgemein akzeptierte ICO zu verwenden.

Nachdem wir uns für das Format entschieden haben, wollen wir die Größe des Bildes ermitteln, das als Site-Symbol verwendet werden kann. Hier ist alles einfach, die Favicon-Größe ist ziemlich „Standard“ und beträgt 16x16 Pixel, wenn Sie maximale browserübergreifende Kompatibilität gewährleisten müssen. Zur gleichen Zeit, für verschiedene mobile Geräte und ihren spezifischen Browsern können Sie Symbolgrößen von 32x32, 96x96 und sogar 192x192 Pixel verwenden.

Lassen Sie uns nun darüber sprechen, wie Sie ein Favicon auf einer Joomla-Website installieren. Da wir aber noch kein Symbol haben, erstellen wir eines. Der bequemste Weg zum Erstellen ist die Verwendung von Online-Generatoren, da Sie sich so die Installation zusätzlicher Generatoren ersparen Software, und in der Regel bieten diese Dienste zusammen mit den erstellten Symbolen an, den Code zu kopieren, der zur Anzeige des Symbols erforderlich ist.

Einer der derzeit beliebtesten Dienste zum Erstellen von Favicon-Symbolen ist der Generator favicon.ru, den wir in diesem Artikel verwenden. Es gibt auch einen ziemlich guten Favicon-Generator-Generator (favicon-generator.org), der statt eines Icons ein ganzes Archiv erstellt, in dem Icons unterschiedlicher Größe generiert werden. Dementsprechend ist für jede Größe auch der Anschlusscode angegeben.

Um ein Favicon zu erstellen, wählen Sie das folgende Bild aus.

Moderne Trends und Ansätze in der Webentwicklung

Lernen Sie den Algorithmus für schnelles Wachstum beim Erstellen von Websites von Grund auf kennen

Nun genügt es, das ausgewählte Bild über ein spezielles Formular hochzuladen und im Großen und Ganzen ist die Generierung abgeschlossen.

Wählen Sie nach dem Laden des Bildes den Interessenbereich aus, aus dem das Symbol erstellt werden soll, und klicken Sie auf „Weiter“.

Nach der Generierung sehen Sie ein Beispiel für die Anzeige eines neuen Favicons im Browser. Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie auf die Schaltfläche „Favicon herunterladen“, um die Datei herunterzuladen. Damit ist das Symbol fertig.

Favicon in Joomla – befindet sich im Stammverzeichnis des aktiven Vorlagenverzeichnisses. Für die Beez3-Vorlage lautet dieser Ordner beispielsweise templates\beez3. Das bedeutet, dass Sie lediglich die heruntergeladene Datei im angegebenen Ordner ablegen, dadurch das Standardsymbol ersetzen und die Informationen im Browser aktualisieren müssen. Der Code, der das Favicon im Browser anzeigt, wird direkt von der Joomla-Engine generiert, sodass Sie ihn nicht manuell schreiben müssen. Für Interessierte möchte ich klarstellen, dass dieser Code unter \libraries\joomla\document\html in der Datei html.php generiert wird. Um ein Symbol anzuzeigen, stellt der Joomla-Kern eine spezielle Methode namens addFavicon() zur Verfügung, die in der obigen Datei aufgerufen wird.

Jetzt wissen Sie, wie man das Favicon in Joomla 3 ändert. Das einzige, was ich sozusagen für die allgemeine Entwicklung möchte, ist, den Code zum Anzeigen des Symbols bereitzustellen – für den Fall, dass Sie ihn manuell schreiben müssen.