Google Fonts selber hosten

Mein Theme (Ari von Elmastudio) nutzt von Haus aus die Fonts Droid Sans und Droid Serif von Google. Bis gestern waren die auch bei Google gehostet, was ich eh immer mal ändern wollte. Manchmal benötigt man halt etwas Druck 🙂 In diesem Fall durch dieses Gerichtsurteil (via).

Also: Besagte Fonts sind Open Source, ich habe sie hier und hier als ttf runtergeladen. Auf transfonter kann man sich ein entsprechendes Webfont-Package erzeugen lassen, in diesem Fall binde ich in der functions.php ein (statt bisher zwei) css ein:

Öfter mal was Neues: Neues Theme

Irgendwie bin ich gerade im Veränderungen-Modus. Anlass genug, daraus eine kleine Serie zu starten, die relativ profan beginnt: crusy.net hat ein neues Theme: Publish. So weit, so uninteressant. Für die Akten möchte ich aber kurz aufstellen, was ich normalerweise alles anpasse an so einem Theme:

HTML-Header, header.php:
- Seitentitel auf “crusy.net” ändern (=Tagline rauswerfen, vgl. unten)
- Keywords, Description, Sharing-Tags einfügen
Blog-Header, hier custom-header.php: Ich habe meinen Gravatar durch ein lokales Bild ersetzt, Stichwort Tracking
in Würdigung des cleanen Looks des Themes habe ich die letzten Kommentare und Tweets aus der Seitenleiste geworfen; Tag Cloud und Links sind auf jeweils separate Seite gewandert. Um die Tag Cloud dorthin zu bekommen, habe ich ein neues Page-Template angelegt
comments.php, Stichwort “comment_notes_after“: Im Kommentar-Bereich meiner Posts (meine Pages erlauben keine Kommentare) habe ich einen Disclaimer zu Akismet ergänzt (Hintergrund)
styles.css:

/* Überschreibt Silbentrennung, da die nicht gut funktioniert */
* { word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }
/* HREFs werden nicht mehr unterstrichen, was den cleanen Look unterstreicht */
a { text-decoration: none; }
/* enfernt überflüssigen Abstand zwischen Footer und Seite */
.site { margin-bottom: 0; }
/* gleicht die Abstände von Navigation und Suche an */
.site-header { margin-bottom: 0; }
nav.main-navigation { margin-top: 0; }
/* das Bild oben links wird rund */
.site-logo img { border-radius: 50% }
/* Navigation lowercase */
.main-navigation a, .widget-area ul li a {text-transform: lowercase;}
/* Navigation endet immer auf "." */
.main-navigation a:after, .widget-area ul li a:after { content: "."; }
/* Gleicht Position des Suchfelds optisch aus; Fontsize angepasst */
#searchform { margin-left:-3px; font-size: 13px; }
/* Innenabstand des Suchfelds angepasst */
#s { padding: 4px 3px 3px 4px; }
/* Verbirgt Navigation von Post zu Post */
.post-navigation { display:none; }
/* HREFs in der Tagline (unter dem Bild oben links) sehen aus wie normaler Text */
.site-description a { color: #999999; font-size: 13px; font-weight: 300; margin: 10px 0 20px; text-decoration: none; }

/* Überschreibt Silbentrennung, da die nicht gut funktioniert */

* { word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }

/* HREFs werden nicht mehr unterstrichen, was den cleanen Look unterstreicht */

a { text-decoration: none; }

/* enfernt überflüssigen Abstand zwischen Footer und Seite */

.site { margin-bottom: 0; }

/* gleicht die Abstände von Navigation und Suche an */

.site-header { margin-bottom: 0; }

nav.main-navigation { margin-top: 0; }

/* das Bild oben links wird rund */

.site-logo img { border-radius: 50% }

/* Navigation lowercase */

.main-navigation a, .widget-area ul li a {text-transform: lowercase;}

/* Navigation endet immer auf "." */

.main-navigation a:after, .widget-area ul li a:after { content: "."; }

/* Gleicht Position des Suchfelds optisch aus; Fontsize angepasst */

#searchform { margin-left:-3px; font-size: 13px; }

/* Innenabstand des Suchfelds angepasst */

#s { padding: 4px 3px 3px 4px; }

/* Verbirgt Navigation von Post zu Post */

.post-navigation { display:none; }

/* HREFs in der Tagline (unter dem Bild oben links) sehen aus wie normaler Text */

.site-description a { color: #999999; font-size: 13px; font-weight: 300; margin: 10px 0 20px; text-decoration: none; }

Wozu den letzten Punkt? Nun, ich habe gerne eine zufällig gewählte “Tag line” in der Seite; eine Spielerei und gute Möglichkeit, Kalauer unterzubringen. Da ja nun meine Tweets rausgeflogen sind (siehe oben), möchte ich diese hier unterbringen, und zwar verlinkt. Optisch soll das aber nicht offensichtlich sein – nennt es ein Easteregg. Da werden sicherlich auch noch welche dazukommen oder rausfliegen.

So viel dazu.

UPDATE:

ich habe schon wieder ein neues Theme: Ari von Elmastudio 🙂

iPad: Fehlermeldung bei Installation einer App/2.

Ich habe Feuer gemacht!

Ich habe Feuer gemacht:

Will man per Open Screen Project Manager eine AS3-Anwendung kompilieren, so ist das relativ einfach. Tricky wird es,wenn man diese Anwendung auf dem iPad installieren will… Mit iTunes hatte ich die folgenden Fehlermeldungen:

Die App “xy” wurde nicht auf dem iPad “abc” installiert, da der Signaturaussteller nicht gültig ist:
Das falsche Zertifikat wird verwendet. Statt des “Your Certificate” musste ich ein “Team Member Certificate” benutzen.
Die App “xy” wurde nicht auf dem iPad “abc” installiert, da die Berechtigungen nicht gültig sind:
Der “Identifier for distribution” ist im Open Screen Manager, Reiter “Project”, falsch eingetragen. Dort darf NICHT die komplette App ID stehen, sondern nur der “Bundle Identifier”, also ohne “Bundle Seed ID” stehen. In anderen Worten: Dort darf nur “com.yourDomain.yourApp” stehen, NICHT “ABC1234XYZ.com.yourDomain.yourApp”
“The app “xy” was not installed on the iPad “abc” because the entitlements are not valid:
Der gleiche Fehler wie 2., vergleiche hier.

Man kann übrigens auch Xcode nutzen, um die App zu installieren. Die Fehlermeldung aus 2. lautet dann: “The executable was signed with invalid entitlements. The entitlements specified in your application’s Code Signing Entitlements file do not match those specified in your provisioning profile. (0xE8008016).”

Content einfügen mit CSS

Weil ich’s grad gesucht (und nicht gleich wiedergefunden) habe: Man kann mit CSS Content einfügen. Zum Beispiel diese kleinen Doppelpfeile (») im WordPress-Standardtheme werden dort wie folgt eingefügt:

.entry ul li:before, #sidebar ul ul li:before {
    content: "bla";
}

.entry ul li:before, #sidebar ul ul li:before {

content: "bla";

}

UPDATE: Upsala, Copy&Paste-Formatierungs-Fehler

Abgerundete Ecken

rounded_corners

Wer abgerundete Ecken auf seiner Webseite will, und keine Lust auf Photoshop-Orgien hat (oder CSS3 verwenden will^^), sollte sich mal die Corner Demo für jQuery ansehen. Danke an Moritz, once again!

outline: none;

Ein “aktiver” Link wird durch eine schmale gepunktete Linie dargestellt (oben). Allerdings nicht mehr, wenn man ein

* { outline: none; }

1	* { outline: none; }

einfügt (unten). PS: Angeblich hilft das auch gegen diese blau glühenden Rahmen auf dem Mac.

Firefox vs. “background-position: center center;”

Während meiner Nachforschungen zum folgenden Problem habe ich auf einer Seite den Satz gelesen “Vielleicht das einzig Gute am Internet Explorer!”. Dem kann ich mich anschliessen 🙂 Also. Ich habe ein Hintergrundbild in einem HTML-Element, zB dem body dieser Seite. Mit CSS setze ich dieses in die Mitte:

background-image: url('images/backg.jpg');
background-attachment: fixed;
background-position: 50% 50%;

background-image: url('images/backg.jpg');

background-attachment: fixed;

background-position: 50% 50%;

Nun habe ich einen sehr langen Text auf meiner Seite (zB dieses Blog), ein vertikaler Scrollbalken wird angezeigt. Und ich habe einen sehr kurzen Text (der Photobereich zur Zeit noch), bei dem keine Scrolleiste angezeigt wird. Beim Wechseln zwischen diesen beiden Bereichen springt das Hintergrundbild. Warum? Weil Firefox die Breite der Scrolleiste von der Breite der eigentlichen Seite abzieht, bevor er die Position des Hintergrundes auf der – nun schmaleren – Seite berechnet. Sehr nervig. Folgende Lösungen stehen zur Wahl:

Den ersten Ansatz liest man sehr häufig: Man mache die komplette Seite immer mindestens 1 Pixel höher als sie müsste:

html { min-height: 100%; margin-bottom: 1px; }

1	html { min-height: 100%; margin-bottom: 1px; }

Die Folge: Man hat immer einen aktiven Scrollbalken rechts, der um mindestens einen Pixel scrollt. Auch nicht besser. Als nächstes bin ich über die Möglichkeit gestolpert, die Breite der Scrolleiste per Javascript auszulesen (ich leihe mir den Code mal, aus Archivierungsgründen :-)):

function getScrollerWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';

    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);

    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;

    // Add the scrollbar
    scr.style.overflow = 'auto';

    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

function getScrollerWidth() {

var scr = null;

var inn = null;

var wNoScroll = 0;

var wScroll = 0;

// Outer scrolling div

scr = document.createElement('div');

scr.style.position = 'absolute';

scr.style.top = '-1000px';

scr.style.left = '-1000px';

scr.style.width = '100px';

scr.style.height = '50px';

// Start with no scrollbar

scr.style.overflow = 'hidden';

// Inner content div

inn = document.createElement('div');

inn.style.width = '100%';

inn.style.height = '200px';

// Put the inner div in the scrolling div

scr.appendChild(inn);

// Append the scrolling div to the doc

document.body.appendChild(scr);

// Width of the inner div sans scrollbar

wNoScroll = inn.offsetWidth;

// Add the scrollbar

scr.style.overflow = 'auto';

// Width of the inner div width scrollbar

wScroll = inn.offsetWidth;

// Remove the scrolling div from the doc

document.body.removeChild(document.body.lastChild);

// Pixel width of the scroller

return (wNoScroll - wScroll);

}

Da tun sich doch unvermutete Möglichkeiten auf!? Tja, bloß leider keine, die funktioniert hätte. Wenn jemand eine Idee hat, wie ich die Position eines Elementes, das prozentual (bzw. über “center”) positioniert ist, um eine Anzahl von Pixeln ändern kann: Immer her damit 🙂 Mir blieb nur folgende Lösung, bei der ebenfalls ein permanenter Scrollbalken eingeblendet wird – allerdings ist dieser inaktiv, wenn er nicht benötigt wird, was ich persönlich sehr viel angenehmer finde:

:root { overflow-y: scroll; }

1	:root { overflow-y: scroll; }

Diese Lösung ist die valide (!) CSS3-Version des invaliden

html { overflow: -moz-scrollbars-vertical !important; }

1	html { overflow: -moz-scrollbars-vertical !important; }

, das sowieso nur für Mozilla-Browser gilt. Erstaunlicherweise funktioniert die CSS3-“:root”-Version praktisch “überall”: Firefox 2.0.0.16 auf dem Mac, Safari 3.1.2 auf dem Mac, Firefox 3.0.1 auf dem PC, Safari 3.1 auf dem PC, dem IE soweiso, und dem W3C CSS Validator!

crusy.net

♪ Commit ins Abenteuerland ♫

Category Archives for CSS