elemente

Ebay: Auktionen optimieren

12. Mai 2016adminAllerlei, Webdesign10, 50, abhilfe, artikel, beachten, befehl, beim, bild, bildern, Box, breite, dateien, domain, ebay:, editor, eigene, eigenen, einbinden, eine, einem, einen, einstellen, elemente, ende, erst, erste, erstellen, esc, etwa, extern, externe, externen, folgen, font, format, formatierung, gegen, gleichzeitig, gt, gute, hier, hilfe, html, id, ihre, ihrem, ihren, interne, internet, ip, java, kann, kein, keine, kennen, kleine, kunden, liste, mittel, monat, nicht, oder, online, optimieren, option, passt, position, product, program, programm, RAM, regeln, reifen, schicken, schrift, script, sehe, sehen, seite, seiten, setzen, sich, soll, sollte, sollten, sprache, statt, steigern, stellen, style, text, texte, texteditor, tool, umsatz, unter, unterschiedliche, URL, versehen, verwenden, webdesign, webseite, webseiten, wenn, Wenn Sie, werden, width, window, windows

Als Verkäufer bei Ebay sollten Sie Ihre Artikel und damit Ihren Shop mit einem schicken Design versehen. Damit erhöhen Sie Ihr Vertrauen beim Kunden und steigern gleichzeitig Ihren Umsatz.

Ebay mit HTML ein eigenes Shop-Design erstellen

Der Texteditor von Ebay ist leider sehr eingeschränkt – bis auf den Font, die Schriftart und Standard-Formatierungen können Sie hier leider nichts einstellen. Abhilfe schafft optionaler HTML-Code, den Sie statt des normalen Textes in den HTML-Editor einfügen können. HTML ist die Programmiersprache von Internetseiten – wenn Sie sich damit nicht auskennen, können Sie einen speziellen Editor verwenden (siehe unten). Bei der eigenen Design-Programmierung gibt es folgendes zu beachten:

Leider gibt es für Verkäufer unterschiedliche Regeln für den HTML-Editor: Geprüfte Mitglieder, Powerseller und Verkäufer mit über 500 Verkäufen dürfen in Ihrem Code Scripte und Iframes verwenden – so können Sie etwa Ihre Webseite im Ebay-Shop einbinden.
Kleine Verkäufer dürfen keine externen CSS- oder Javascript-Dateien einbinden – CSS-Elemente müssen Sie daher sehr eingeschränkt über den „style“-Befehl von div-Boxen setzen.
Bilder können Sie wie gewohnt über den Code <img src=“URL“> einbinden. Bei der Positionierung von Bildern müssen Sie auf das Ebay-Design Rücksicht nehmen: Sonst können Ihre Bilder etwa in den Footer der Webseite reichen.

Ein gutes Tool für den Mac hierfür ist der Auction Listing Designer. Für Windows kann man den ListingFactory verwenden. Möchte man sein Layout online erstellen kann man gegen eine monatliche Gebühr auf den Crazylister zurückgreifen.

Einbindung externer Webseiten in Ebay mittels iFrame

Möchte man spezielle Webseiten, die (extra) für Ebay entworfen wurden über einen iFrame einbinden, so benötigt man folgenden Code:

<style>
</style>
&nbsp;
<iframe src="https://www.domain.com/ebay/product1.html" height="1500" width="1000"></iframe>

Höhe und Breite können dementsprechend angepasst werden.

CorelDraw: Logo gestalten

4. Mai 2016adminFoto & Grafik10, aber, alle, allen, aller, alte, alten, alter, alternative, andere, anderen, anlegen, anpassen, anpassung, anwendung, arbeit, arbeiten, arbeitsschritt, auch, aufheben, auswahl, bearbeiten, bedarf, beim, bereits, beste, besten, bild, bildern, blatt, bringen, browser, buch, chrome, core, dann, darf, darum, dass, deine, deren, Die Gr, dienste, diese, Diese Vorgehensweise, doch, dock, dokument, DR, drehen, dunkle, durch, ebenfalls, eine, einem, einen, einer, eines, einfach, einfache, elemente, ende, entwicklung, erst, erste, esc, export, fall, farbe, farbige, fenster, finde, folgen, formen, funk, funktion, funktionen, funktioniert, geben, geeignet, gehen, geht, gemacht, gerade, geringem, gleiche, grafiken, gt, gute, handgriffe, heraus, herz, hier, hilfe, hintergrund, hohe, holen, id, import, inhalt, inhalte, inkl, integrieren, ip, jede, jeder, jetzt, kann, kauf, kein, keine, kern, kleine, kleiner, klick, knoten, komme, kommen, kommt, konvertieren, kopf, kunden, kurve, kurven, lager, LAN, lang, lassen, last, leere, leeren, legen, leicht, leichter, liebe, lieber, liest, logo, logos, lohn, löschen, macht, manager, markieren, mehr, mehrere, mehreren, miteinander, mithilfe, mittel, modus, muss, nach, namen, navigieren, nein, neue, neuen, neues, nicht, nik, noch, nutzen, nutzt, objekt, objekte, oder, ohne, OK, online, optimal, optimale, option, order, ordner, passt, position, praxis, problem, problemlos, projekt, raus, rechtsklick, reifen, richtig, richtige, rund, schnell, schnelle, schon, schrift, schriftzug, schritt, schritte, seine, seinen, selbst, sich, sicher, siehst, sind, skalieren, soll, sollte, source, springen, stellen, stellt, strecken, suche, suchen, tastatur, taste, teil, test, testen, text, trennen, tutorial, umbau, umriss, unsere, unter, vektorgrafik, version, verwenden, viel, viele, vorhanden, vorhandenen, wahl, wählen, weitere, weiteres, wenigen, wenn, werden, wieder, wiedergabe, wiederholen, wird, wirklich, zahl, zeichnen, zeigen, zeigt, zeitlich, zusatz, zwei, zwischen

LOGOAUSGESTALTUNG

Für das fiktive Unternehmen Botagazoo wird eine vektorisierte Vorlage nun dazu verwendet, das Logo auszugestalten bzw. neu aufzubauen. Der Kunde äußerte den Wunsch, dass der Schmetterling aus der Vorlage in dieser bzw. ähnlicher Form optional zur Anwendung kommen soll. Diese Vorgabe nutzt du nun zur weiteren Logogestaltung. In CorelDRAW kannst du Vektorgrafiken ohne Weiteres ausgestalten oder jederzeit umbauen.

SCHRITT 1

Zu Beginn öffnest du am besten ein neues Dokument und importierst die Grafik. Optional kannst du auch mit einer leeren Datei anfangen und diesen Schritt überspringen.

SCHRITT 2

Da das Logo bzw. die Vorlage selbst noch nicht aussagekräftig genug ist und der fiktive Kunde gern seinen Namen im Logo fest verankern möchte, erstellst du als Nächstes am besten einen Schriftzug mit dem Textwerkzeug.

SCHRITT 3

Bei dem Schriftzug kam bereits die Hauptfarbe Grün zum Einsatz. Sie ist ein wesentliches Erkennungsmerkmal des Unternehmens. Die Schrift selbst ist jedoch noch nicht logotauglich. Damit sie problemlos exportiert und weiterverarbeitet werden kann, sollte man sie an dieser Stelle bereits in Kurven konvertieren. Das kannst du mithilfe eines Rechtsklicks erledigen.

SCHRITT 4

Nachdem nun der Schriftzug in Kurven konvertiert wurde, kannst du ihn weiter bearbeiten. Der nächste Schritt besteht darin, die Kombination dieser Kurve aufzuheben. Auch das geht mithilfe eines Rechtsklicks auf das Objekt.

SCHRITT 5

Jetzt geht es daran, die Unterstrecken aus den Buchstaben herauszulösen. Im Moment sind alle Buchstabenöffnungen verschlossen.

Änderst du jedoch die Ansicht über das Menü Ansicht auf den Modus Einfacher Umriss,siehst du, dass alle relevanten Buchstabenbestandteile vorhanden sind.

Um diese Teile voneinander zu lösen, musst du zunächst die sich überlagernden Buchstabenteile markieren. Das kannst du einfach tun, indem du mit dem Hilfsmittel Auswahlden Bereich auswählst. Allerdings funktioniert diese Auswahlmethode nicht mit der nachfolgenden Funktion. Hier müssen beim Buchstaben B beispielsweise wiederholende Arbeitsschritte erfolgen, um diese Unterstrecken herauszutrennen.

Du benötigst eine Markierung des großen B und die einer der Öffnungen (Unterstrecken). Da sich diese hinter dem großen Objekt befinden, nutzt du die Alt-Taste deiner Tastatur, um beide Objekte auszuwählen oder gehst über den Objekt-Manager und identifizierst die Kurvenobjekte.

Sind beide Objekte markiert, kannst du die Option Vorderes ohne Hinteres in der Eigenschaftsleiste dazu benutzen, das hintere Objekt aus dem vorderen herauszutrennen.

SCHRITT 6

Wiederhole diese Vorgehensweise auch für die anderen Buchstaben.

SCHRITT 7

Nachdem nun alle Unterstrecken aus den Buchstaben herausgetrennt wurden, solltest du das Objekt als Nächstes gruppieren, um es vor unbeabsichtigter Veränderung zu schützen. Durch die Vektorisierung des Schriftzuges besteht dieser jetzt aus mehreren Einzelobjekten und hängt nicht mehr zusammen.

SCHRITT 8

In diesem Schritt soll es darum gehen, die Vorlage an diesen Schriftzug anzupassen und diese Elemente miteinander in Einklang zu bringen. Dafür wird der Schmetterling zunächst in den Farbton des Namenszugs umgefärbt und an diesen angelegt.

Durch die Funktionen Drehen, Spiegeln und Skalieren kann man jetzt versuchen, eine geeignete Position zu finden und die optimale Größe in Relation zum Schriftzug herzustellen.

SCHRITT 9

Die Vorgabe des Auftraggebers lautete, eine Schmetterlingsform in das Logo zu integrieren. Unter Umständen passen aber die Vorlagen und das Ziel nicht wirklich zusammen. Deshalb kannst du nun versuchen, diese Schmetterlingsvorgabe auszubauen. Eine Option wäre zum Beispiel eine veränderte Flügelform. Damit du diese bearbeiten kannst, solltest du zunächst die Gruppierung der Vorlage aufheben. Das kannst du wieder über das Kontextmenürealisieren.

SCHRITT 10

Eine schnelle Methode zur Formänderung in geringem Ausmaß besteht in der Anwendung der Knotenreduzierung auf ausgewählte Objekte. So kannst du beispielsweise die Funktion dazu benutzen, eine vorhandene Form durch Reduzierung von Steuerknoten umzuformen. Es trägt zudem dazu bei, die Vektorgrafiken weniger ressourcenlastig ausfallen zu lassen.

SCHRITT 11

Zudem kann es sich lohnen, beispielsweise den Körper oder die Fühlerform der Vorlage anzupassen. Hierfür kannst du zunächst den vorhandenen Kopf und die Fühler aus der Vorlage löschen und mit dem Hilfsmittel Stift einen neuen Körper und Fühler einzeichnen.

SCHRITT 12

Nachdem die Schmetterlingsgrafik nochmals editiert wurde, geht es an die weitere Ausgestaltung der Schrift. Der Kunde wünscht sich nach einem Zwischengespräch einen Namenszusatz für das Logo, und so soll der Schriftzusatz ‚Botanik und Zoobedarf‘ zur Firmenbezeichnung hinzukommen. Dafür erstellst du einfach einen Textzusatz in der gleichen Schriftart, jedoch deutlich kleiner und in der gleichen Farbe, die bei der Firmenbezeichnung bereits zum Tragen kommt.

SCHRITT 13

Der nächste Schritt besteht darin, diesen Zusatz zur Firmenbezeichnung in die richtige Relation zu bringen. Durch Anpassung der Schriftgröße und Neupositionierung wird eine geeignete Stelle ausgewählt.

SCHRITT 14

Wie auch schon bei der Firmenbezeichnung solltest du an dieser Stelle diese Schrift in Kurven konvertieren und danach die Unterstrecken aus den Buchstaben herauslösen.

Das geschieht wieder über das Aufheben der Kombination und Heraustrennen der Unterstrecken durch die Objekttrennfunktionen in CorelDRAW.

SCHRITT 15

In Schritt 15 heißt es wieder zurück an den Anfang, denn der Kunde hat sich zwischenzeitlich dazu entschieden, doch lieber einen anderen Schmetterling und eine Blüte zum Logo hinzuzufügen. Was sich liest wie ein Krimi, ist in der Praxis keine Seltenheit. Gerade bei Logos oder dergleichen, die von Kunden in Auftrag gegeben werden, kommt es oft zu mehrmaligen Änderungswünschen. In diesem Tutorial, das wir praxisnah gestalten, wird es zu einem Bestandteil der Entwicklungsgeschichte. Zudem zeigt es die hohe Flexibilität dieser Grafik-Suite.

Damit an dieser Stelle keine neue Grafik mehr oder wenn doch, dann weniger aufwendig erstellt werden muss, kann man sich in CorelDRAW auch aus den zahlreichen Vorlagen bedienen. Dazu rufst du nun das Andockfenster Corel CONNECT auf.

SCHRITT 16

In Corel CONNECT kannst du nun zum Zusatz-Content der Grafik-Suite navigieren und dir aus dem Ordner Clipart geeignete Grafiken heraussuchen.

Corel CONNECT hat einen inkludierten Bildbrowser, der das Auffinden von Bildern erleichtert. Alternativ kannst du in der Version X6 auch auf Online-Bilddienste zurückgreifen und Grafiken einkaufen.

SCHRITT 17

Hast du relevante Inhalte ausgemacht, kannst du diese einfach in dein Projekt ziehen. In unserem Praxisfall kommt eine Hintergrundgrafik infrage, die einen schönen Schmetterling beinhaltet. Damit du an diesen Schmetterling gelangst, solltest du auch bei diesem Objekt die Gruppierung zunächst aufheben.

Jetzt kommst du an das Objekt heran und kannst es aus dieser Grafik lösen und ins Dokument ziehen.

SCHRITT 18

Der Schmetterling fügt sich bereits gut in die Grafik ein und muss nur noch geringfügig angepasst werden. Zum einen kannst du die Größe und den Abstand zum Zielobjekt variieren und letztlich auch die Farbe anpassen.

SCHRITT 19

Ein weiteres Element sollte sich zur Firmenbezeichnung gesellen: eine Blüten- oder Blattform. Diese hast du idealerweise schon erstellt oder ebenfalls aus einem anderen Objekt der Zugaben extrahiert. Sie kann als Schmuckelement dem Logo hinzugefügt werden.

SCHRITT 20

Sind alle Elemente erstellt, kann das Logo dem Auftraggeber vorgelegt werden. Zunächst jedoch solltest du die Tauglichkeit des Logos testen und als weitere Variation eine dunkle Version anlegen. Diese monochrome Variante ist eine alternative Form, die später zum Einsatz kommt, wenn eine farbige Wiedergabe unmöglich ist oder die Hausfarbe aus anderen Gründen nicht greift.

Zu guter Letzt möchte ich zwei weitere Exemplare dieser Logoentwicklung zeigen, die man mit wenigen Handgriffen realisieren kann. Die Erstellung, Anpassung und Ausgestaltung von Logos kann sehr aufwendig sein. Unser Beispiel reißt dieses Thema bisweilen nur an, dennoch lassen sich viele Schritte in dieser oder abgewandelter Form sicherlich auch für deine Projekte verwenden.

CORELDRAW – Visitenkartenerstellung

4. Mai 2016adminFoto & Grafikaber, alle, allem, alte, alten, alter, andere, anderen, anderer, anhand, anlegen, anzeige, anzeigen, arbeit, arbeiten, arten, auch, auswahl, bearbeitung, bereits, beste, besten, bestimmt, bestimmte, bestimmten, bild, bleibt, blitz, block, breite, bringen, core, dass, deren, diese, dokument, dokumente, dokumenten, DR, drei, druck, drucker, durch, ebenfalls, eine, einem, einen, einer, eines, einfach, einheitliche, einrichten, einsetzen, elemente, ende, endlich, entsprechende, erhalten, erst, erste, esc, fall, farbe, farben, farbige, fertige, fett, format, formatierung, formen, funk, funktion, funktionen, geben, gehen, gleiche, grafiken, grundlegende, gt, halten, helfen, hier, hintergrund, id, informationen, jede, jeder, jedes, jetzt, kann, kante, kein, kennen, kleine, klick, knoten, komme, kommen, kommt, kontrast, kunden, kurve, kurven, LAN, leere, leeren, legen, lock, logo, logos, medien, mittel, nach, noch, nutzen, nutzt, objekt, objekte, oder, ohne, OK, option, optionen, order, plan, platz, professionell, professionelle, rang, rechte, richte, rund, schnitt, schon, schrift, schriften, sehe, sehen, seine, seinen, seite, setzen, sich, soll, sollte, sparen, stellen, stellt, suche, suchen, teil, test, text, transparenz, tutorial, unter, verstehen, verwendete, viel, viele, vier, wahl, wählen, weitere, weiteres, wenn, werden, wichtig, wichtige, wichtigste, wichtigsten, wieder, wird, zeigen, zeigt, zusatz

VISITENKARTE

Die Visitenkarte eines Unternehmens oder deren Mitarbeiter ist ein wichtiges Instrument, Kunden zu binden bzw. den Kontakt zu Kunden und Geschäftspartnern aufrechtzuerhalten. Eine ansprechende Visitenkarte bleibt einem am ehesten in Erinnerung.

Damit die Geschäftspapiere des Unternehmens eine einheitliche Gestaltung aufweisen, benutzt du am besten Teile bzw. Eigenschaften von Objekten aus der Gestaltung des Geschäftsbriefes. Hier kommen insbesondere die Farben, das Logo oder bestimmte Formen in Betracht, die sich durch alle Medien ziehen werden.

Visitenkarten besitzen ein Standardmaß und in CorelDRAW gibt es entsprechende Vorlagen.

Falls du ohne Vorlagen arbeiten möchtest, kannst du auch einen leeren Arbeitsbereich nach Maß anlegen. Klicke dazu einfach auf Datei>Neu. Im Auswahlfeld für die Dokumentengrößekannst du das Format für die Visitenkarte öffnen.

Wenn die Visitenkarte über eine professionelle Druckerei hergestellt werden soll, solltest du an den Anschnitt denken. Diesen richtest du ein, indem du im Menü auf Layout>Seite einrichten gehst und dort einen Randanschnitt von 3 mm voreinstellst. Den Haken bei Randanschnittbereich anzeigen solltest du setzen, damit du die Orientierung zum Rand hin während der Erstellung behältst.

Das Grundgerüst steht. Bei der Gestaltung einer Visitenkarte bestehen die gleichen Grundsätze wie für den professionellen Druck von Dokumenten. Grafiken, die bis zum Rand reichen sollen, müssen bis zur Schnittkante herangeführt werden. Andernfalls droht ein weißer Rand nach dem Beschnitt – ein sogenannter Blitzer – aufzutreten.

In der Beispielvisitenkarte kommen vier Gestaltungselemente zusammen, die am Ende das fertige Design der Visitenkarte stellen. Du kannst beispielsweise einen einfarbigen Hintergrund wählen, einen Verlauf oder eine Grafik, um damit die Fläche zu füllen. Bei einem Unternehmen sollte Platz für das Logo eingeplant werden und ein Textblock mit den Informationen zum Visitenkarteninhaber gehört ebenfalls dazu.

Je nach Art des Designs kann es erforderlich sein, Schriften links- oder rechtsbündig bzw. zentriert anzulegen. Die wichtigsten Informationen wie Name und Unternehmen solltest du stärker betonen und dafür eine größere Schriftgröße oder auch Schriftart wählen. In diesem Tutorial gehe ich davon aus, dass du mit der grundlegenden Textbearbeitung vertraut bist.

Im gezeigten Beispiel kommen drei Schriftgrößen zum Einsatz:

Firmenbezeichnung: 14 Pt/halbfett

Name des Mitarbeiters: 12 Pt/halbfett

Alle anderen Angaben: 8 Pt

Die Schriftgestaltung richtet sich wiederum nach den Gegebenheiten, wie du sie schon bei den Geschäftsbriefen kennengelernt hast. Sie wird entweder vorbestimmt durch die dort verwendete Schriftkombination oder durch festgelegte Designvorgaben. Bei der Visitenkarte kommt es vor allem darauf an, möglichst viele Informationen auf kleinem Raum unterzubringen. Die Formatierungsoptionen in CorelDRAW X6 können dir dabei helfen, Informationen platzsparend unterzubringen.

Bei gestalterischen Gegebenheiten wie beispielsweise der Integration des Logos kann es sinnvoll sein, Zusatzobjekte auf der Visitenkarte unterzubringen, die die Kontrastwirkung erhöhen. Im Beispiel wurde ein Objekt, das die Visitenkarte deutlich überragt, aus einem Kreis erstellt und in Kurven konvertiert.

Dieses Objekt wird jetzt beschnitten, sodass nur noch ein Reststück in Form und Größe der Visitenkarte bestehen bleibt. Entweder beschneidest du das Objekt mit dem Hilfsmittel Beschneiden oder du nutzt die Funktionen wie im Bild zu sehen, indem du Objekte anhand anderer beschneidest.

Überstehende Ränder können ebenfalls auf diese Weise eingekürzt werden.

Eine andere Herangehensweise besteht darin, zunächst ein einfarbiges Objekt in Visitenkartengröße aufzuziehen.

Ein weiteres Rechteck wird über diese Fläche bis ungefähr zur Hälfte gelegt und in Kurven konvertiert.

Jetzt kannst du das Hilfsmittel Form dazu benutzen, die Kurve in das Objekt einzubringen.

Jetzt kommt es darauf an, die Knotenbearbeitung zu verstehen und einsetzen zu können. Jeder Knoten besitzt einen bestimmten Typ, der die weitere Bearbeitung beeinflusst. Als derzeitige Form könnte diese Grundlage bereits ausreichen und für eine Designvariante eingesetzt werden.

Jedes Objekt lässt sich vielfältig ausgestalten. Du kannst beispielsweise versuchen, dem Objekt mit einer Transparenz oder Musterfüllung ein besonderes Erscheinungsbild zu geben. Auch eine Transparenz mit Muster ist möglich.

Es gibt bei Visitenkarten kein Patentrezept. Jede Visitenkarte sollte so individuell wie möglich sein, damit sie sich von der breiten Masse abhebt. CorelDRAW kann mit seinen schier unendlichen Kombinationsmöglichkeiten jederzeit als Kreativwerkzeug für die Erstellung solcher Visitenkarten eingesetzt werden.

Elemente mittels CSS unsichtbar machen / in WordPress ausblenden bzw. verstecken

29. März 2016adminWebdesignaber, alle, also, alte, alten, annehmen, anpassen, anwendung, arbeit, archiv, archive, auch, ausblenden, ausschneiden, auto, background, befehl, befehle, beispiele, bereits, besser, bessere, bestimmt, bestimmte, bleibt, blog, Box, browser, chrome, codes, css:, dann, dass, deine, detail, diese, display:none, durch, eine, einen, einer, eines, einfach, einfache, einmal, einzigen, elemente, ende, entsprechende, erhalten, erkennen, erst, erste, erstellen, esc, euch, fall, farbliche, format, frei, funk, funktion, funktionieren, funktioniert, geben, genau, gewinne, gleiche, gt, halten, hier, hintergrund, html, id, informationen, inhalt, inhalte, ip, jede, jedem, jeden, kann, kennen, lager, lassen, lens, logo, machen, mehr, mittel, muss, nach, Nach Ver, neben, nicht, noch, nutzt, oder, page, parameter, play, plugin, plugins, RAM, richtig, richtige, richtigen, rund, safari, schnell, schnelle, schrift, schriften, seine, seinen, seite, seiten, setzen, sich, sichtbar, sind, soll, sondern, spalten, sparen, spiele:, stellen, stellt, struktur, style, tabelle, tabellen, test, text, titel, tool, tools, transparent, transparente, unsere, unter, vergisst, verstecken, versteckt, verwenden, verwendete, webdesign, welche, welchen, welches, wenn, werden, wieder, wird, wirklich, wordpress, zeile, zeilen, zwischen

CSS: Bestimmte Inhalte ausblenden

Mit CSS Code kannst du sehr einfach bestimmte Elemente im Theme verstecken.

CSS Befehl:

Du kannst den CSS Befehl display: none verwenden, um ein Element auszublenden:

.page-element {
display: none;
}

Hierbei musst du die Klasse .page-element mit der ID oder Klasse des von dir gewünschten Elements ersetzen, welches verborgen werden soll. Wir empfehlen die Verwendung des Firefox Plugins Firebug zur Identifizierung der richtigen ID bzw. Klasse.

Beispiele:

Bitte beachte, dass sich die HTML Strukturen je nach verwendeten Theme unterscheiden können und manche Codeschnipsel deshalb nicht in jedem Theme gleichermaßen funktionieren.

Logo ausblenden

#logo {
display: none;
}

Alle Seitentitel verstecken

.page-title {
display: none;
}

Seitentitel einer einzigen Seite ausblenden ( Seite mit ID 99)

#page-99 .page-title {
display: none;
}

Beitragsinformationen (Postmeta) verstecken

.postmeta {
display: none;
}

Autor des Beitrags ausblenden

.postmeta .meta-author {
display: none;
}

Archivseiten Überschrift verstecken

.archive-title {
display: none;
}

Wer seinen Blog liebt, der arbeitet und feilt daran, bis er perfekt wird. Manchmal stören am Ende dann aber lästige Boxen, Leerräume oder im Hintergrund wäre ein transparentes Grafikdetail noch schön. Neben bereits bekannten CSS Designmöglichkeiten bieten euch die Befehle [visibility], [display] und [opacity] eine schnelle und einfache Möglichkeit, diesen zusätzlichen kreativen Freiraum zu gewinnen.

Visibility

Die visibility Eigenschaft legt die Sichtbarkeit eines Elements fest. Dafür verwendet ihr die Parameter [hidden] und [collapse]. Der Befehl [hidden] setzt das Element dabei ausschließlich auf vollständig transparent, [collapse] kann zusätzlich Tabellenspalten/-zeilen/-gruppen-Elemente ausschneiden. Wenn dein Browser [collapse] richtig interpretieren kann, werden die transparenten Elemente später nicht mehr sichtbar sein. Safari und Chrome erkennen ihn zwar in der Regel, geben ihn aber genauso wie [hidden] aus, also mit Textfluss-Unterbrechung.

In beiden Beispielen wurde die 2. Zeile transparent:

Display

Der Befehl [display: none] funktioniert im Prinzip wie der [collapse] Befehl, nur dass ihr nicht mehr auf Tabellen beschränkt seid, sondern auch normalen Content lückenlos verschwinden lassen könnt. In unserem Fall den bekannten „Lorem ipsum …“ Text.

Zum Vergleich nur mit [hidden]:

Opacity

[opacity] ermöglicht euch, Boxen, Hintergründe und Schriften stufenweise transparent werden zu lassen. Dazu müsst ihr den „opacity“ Befehl in die entsprechende Codezeile einfügen. Sie kann dabei einen Wert zwischen 0 und 1 annehmen.

Code in der Schriftzeile:

Code in der Backgroundzeile:

Fazit:

Zum Ausschneiden eignen sich [hidden] oder [display:none] wirklich gut. Sie sind schnell geschrieben und einfach in der Bedienung. Außerdem bleibt der Content für euch im HTML erhalten, falls ihr ihn wieder herstellen möchtet. Nur vor euren Leser ist er versteckt und das unabhängig davon, welchen Browser er nutzt. Durch den [opacity] Befehl bieten sich euch zusätzliche Gestaltungsmöglichkeiten, die man ab und zu vergisst, wie das Übereinanderlagern von Boxen oder das farbliche Anpassen des Themes. Auf jeden Fall wert, es einmal auszuprobieren.
Neben der hier vorgestellten In-Line Anwendung des Codes, funktionieren diese Code-Schnipsel natürlich auch in deiner style.css in der du die entsprechende .class oder #id einfach erweiterst. Wenn du in Testing-Tools gut abschneiden möchtest, ist diese Variante die bessere.

Windows 10: Beim neuen Monitor ist die Schrift unscharf? So einfach ist das Problem gelöst.

25. Februar 2016adminHardware, Windows10, aber, andere, anderen, ändern, anmeldung, anpassung, anzeige, apps, auto, automatisch, automatische, behoben, beim, benutzer, beziehung, bild, Box, button, computer, dann, deine, deren, desktop, echten, eine, einem, einen, einer, einfach, einstellungen, Eintrag, elemente, ende, erweiterten, fenster, festlegen, folgen, funk, funktion, funktioniert, ganz, GB, immer, internet, kann, kauf, kleine, klick, komme, kommen, legen, maus, mausklick, maustaste, meldung, monitor, nach, neue, neuen, neustart, nicht, nutzer, OK, option, PC, problem, rechte, rechten, schnell, schrift, soll, sollte, start, taste, text, unscharf, unter, Unter Windows, webdesign, werden, wieder, window, windows, Windows 10

Du hast dir einen größeren Monitor gekauft und das Schriftbild ist unscharf? Unter Windows 10 kann dies vorkommen da die automatische Anpassung nicht immer reibungslos funktioniert. Das kleine Problem ist mit ein paar Mausklicks aber schnell behoben.

Du klickst mit der rechten Maustaste auf deinen Desktop und wählst im Kontextmenü den Eintrag Anzeigeeinstellungen aus.

Im folgenden Dialogfenster schiebst du den Regler der Option Größe von Text, Apps und anderen Elementen ändern ganz nach links auf 100 %. Dann scrollst du nach unten und öffnest die Erweiterten Anzeigeeinstellungen und folgst dann dem Link Erweiterte Größenänderung für Text und andere Elemente.

Im Textbereich des nächsten Fensters klickst du auf den Link eine benutzerdefinierte Skalierungsstufe festlegen.

Ändere den Wert in der Dialogbox auf 100 % und bestätige die Änderung mit dem Button Ok und dann mit Übernehmen.

Nach einem Computer-Neustart, beziehungsweise nach einer Ab- und Anmeldung werden die vorgenommenen Änderungen wirksam und das Schriftbild sollte wieder in Ordnung sein.

checkflash-tool-download-zip-datei-entpacken-mikelab-usb-stick-testen-560×212

Check Flash: Das Profi-Tool für die Analyse deiner USB-Sticks

11. Februar 2016adminHardwarealle, analysieren, andere, arbeit, arten, auch, auswahl, befehl, beliebig, beliebige, bringen, button, dann, dass, daten, dauer, defekte, deine, Den Windows, Der Speicherplatz, deren, device, diese, downloads, DR, drive, durch, eigentlich, eine, einem, einen, einer, eines, einfach, einmal, elemente, ende, endlich, ermitteln, erst, erste, esc, etwa, etwas, fall, fehler, fenster, festplatte, file, finde, findest, folgen, format, formatieren, formatierung, full, funk, funktion, funktionen, gelangen, geschwindigkeit, gt, heraus, herz, hier, ical, id, informationen, ip, kann, kauf, klick, komplett, kontrollieren, kosten, kostenlos, kostenlose, kostenloser, LAN, lang, lange, laufwerk, leistung, lens, letzten, lohn, lohnt, mehr, meldung, mittel, nach, neue, neuen, nicht, NTP, oder, option, optionen, order, ordner, PC, platz, program, programm, programmfenster, RAM, raus, rechtsklick, retten, rund, schnell, sd-karte, seite, sich, sicher, sichern, sind, soll, sollte, sollten, speed, speicher, speicherplatz, start, startest, stellen, stick, suche, suchen, symbol, system, systems, test, testen, text, tipp:, tool, tools, type, unter, usb-stick, usb-sticks, verschiedene, verwenden, viel, viele, vorab, wahl, webseite, wechsel, weitere, weiterhin, wenn, werden, window, windows, wird, zeigen, zeigt, zelle, zellen

Die meisten USB-Sticks sind billige Massenware, deren Verarbeitung zu wünschen übrig lässt. Häufig liegen die Mängel in fehlerhaften Speicherzellen und/oder an mechanischen Fehlern (z. B. brüchige Lötstellen). Wenn USB-Sticks nicht mehr die Leistung bringen die sie eigentlich sollten, dann ist es empfehlenswert, sie vor einem Neukauf erst einmal zu analysieren. Mit diesem Profi-Tool findest du schnell heraus, ob sich der Kauf eines neuen Sticks lohnt.

Das Tool Check Flash ist auf der Webseite mikelab.kiev.ua des Ukrainers Mykhailo Cherkes als kostenloser Download erhältlich. Wird dir die Webseite auf kyrillisch angezeigt, dann stellst du sie über das Symbol EN oben links auf englisch um. Danach wählst du Programs | Check Flash aus, um auf die Downloadseite zu gelangen.

Mit einem Klick auf den Link beginnt der Download im ZIP-Format.

Anschließend entpackst du das Tool Check Flash in einem beliebigen Ordner und startest es über die Startdatei ChkFlsh.exe.

SPEED-TEST

Für eine Messung der Lese- und Schreibgeschwindigkeit wählst du im Programmfenster unter Drive deinen USB-Stick oder ein anderes Flash-Speichermedium aus. Dann wählst du im Bereich Access type die Option Use temporary file aus und stellst bei Test length die Dauer One full pass ein. Mit dem Startbutton führst du dann den Speed-Test durch.

Das Ergebnis wird im Informationsbereich bei Read speed (Lesegeschwindigkeit) und bei Write speed (Schreibgeschwindigkeit) angezeigt.

SPEICHER-GRÖSSE KONTROLLIEREN

Als erstes solltest du die Daten auf dem Speichermedium auf deiner Festplatte sichern, da sie während des Tests gelöscht werden.

Um zu ermitteln, wie groß der Speicherplatz tatsächlich ist, wählst du im Programmfenster folgende Konfiguration:

Drive: Auswahl des USB-Sticks oder SD-Karte
Access type: As physical device (NT-based-systems only)
Action type: Write and read test sowie Full pattern set
Test length: One full pass
Start

Bestätige anschließend die Meldung dass alle Daten auf der Karte/Stick gelöscht werden.

BESCHÄDIGTE SPEICHERELEMENTE IDENTIFIZIEREN

Dieser Test wird letztendlich zeigen, ob du die Speicherkarte/USB-Stick weiterhin verwenden solltest. Werden nach dem Testende zu viele beschädigte Speicherzellen angezeigt, ist von einer weiteren Verwendung abzuraten. Das Risiko eines Totalausfalls ist dann einfach zu groß.

Vor der Speicheranalyse sollten auch hier die Daten vorab gesichert werden. Im Zuge des Tests wird das Speichermedium komplett gelöscht. Wähle anschließend folgende Optionen im Programmfenster aus:

Drive: Auswahl des USB-Laufwerks
Access type: As logigal drive (NT-based-systems only)
Action type: Write and read test und Small pattern set
Start
Bestätigung der Warnmeldung mit Ja.

Nach der Verwendung des Tools Check Flash ist eine Formatierung des Wechseldatenträgers erforderlich, da verschiedene Informationen während der Tests auf dem Stick/SD-Karte abgelegt werden. Das erledigst du über den Windows Explorer, indem du per Rechtsklick auf das Laufwerk den Kontextmenübefehl Formatieren auswählst.

TIPP:

Falls ein mechanischer Fehler, wie defekte Lötstellen oder ein beschädigter USB-Stecker der Grund für die Fehlfunktionen ist, kann man versuchen, den eigentlichen Speicher zu retten.

Oft werden in USB-Sticks Mini-SD-Karten verbaut, die mit etwas handwerklichem Geschick aus dem Stick extrahiert werden können.

Ausgeblendete Elemente in der Taskleiste anzeigen

25. November 2015adminWindowsaktionen, alle, anzeige, anzeigen, benachrichtigung, benachrichtigungen, elemente, ende, gt, hier, inhalt, klick, klicken, liste, nach, nachricht, richtig, sind, symbol, symbole, system, taskleiste, taste, wählen, zeigen

Win-Taste + i,
„System“ >>> „Benachrichtigungen und Aktionen“
und im Inhalt „Symbole für die Anzeige auf der Taskleiste auswählen“ klicken >>> hier sind alle gelistet.

Thunderbird Postfach-Zugriff durch Komprimierung beschleunigen

13. November 2015adminMac OSX, Office, Windowsabbrechen, Adresse, adresszeile, alte, alten, auch, auto, automatisch, automatische, beenden, befehl, beim, beschleunigen, Box, buch, dann, darf, dass, dateien, dateiname, Die Gr, diese, doch, DR, durch, echten, eine, einen, einer, einstellungen, elemente, ende, entfernt, erst, erweiterung, esc, etwa, fenster, festlegen, file, files, folgen, gedrückt, generieren, gespeicherte, gespeicherten, gleichzeitig, gt, haben, Haben Sie, halten, hier, ip, kleine, kleiner, klick, klicken, Klicken Sie, komprimieren, komprimierung, kopie, kopieren, LAN, lang, langsam, last, laufwerk, legen, letzten, löschen, mail, mailbox, mails, markieren, maus, maustaste, mein, nach, nachricht, nachrichten, neben, netz, netzwerk, nicht, noch, oder, ohne, ordner, ordnern, ordners, ordnerstruktur, papierkorb, pfad, platz, postfach, profil, program, programm, RAM, rechte, rechten, rechtsklick, reduzieren, reicht, reparieren, richte, seine, setzen, sich, soll, sollte, speicher, speicherplatz, speichert, start, stellt, struktur, taste, thunderbird, tippen, Tippen Sie, verkleinern, verschiedene, verwalten, verzeichnis, volume, wählen, wenn, werden, wieder, wird, zeile, zugriff, zwischen

Mit Thunderbird lässt sich Post aus verschiedenen Postfächern gemeinsam verwalten. Wenn das Volumen der Postfachordner jedoch stark wächst, wird Thunderbird langsam. Um Postfachdateien zu verkleinern, genügt es nicht, Nachrichten und Anhänge zu löschen. Entfernt werden die gelöschten Elemente erst, wenn das Postfach komprimiert wird.

Komprimieren: Die Grenze für das automatische Komprimieren von Postfachordnern bei Thunderbird können Sie mit „Extras ➞ Einstellungen ➞ Netzwerk & Speicherplatz“ im Dialogfenster festlegen. Achten Sie dabei darauf, dass bei Thunderbird „Ordner komprimieren“ markiert ist. Reduzieren Sie im Feld daneben die Postfachgröße beispielsweise auf 1 MB. Erst wenn diese Grenze erreicht wird, entfernt Thunderbird die Mails, die Sie gelöscht haben, aus dem Ordner und reduziert so das Dateivolumen. Sie können den Komprimierungsbefehl vorzeitig einleiten, in dem Sie einen Ordner – zum Beispiel den Papierkorb – mit der rechten Maustaste anklicken und „Komprimieren“ wählen.

Reparieren: Wenn die Komprimierung Thunderbird nicht beschleunigt oder die Ordnerstruktur beschädigt ist, lässt sich auch eine Reparatur der gespeicherten Ordner-Zusam men fassungen ausführen. Klicken Sie dazu den Postfachordner – etwa den Posteingang – mit der rechten Maustaste an und wählen Sie daraufhin im Menü „Eigenschaften ➞ Allgemein ➞ Reparieren“.

Um Thunderbird zu zwingen, seine Zusammenfassungsdateien neu zu generieren, löschen Sie die „*.msf“-Dateien im Mailbox-Verzeichnis.

Löschen: Sollte dies nicht den gewünschten Erfolg nach sich ziehen, haben Sie noch die Möglichkeit, die Zusammenfassungsdateien zu löschen. Dies zwingt Thunderbird zur Neuordnung. Hierfür öffnen Sie wieder per Rechtsklick auf einen Postfachordner und „Eigenschaften“ im Dialogfenster die Registerkarte „Allgemein“ und markieren im Feld „Adresse“ durch Überstreichen mit gedrückter Maustaste die Pfadangabe, etwa „C:/Users/name/AppData/Roaming/Thun derbird/Profiles/kiou49ux.default/Mail/pop.1und1.de/“ (Markierung vom Laufwerksbuchstaben bis zum letzten Schrägstrich). Der Dateiname am Ende der Pfad angabe darf hierbei ebenso wenig wie die Bezeichnung „mailbox:///“ am Beginn markiert werden. Betätigen Sie nun gleichzeitig die Taste Strg und die Taste C, um die Adresse zu kopieren. Schließen Sie mit „Abbrechen“ das Fenster und mit „Datei ➞ Beenden“ das Programm.

Öffnen Sie dann ein Explorer-Fenster. Klicken Sie in die Adresszeile und ersetzen Sie den markierten Pfad mit dem gleichzeitigen Drücken der Taste Strg und der Taste V durch die zwischengespeicherte Adresse. Betätigen Sie die Enter-Taste. Im geöffneten Ordner klicken Sie die Dateien mit der Erweiterung „.msf“ an, während Sie die Taste Strg gedrückt halten. Tippen Sie danach auf die Taste Entf und bestätigen Sie die nachfolgende Abfrage mit „Ja“. Beim nächsten Start stellt Thunderbird die Zusammenfassungsdateien neu und ohne den alten Ballast her.

bild-2-dachterasse-colorkey-effekt-film-kino-sin-city-effektvoll-hervorheben-stilistisch-stil-schwarz-weiss-wei_C3_9F-farbe_vajobx

Colorkey-Effekt: Einzelne farbige Elemente in Schwarz-Weiß-Fotos

14. Januar 2013adminFoto & Grafikcolorkey-effekt:, einzelne, elemente, farbige

Der “Colorkey-Effekt” ist eine tolle Möglichkeit, bestimmte Bildelemente hervorzuheben. Der Rest des Motivs wird entfärbt und als Schwarz-Weiß-Foto dargestellt. Dieser Fotoeffekt ist Ihnen bestimmt schon mal aufgefallen. Das beste Beispiel für den “Colorkey-Effekt” ist der Film “Sin City”. Schon in der ersten Szene wird die Frau auf dem Dach sehr effektvoll mit roten Lippen und rotem Kleid in einer monochromen Umgebung gezeigt. Natürlich ist die Anwendung dieses Effektes in einem Film schwerer als in einem Foto. Mit der Freeware “Photo Black & Color” kann jeder Hobbyfotograf diesen Effekt ganz einfach auf die eigenen Fotos anwenden.

bild-2-dachterasse-colorkey-effekt-film-kino-sin-city-effektvoll-hervorheben-stilistisch-stil-schwarz-weiss-weiß-farbe

Download und Installation

Laden Sie das Bildbearbeitungs-Programm, das im Übrigen ohne Installation auskommt, von der Webseite

www.fotofiltre-studio.com/freeware/photobc-en.htm

herunter, speichern die ZIP-Datei auf Ihrer Festplatte, und entpacken Sie das Programm. Wenn Sie es auf einem Wechseldatenträger speichern (z. B. USB-Stick oder Speicherkarte), dann kann das Programm auch mobil auf Tablet-PC´s oder Notebooks ausgeführt werden.

Für den Download klicken Sie oben auf der Webseite auf einen der beiden Links

Photo Black & Color 1.0 (english)
Photo Black & Color 1.0 (french)

Die holländische Version enthält nur eine Bedienungsanleitung im PDF-Format und nicht das Programm selbst.

bild-1-colorkey-effekt-schwarz-weiss-foto-entfärben-pipette-bildbearbeitung-sin-city-film-motiv-hervorheben-farbe

Die Bildbearbeitung

Starten Sie das Programm mit einem Doppelklick auf die Startdatei.

bild-3-starten-programm-freeware-kostenlos-ohne-installation-ausführen-startdatei-exe-doppelklick

Im Programmfenster laden Sie das zu bearbeitende Foto mit “File | Open” hoch. Mit einem Klick auf das Ordnersymbol geht das sogar etwas schneller.

bild-4-file-open-foto-hochladen-laden-symbol-ordner

Wenn Sie den Mauszeiger über das Foto bewegen, wird er als Pipette dargestellt. Klicken Sie nun auf die Farbe(n) die erhalten bleiben soll. Im linken Bereich des Programmfensters werden die so ausgewählte Farbe im Bereich “Colors” angezeigt. Die darunterliegende Schaltfläche “Delete” entfernt versehentlich ausgewählte Farben wieder.

bild-6-bearbeitung-software-toleranz-variieren-farbauswahl-delete-versehentlich-löschen

Im Bearbeitungsbereich auf der linken Bildschirmseite legen Sie mit dem Schieberegler “Tolerance” die Intensität der Farben fest. Je höher der Wert ist, desto mehr Pixel bleiben farbig erhalten.

Aktivieren Sie zusätzlich die Option “Progressive contour”, werden die Übergänge von farbigen Elementen zu dem Schwarz-Weiß-Hintergrund weich gezeichnet.

Die Option “Color gradient” sorgt zusätzlich für die Erhaltung der Zwischentöne.

Sind alle Arbeitsschritte ausgeführt, dann starten Sie die automatische Bildbearbeitung mit “Action | Execute”, oder mit der Symbolschaltfläche mit dem Filmstreifen.

Das Ergebnis

Nach ein paar Sekunden Bearbeitungszeit wird das Ergebnis im Bearbeitungsfenster angezeigt.

bild-8-ergebnis-grau-schwarz-weiss-undo-pfeil-symbol-rückgängig-erneut-versuch-bearbeiten-zufriedenheit-speichern-unter-diskette

Links oben wird das ursprüngliche Bild angezeigt und somit haben Sie den direkten “Vorher-Nachher”-Vergleich. Sollte das Ergebnis noch nicht Ihren Vorstellungen entsprechen, können Sie mit der rückwärts gerichteten Pfeilschaltfläche die Bearbeitung rückgängig machen. Wiederholen Sie Ihre Bildänderungen so oft bis das Ergebnis zufriedenstellend ist.

Um das bearbeitete Foto zu speichern, klicken Sie auf das Diskettensymbol das den Speicherdialog öffnet. Alternativ klicken Sie in der Menüleiste auf “File | Save as”.

Kleiner Tipp:

Achten Sie schon beim fotografieren auf ausdrucksstarke und kontrastreiche Motive. Mit ein bisschen Übung lässt sich mit dieser Gratis-Software sehr schöne und ausdrucksstarke Bilder erstellen.

Mozilla Firefox: Unnötige Elemente beim Drucken einer Webseite entfernen

10. Februar 2012adminMac OSX, Windowsbeim, drucken, elemente, firefox:, internet, mozilla

Wer oft Webseiten ausdruckt, merkt sehr schnell, dass Tintenpatronen oder Tonerkartuschen häufiger gewechselt werden müssen. Selbst wenn auf günstige Druckpatronen zurückgegriffen wird, kostet das eine Menge Geld. Daher sollte das Motto sein: Unnötige Elemente nicht drucken. Manche Webseiten-Betreiber bieten eine schlanke Druckversion ohne Bilder oder Werbebanner an. Das ist aber eher die Ausnahme. Das kostenlose Tool “NukeAnythingEnhanced” bietet Abhilfe und erzeugt aus jeder Webseite eine druckerfreundliche und tonersparende Variante. (mehr …)