Kategorien
Allgemein

Lasst uns verschlüsseln! Let’s Encrypt Zertifikate für dein Webhosting!

Im Dezember 2015 startete die öffentliche Beta Phase der Let’s Encrypt Zertifizierungsstelle. Wir von NOVATREND gehörten von Anfang an zu den Hauptsponsoren. Let’s encrypt (engl. Lasst uns verschlüsseln) ist eine freie und offene Zertifizierungsstelle die kostenlose X.509-Zertifikate anbietet.

Wenn du ein Webhosting bei uns betreibst, kannst du diese Zertifikate einfach einrichten. In diesem Blogeintrag zeige ich wie es geht. Da die Hauptseite bereits ein Zertifikat besitzt, erzeuge ich eine Subdomain (Unterdomäne) auf dem seafolly.ch Webhosting und ein Zertifikat. Danach ist der Webtraffic der Seite verschlüsselt über https:// erreichbar.

Zertifikatsanzeige im Browser
Zertifikatsanzeige im Browser

Unterdomäne erzeugen

Ich melde mich im Kundenbereich an und klicke auf das cPanel-Administrations-Icon.

Produkte & Services
Produkte & Services

In cPanel klicke ich auf den Link Unterdomänen.

cPanel Domänen
cPanel Domänen

Dort lege ich die Unterdomain beispiel.seafolly.ch an.

Unterdomain erstellen
Unterdomain erstellen

Zertifikat erzeugen

Um das Zertifikat zu erzeugen und zuzuordnen, klicke ich im cPanel Bereich Sicherheit auf den Link Let’s encrypt for cPanel.

cPanel Sicherheit
cPanel Sicherheit

Die folgende Seite zeigt alle Domänen, für die bereits ein Zertifikat ausgegeben wurde und darunter alle Domänen für die ein neues Zertifikat ausgestellt werden kann. Um ein Zertifikat für die Domain beispiel.seafolly.ch auszustellen, klicke ich auf den Link +issue (engl. ausstellen).

Domain auswählen
Domain auswählen

Zertifikate gelten normalerweise nur für die ausgewählte Domain. Meistens möchte man jedoch den Domain Namen, beispielsweise seafolly.ch und die Subdomain www.seafolly.ch in einem Zertifikat bündeln. Das ist möglich und im nächsten Schritt wird gefragt ob die www. Variante der Domain auch mit in das Zertifikat aufgenommen werden soll. Außerdem können auch E-Mail Zertifikate ausgestellt werden.

Zertifikat installieren
Zertifikat installieren

Nach einen Klick auf den Issue Button wird das Zertifikat erzeugt und der Webserver automatisch neu gestartet.

Hinweis: Im folgenden Screenshot wird als Webserver Apache erwähnt. Auf allen Webhostings nutzen wir aus Performance Gründen den LiteSpeed Server, siehe auch Schnellere Antwortzeiten mit dem LiteSpeed Webserver und WordPress + PHP7 + LiteSpeed Cache = Richtig Schnell!.

Hinweis: Falls eine Fehlermeldung erscheint, hat sie meistens damit zu tun, dass die gewünschte Domain nicht oder noch nicht auf die IP-Adresse des Servers zeigt.

Zertifikat wurde installiert
Zertifikat wurde installiert

Website mit Zertifikat

Wenn ich nun https://beispiel.seafolly.ch im Browser aufrufe, sehe ich das Zertifikat und kann verschlüsselt auf die Site zugreifen.

Zertifikat im Browser
Zertifikat im Browser

Das Zertifikat wird automatisch verlängert und ich muss mich nicht darum kümmern.

Links


tl;dr: Lasst uns verschlüsseln!

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

Kategorien
Content Management Systeme Services Site Builder Webdesign

Ein Online Shop mit dem NOVATREND Site Builder

Der NOVATREND Site Builder bietet eine einfache Art der Erstellung von Websites. Im diesem Artikel habe ich den Site Builder bereits vorgestellt und die ersten Schritte beschrieben. Heute will ich zeigen, wie du deinen Online Shop konfigurieren kannst.

Shop einrichten

In der Administrationsoberfläche des Site Builders befindet sich in der linken Icon Leiste ein kleiner Warenkorb. Beim ersten Klick auf dieses Warenkorb Icon startet ein Dialog, in dem die wichtigsten Parameter abgefragt werden. Im ersten Schritt sind das der Name des Shops und die dazu gehörige E-Mail Adresse.

NOVATREND Site Builder - Shop einrichten
NOVATREND Site Builder – Shop einrichten

Zahlungsmethode

Im zweiten Schritt muss die Zahlungsmethode ausgewählt werden. Zur Auswahl stehen Stripe, PayPal und die Banküberweisung. Stripe ist ein relativ neuer Service, der in 25 Ländern angeboten wird. Er ermöglicht unter anderem Zahlungen per Kreditkarte und wiederkehrende, regelmäßige Zahlungen. PayPal und die klassische Banküberweisung kennst du vermutlich. In der Schweiz befindet sich Stripe momentan in einer privaten Betaphase.

NOVATREND Site Builder - Zahlungsmethode einrichten
NOVATREND Site Builder – Zahlungsmethode einrichten

Der folgende Screenshot zeigt die Stripe Konfigurationsmaske für Deutschland. Du gibst deine Firmeninformationen und deine Bankverbindung ein, den Rest erledigt Stripe!

Stripe - Nutzerdaten
Stripe – Nutzerdaten

In PayPal ist der Verbindungsaufbau ähnlich, ein existierender PayPal Account muss mit dem Site Builder verbunden werden.

PayPal Anbindung
PayPal Anbindung

Bei der Ersteinrichtung im Dialog kannst du nur eine Zahlungsmethode auswählen. Später kannst du weitere Zahlungsmethoden hinzufügen.

Versandkosten

Im nächsten Schritte kannst du beliebig viele Versandkosten konfigurieren. Die Kosten können abhängig vom Gewicht der Ware sein.

Versandkosten einrichten
Versandkosten einrichten

Shop Online stellen

Nach der Einrichtung der Zahlungsmethode und der Versandkosten kannst du deinen Shop bereits Online stellen und dann den Button Finish and manage products klicken.

Online / Offline
Online / Offline

Produkte anlegen

Bisher gibt es noch keine Produkte, also lege ich eins an. Du musst einen Titel, einen Beschreibungstext, beliebig viele Bilder, einen Preis und das Gewicht eingeben.

NOVATREND Site Builder - Produkt anlegen
NOVATREND Site Builder – Produkt anlegen

Nach dem Speichern musst du eine Kategorie zuordnen, die du im Dialog erstellen kannst. Eventuelle Produktvarianten kannst du ebenfalls festlegen. In meinem Fall biete ich Sand von unterschiedlichen Stränden an, normalerweise betrifft das eher Farbe und Grösse eines Kleidungsstücks oder eines anderen Produkts.

NOVATREND Site Builder - Produktvarianten
NOVATREND Site Builder – Produktvarianten

Shop auf der Website einbauen

Der Shop könnte nun beispielsweise im Menü verlinkt werden und/oder über einen Button aufrufbar sein. Ich nutze mein bereits existierendes Beispiel und verlinke den Button auf der Startseite. Dazu klicke ich erst auf Site und dann auf den Button. In der Seitenleiste erscheinen die Konfigurationsmöglichkeiten. Dort ordnest du dem Button einen Internal Link mit dem Ziel Store zu. Danach musst du die Site speichern und veröffentlichen.

Shop Link mit Button verbinden
Shop Link mit Button verbinden

Sand kaufen!

Nach dieser kurzen Konfiguration erscheint das Produkt nach einem Klick auf den Button und jeder kann es kaufen!
Die Variante Strand La Franqui ist voreingestellt.

Sand kaufen
Sand kaufen

Aufträge verwalten

Für den laufenden Betrieb des Shops gibt es eine Auftragsverwaltung und ein Analytics Modul, das die Zugriffe protokolliert und visualisiert. Steuern, Währungen und Maßeinheiten lassen sich in den Einstellungen konfigurieren. Du kannst Kommentare für individuelle Produkte zu den Bestellungen erlauben und auch beispielsweise Artikelnummern automatisch erzeugen lassen.

Fazit

Mit dem Site Builder lässt sich in kürzester Zeit ein Online Shop einrichten. Die Bedienung ist sehr intuitiv, komfortabel und, wenn möglich, in Dialogen organisiert.

Links


tl;dr: Jeder kann einen Online Shop mit dem NOVATREND Site Builder erstellen.

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

Kategorien
Allgemein News

NOVATREND gehört nun auch zum TWINT-Netzwerk

Letzten Sonntag beim Bäcker im Dorf an der Kasse: „Hier können Sie neu auch mit TWINT bezahlen.“ Die mobile Zahlungs-App ist auf dem Vormarsch und vereinfacht uns den täglichen Einkauf zusehends. Mit jedem neuen Händler und jeder beteiligten Schweizer Bank, die dem TWINT-Netzwerk beitritt, wird das Bezahlen für die Nutzer stets unkomplizierter und attraktiver.

Wir von NOVATREND teilen mit TWINT das Ziel, unseren Kunden das Leben vereinfachen zu wollen. Und deshalb freuen wir uns, dir seit Kurzem ebenfalls die Vorteile des Schweizer Mobile-Payments bieten zu können: Neu kannst du unseren Service auch mit TWINT bezahlen.

Dafür erhältst du beim Auschecken aus unserem Onlineshop die Möglichkeit, die Zahlungsart «TWINT» auszuwählen. Anschliessend wird dir ein QR-Code und ein sechsstelliger Code angezeigt. Einfach mit deinem Smartphone den QR-Code scannen oder den separaten Code eingeben und schon hast du die Zahlung bequem mit deinem digitalen Portemonnaie erledigt.

Die Einbindung von TWINT in unser Bezahlsystem hat für dich folgende Vorteile:

  • Du profitierst bei jeder Neubestellung eines Hosting Accounts von einem exklusiven CHF 20-Rabatt (Gutscheincode: TWINT20).

  • Du bezahlst keinerlei Übertragungs- oder Bankengebühren.

  • Du begleichst unsere Rechnungen in Zukunft einfach und schnell per Smartphone.

Als innovativer Hosting-Anbieter integrieren wir als einer der Ersten das mobile Bezahlen in unseren Kundenservice. Damit du neben deinem täglich Brot und dem Online-Shopping auch dein Hosting und unsere weiteren Services mit TWINT bezahlen kannst.

Kategorien
Content Management Systeme Webdesign

CKEditor in Drupal 8 benutzerfreundlich gestalten – Teil 1

Wenn du einmal mit WordPress gearbeitet hast und dann wieder den Standard Editor (CKEditor) in Drupal 8 siehst, dann wünscht du dir schon die eine oder andere Verbesserung.

In diesem Artikel stelle ich ein paar Module vor, die die Funktionalität des Editors zumindest an WordPress annähern. Fairerweise muss ich sagen, dass der CKEditor komplett konfigurierbar ist und mit viel Zeit und Liebe atemberaubende Sachen möglich sind, die wiederum bei WordPress nicht so ohne weiteres funktionieren. Da Zeit und Liebe allerdings extrem knappe Ressourcen bei der Webentwicklung sind, hier ein paar Tipps zum Link Dialog.

In einem weiteren Blogeintrag werde ich dann zum Thema Einfügen und Verwalten von Bildern ein paar Module vorstellen, aber zunächst zu den Links.

CKEditor

Der CKEditor ist ein WYSIWYG Editor, der im Drupal Core enthalten ist. In Drupal gibt es unterschiedliche Eingabeformate, die du unterschiedlichen Benutzerrollen zuordnen kannst. Die Autoren benötigen beispielsweise mehr Funktionalität als die Besucher, die einen Kommentar schreiben. Manche Benutzerrollen benötigen einen WYSIWYG Editor, manche nicht. Standardmässig kommt Drupal mit vier Formaten, von denen zwei den CKEditor (Basic HTML, Full HTML) enthalten.

Drupal 8 - CKEditor mit Basic HTML Format
Drupal 8 – CKEditor mit Basic HTML Format
Drupal 8 - CKEditor - Format Full HTML
Drupal 8 – CKEditor mit Full HTML Format

Bei der Konfiguration des Formats werden die für den Benutzer nutzbaren Icons dem jeweiligen Format per Drag and Drop zugeordnet (/admin/config/content/formats).

CKEditor Toolbar Konfiguration
CKEditor Toolbar Konfiguration

Zusätzliche Module können die Funktionalität, die hinter einem Icon steckt, ändern oder auch neue Funktionen zur Verfügung stellen.

Links setzen

Um einen Link zu setzen, schreibst du normalerweise einen Text, markierst die Worte, die verlinkt werden sollen und klickst auf das Link Icon. Bei WordPress erscheint dann im Text ein Feld, in dem du deinen Link eintragen kannst und nach einem Klick auf das Zahnrad daneben ein erweitertes Link einfügen/ändern Fenster, in dem du auch auf bestehende Inhalte verlinken kannst.

WordPress - Link Dialog
WordPress – Link Dialog

Wenn man das WordPress System ein paar mal genutzt hat, kann man sich das gar nicht mehr anders vorstellen :).
Der Standard Drupal Dialog sieht so aus, dass du nur manuell eine URL eingeben kannst.

Drupal 8 - CKEditor Link Dialog
Drupal 8 – CKEditor Link Dialog

Drei Module erweitern diesen Dialog

CKEditor Entity Link

Lade und installiere das Modul und füge einem Eingabeformat das entsprechende Icon hinzu (admin/config/content/formats).

Entity Link Icon
Entity Link Icon

Drupal besteht aus Entitäten (Content, Comments, Users, Files, …). Dem Entity Link Modul muss gesagt werden, welche Entitäten verlinkbar sein sollen (admin/config/content/ckeditor_link).

CKEditor Entity Link settings
CKEditor Entity Link settings

Wenn du nun etwas verlinken willst, musst du den Entity Typ angeben und kannst dann aus bestehenden Entitäten auswählen.

Entity Link hinzufügen
Entity Link hinzufügen

Das ist schon mal super, aber:

  • Der Nutzer weiss normalerweise nicht, was eine Entität ist
  • Es gibt zwei Icons für Links und das führt zur Verwirrung

Das Modul eignet sich also eher für Spezialfälle.

Linkit

Das Linkit Modul macht es in dieser Hinsicht besser, denn es erweitert das bestehende Link Icon um die erwartete Funktionalität. Die durchsuchbaren Entitäten werden in einem eigenen Profil verwaltet. Das Standard Profil durchsucht erstmal alles (admin/config/content/linkit). Im Eingabeformat muss Linkit aktiviert werden und das Linkit Profil ausgewählt werden. (config/content/formats/manage/basic_html).

Linkit Konfiguration
Linkit Konfiguration

Nun gibt es nur noch ein Link Icon im Editor und der Dialog sieht auch gut aus.

Linkit Dialog
Linkit Dialog

Jetzt fehlen noch erweiterte Parameter …

Editor Advanced Links

Dieses Modul erweitert den Link Dialog um weitere Funktionen. Es arbeitet in der englischen Sprachversion problemlos mit Linkit zusammen, in der deutschen Version scheinen noch Übersetzungen zu fehlen.

Damit es funktioniert, muss im gewünschten Eingabeformat der Filter Limit allowed HTML tags and correct faulty HTML aktiviert sein. In den erlaubten Tags müssen die Tags <title>, <class>, <id>, <target> und/oder <rel> hinzugefügt werden.

Advanced Link Konfiguration
Advanced Link Konfiguration

Der Link Dialog bietet nun eine Möglichkeit auf vorhandene Artikel zu verlinken und hat auch einige Zusatzfunktionen.

Advanced Link Dialog
Advanced Link Dialog

Fazit

Auch wenn es zugegebenermaßen eine Herausforderung ist, Drupal benutzerfreundlich zu gestalten, es ist möglich 😉


tl;dr: In Drupal 8 lässt sich der Editor benutzerfreundlich gestalten.

 

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

Kategorien
Content Management Systeme Webdesign

Eine Erweiterung für Joomla erstellen

Nach den Artikeln über die Erstellung eines Moduls Drupal 8 und eines Plugins in WordPress 4.6 will ich in diesem Artikel beschreiben, wie man eine Joomla Komponente schreibt. Beim Drupal 8 Modul hatte ich das Tool Drupal Console genutzt, um mir die Erstellung der vielen Dateien zu erleichtern. Bei WordPress habe ich nur die Website, bzw. einen Text Editor genutzt. In beiden Fällen ist die eigentliche Programmierung nicht schwer, Drupal 8 verlangt allerdings erheblich mehr Strukturierung als WordPress und ist daher am Anfang schwerer zu durchschauen.
Joomla liegt hinsichtlich der Komplexität der Erstellung von Erweiterungen etwa in der Mitte zwischen Drupal und WordPress. Es ist mittlerweile sehr gut strukturiert, aber immer noch einfach zu verstehen. Seit der Version 1.5 sind Joomla Komponenten nach dem Model View Controller Konzept aufgebaut. Joomla eignet sich daher sehr gut für die individuelle Entwicklung, weil das MVC Konzept wirklich sehr weit verbreitet und recht einfach zu verstehen ist.

In Drupal heißen alle Erweiterungen Module, in WordPress heißen sie Plugins. In Joomla gibt es drei Sorten von Erweiterungen: Module, Plugins und Komponenten.

  • Module sind die Teile einer Website, die um den eigentlichen Inhalt herum positioniert werden (in Drupal vergleichbar mit Blöcken, in WordPress mit Widgets).
  • Plugins sind Erweiterungen, die keine Ausgabe auf der Website erzeugen. Sie können beispielsweise den Inhalt nach etwas filtern oder einen WYSYWYG Editor bereitstellen.
  • Komponenten sind Erweiterungen die den Hauptinhalt einer Webseite ausgeben. Pro Seitenaufruf kann in Joomla eine Komponente aufgerufen werden.

Über die Jahre sind viele Anleitungen für die Erstellung einer Komponente in all ihren Facetten entstanden. ich möchte hier auf die offizielle Documentation verweisen (Developing an MVC Component/Developing a Basic Component). Um eine „Hello World“ Komponente zu schreiben benötigt man mehrere Dateien, hier ein Beispiel:

  • helloworld.xml Die Beschreibungsdatei im XML Format in der beschrieben ist, wie Joomla diese Kompoente installieren soll.
  • site/helloworld.php Der Eingang (Router) zur eigentlichen Hello World Komponente für die Besucher und registrierten Benutzer.
  • site/index.html Datei für den Webserver um kein Inhaltsverzeichnis anzuzeigen (muss in jedem Joomla Unterverzeichnis liegen).
  • admin/index.html Datei für den Webserver um kein Inhaltsverzeichnis anzuzeigen
  • admin/helloworld.php Der Eingang (Router) zur eigentlichen Hello World Komponente für die Administratoren der Website.
  • admin/sql/index.html Datei für den Webserver um kein Inhaltsverzeichnis anzuzeigen
  • admin/sql/updates/index.html Datei für den Webserver um kein Inhaltsverzeichnis anzuzeigen
  • admin/sql/updates/mysql/index.html Datei für den Webserver um kein Inhaltsverzeichnis anzuzeigen
  • admin/sql/updates/mysql/0.0.1.sql Datei in der die Datenbankbeschreibung der Komponente steht (nicht nötig für das Hello World Beispiel).

Außer diesen waren je nach Anwendungszweck weitere Dateien für die Ausgabe Templates, die Datenbank Modelle, die Controller, die Benutzerberechtigungen, die Update Funktionalität und vieles andere mehr benötigt. Am Ende ist man schnell bei dutzenden Dateien und verliert als Anfänger schon mal die Übersicht.

Daher möchte ich in diesem Artikel den Service component-creator.com benutzen um eine Komponente zu beschreiben und automatisiert erstellen zu lassen.

Component Creator

Der Service component-creator.com bietet die Möglichkeit, eine beliebige Anzahl von einfachen Komponenten kostenlos zu erstellen. Wenn die Aufgaben komplexer werden, musst du für die Nutzung bezahlen. Grundsätzlich geht es bei Joomla Komponenten meistens um Daten, die in einem Formular eingegeben, abgespeichert, verändert, ausgegeben, mit Zugriffsberechtigungen versehen und vielleicht auch wieder gelöscht werden. In Drupal ist das am ehesten mit Inhaltstypen und Views zu vergleichen, in WordPress auch am ehesten mit Post Types. Du musst dich auf der Component Creator Website registrieren und kannst dir dann die gewünschte Komponente zusammenstellen und herunterladen. Der Download enthält alle Dateien einer installierbaren Komponente, die du manuell anpassen kannst.

Beispiel: Ein Sammlung von Open Source Projekten

Ich möchte ein Verzeichnis von Freien und Open Source Projekten anlegen, nenne meine Komponente com_foss und fülle das Formular mit den Daten für die XML Datei aus.

Component creator - Neu Komponente
Component Creator – Neu Komponente

Datenbank Tabelle

Als nächstes fragt der Assistent nach einer Datenbank Tabelle.

Component Creator - Tabelle erstellen
Component Creator – Tabelle erstellen

Ich wähle Tabelle manuell erstellen.

Component Creator - Tabelle beschreiben
Component Creator – Tabelle beschreiben

Joomla bietet verschiedene Arten an, Daten zu speichern. Ich wähle den Standardserver und belasse die Sortierung ebenfalls auf dem Standardwert. Die Checkboxen beziehen sich auf die spätere Darstellung im Frontend und im Administrationsbereich.
Im Zusammenhang mit der Darstellung im Frontend stellt sich beispielsweise die Frage, ob jeder Tabelleneintrag (also ein FOSS Projekt) eine Detailseite haben soll oder nicht. Wenn ja, muss etwas in der Liste verlinkt werden und ich hake im Beispiel die entsprechende Checkbox an. Der Component Creator legt mir nun die von Joomla erwartete Tabellenstruktur an und ich kann sie um beliebig viele Felder erweitern.

Component Creator - Felder in der Tabelle
Component Creator – Felder in der Tabelle
Component Creator - Feld hinzufügen
Component Creator – Feld hinzufügen

In der rechten Seitenleiste erscheint eine Zusammenfassung der Tabelle mit einem Erstellen Button. Ein Klick auf den Button lädt die fertige Komponentenstruktur herunter. Das Dateipaket com_foss-1.0.0.zip besteht aus 15 Dateien und du hast gerade tatsächlich mehrere Stunden an Arbeit gespart :).

Component Creator - Komponente laden
Component Creator – Komponente laden

Installation auf deiner Joomla Site

Du kannst das Dateipaket wie jede andere Erweiterung installieren, hier mein Beispiel zum Download: com_foss-1.0.0.zip.

com_foss-1.0.0.zip installieren
com_foss-1.0.0.zip installieren

Im Administrationsbereich taucht die FOSS Komponente nach der Installation im Menü auf und du kannst Einträge hinzufügen, editieren und wieder löschen.

FOSS Komponente im Administrationsbereich
FOSS Komponente im Administrationsbereich

Auf der Website kannst du die FOSS Liste als Menülink einbinden. Die FOSS Komponente bietet bei der Erstellung des Menülinks drei Arten von Links an. Die Liste der Projekte, ein einzelnes Projekt und ein Formular zur Eingabe neuer Projekte.

Menülink erstellen
Menülink erstellen

Ich wähle die List-Anzeige (FOSS) und auf der Website erscheint im Menü ein neuer Link, der zur Liste führt. Die Liste wiederum enthält verlinkte Projektnamen, die dann zu den Einzeleinträgen führen.

Website mit FOSS Liste
Website mit FOSS Liste

Fazit

Soweit, so einfach. Die Erstellung der Struktur ist einfach und gut dokumentiert. Die weitere Arbeit liegt in den Details und da möchte ich nochmals auf die offizielle Dokumentation verweisen.

Links


tl;dr: Die Struktur einer Joomla Komponente lässt sich hervorragend mit dem Component Creator Service erstellen.

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 7320px; left: 50px;">Save

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save