Skulls…

So, in the last few weeks, I have been doing a lot of WordPress theme development. When I see something cool on the web, I want to implement it a new a cool way. Skulls is basically the end result of some tinkering on the web. Here are some of the methods that I used in this theme.

1. Font Replacement

I read a great article on CameronMoll.com called Exploring Cufón, a sIFR alternative for font embedding. Cufón is this rad javascript library that will exchange text with a font resides on your server. A friend of mine, Tyrel Kelsey showed me an example on a site that he designed using the script, and from there, I was set. Immediately, I  knew that I wanted to create a grungy WordPress theme that I could use this on.

2. Fixed Footer

Nothing terribly revolutionary, but after staring at Facebook everyday, I wanted to put a persistent footer, that would have a couple of quick links in it. To create a fixed footer, simple add the following code to your div.

Make sure to add some bottom-margin to whatever div is going to be above it. You want to make sure you do that, so when you scroll to the bottom, you can see all of your content.

[css]
#footer {
margin:auto;
position:fixed;
margin:auto;
left:0;
bottom:0;
height:40px;
width:100%;
background:#242424;
z-index:1999;
}
[/css]
There are a couple of issues that in IE6 (Go figure…) But they can be resolved by adding this:
[css]* html #footer {
top:expression(eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
position:absolute;
}
[/css]

3. SUPER-ULTRA-RAD GRAPHICS

I mentioned already the font replacement. I found some cool vector packs that had some skull designs in them. The post headers have a banner that overlays the other divs due to some negative margins. One thing to be aware of, if you follow a similar design, is to make sure that links have the coverage that they might need. I had them squeezed a lot tighter, but it was hard to click on the post links.

So, all in all, I think that it turned out to be a pretty cool theme. Not for everyone, but I think that someone will get a kick out of it.

Demo

Download

Dites les spécialistes de #uBlockOrigin ; j'aimerais faire disparaître le footer du site Sens Critique grâce au Element Picker et filtres cosmétiques.

Alors que sur une majorité de site, le filtre « ###footer » fonctionne toujours, là c'est un truc du genre « ##.ivpekb.sc-4f506908-10 ».

Comment on créé un filtre permanent dans ce cas-là ?

Cauld autumn rain dreeps
Atween yer collar an neck:
Ach, sic a fouter.

#Scotstober #footer #haiku #Scotslanguage

/* ==UserStyle==
@name Zen Togetter
@namespace junjo-ponpo.com
@author BlueRayi
@version 1.0.0
@preprocessor Stylus
==/UserStyle== */

@-moz-document domain("togetter.com") {
/* 全体 */
/* 画面右の新着まとめや新着コメントを消す */
aside.right {
display: none;
}

/* 隙間が空いたのでまとめ部分を中央に */
div.left {
float: none !important;
margin-left: auto;
margin-right: auto;
}

/* 閲覧数・コメント数を消す*/
header > div.info_status_box:nth-child(2) > ul.info_status > li:nth-child(n+2):nth-child(-n+3) {
display: none;
}

/* タイトル下のシェアボタンのカウントを消す */
a.lite_share {
font-size: 0;
}

/* お気に入りにしたユーザおよびお気に入りされた数を消す */
div.favorite_box {
.user_icons,
.fav_count {
display: none;
}
}

/* 「あわせて読みたい」を消す */
div.related_list_box {
display: none;
}

/* サムネイル付き別まとめへのリンクを消す */
div.thumb_list_box {
display: none;
}

/* コメントを消す */
#comment-box-portal {
.css-nthydw,
.css-zl1inp,
.css-nthydw {
display: none;
}
}

/* Twitterシェアカウントを消す */
div.twitter_button div.count-o {
display: none;
}

/* facebookシェアカウントを消す */
a.facebook_btn > span > span {
display: none;
}

/* Pocketボタンの表示がおかしいし消す てか使う人いる?これ */
div.social_floating_box > ul > li:nth-child(4) {
display: none;
}

/* ページ下部のシェア数、お気に入り数、コメント数を消す */
#fixed_social_footer > div.left a > span {
display: none;
}

#fixed_social_footer > div.right button > span {
display: none;
}

/* 特集タグを消す */
#footer div.inner h4:nth-of-type(4) {
&, + ul {
display: none;
}
}
}

@-moz-document domain("togetter.com") {
/* スマホ向け */
/* ランキングを消す */
#real-time-ranking-portal {
display: none;
}

/* 急上昇したワードを消す */
#popular-tag-portal {
display: none;
}

/* みんなのコメントを消す */
#comments-summary-portal {
display: none;
}

/* オススメまとめを消す */
#side-recommend-matomes-portal {
display: none;
}
}

@-moz-document domain("b.hatena.ne.jp") {
/* iframe-はてなブックマーク */
/* はてブカウントを消す */
html div.btn-standard.show-count a.count[href^="https://b.hatena.ne.jp/entry/s/togetter.com/"] {
display: none;
}
}

Die Neugestaltung des Blogs war gestern bis auf ein Bereich fertig. Den wollte ich nun vervollständigen und hielt es für einen Klacks. Was habe ich mich doch getäuscht. Ist der Code bisher sauber wie aus dem Lehrbuch, verlangt die Navigation im #footer Klimmzüge und (erste) Brücken. Zudem macht die #flexbox nicht das, was sie ihrem Namen nach tun sollte.

Ich bin ja bereit zu akzeptieren, dass das Unvermögen vorm Monitor sitzt. Aber wenn ich bei Null anfange, mich nach den Angaben aus dem Buch – immerhin aus der "für Dummies"-Reihe – richte und nicht das passiert, was passieren sollte – und ich wirklich nicht derart unterbelichtet bin, um Vorgaben nicht fehlerfrei abschreiben zu können –, dann kennt auch meine Geduld Grenzen. Unbefriedigend.

#html #css #development