Sweetcron テーマ Muxcron の修正

Muxcron スクリーンショット私の Sweetcron サイト では、Muxcron をベースに修正したテーマを使っています。
しかし、このテーマはちょっと問題があって、そのまま使うと Firefox ではフッタ部の表示内容が上に来てしまいます。

そこで、以下の CSS Hack を参考にしてテーマファイルを修正し、フッタ部がちゃんと思惑通りのところに表示されるようにしましょう。
New CSS Sticky Footer – 2009

_header.php

_header.php は 17行目付近を下記のように修正しましょう。

	<body>
	<div id="wrap"><div id="main" class="clearfix">
	<div id="header">
		<div class="center_box">

これで、div#header と div#main_container が、div#wrap, div#main に内包された形になります。

_footer.php

_footer.php は、以下のように修正します。

</div>
</div></div>
<div id="footer">Powered by <a href="http://sweetcron.com/">Sweetcron</a>, styled by <a href="http://life.colin.vg/items/view/60">Muxcron</a></div>
</body>
</html>

_header.php で定義した div#wrap, div#main にを div#footer の前に閉じておいてあげましょう。

main.css

main.css の先頭に以下を追加します。

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 25px;}  /* must be same height as the footer */

#footer {position: relative;
        margin-top: -25px; /* negative value of footer height */
        height: 25px;
        clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

この CSS は、New CSS Sticky Footer で紹介されているものそのものですね。

Sweetcron テーマ Muxcron の修正」への4件のフィードバック

  1. satchin

    こんにちはー。

    Permalink やら date やらは、吐き出されてるけど css で display:none にされちゃってますので

    コレ、なんでをかもとさんのところは表示されていて、うちは表示されないんだろうと思ってしばらくcssをながめてたら、やっとみつけましたー。
    コレに気づくのにかなりの時間を費やしました。
    先にここ見ておけばよかったー。

    返信
    1. をかもと 投稿作成者

      satchin さん、どもです。

      実は、ここに書いてないだけで、ゴチャゴチャと修正して使ってます。
      そのうち整理できたら、またエントリするかも、しないかも。

      返信
  2. satchin

    ありがとうございます!
    作者さんのサイトもそうだったからそういうもんなのねー、と思いながらも、サイトのタイトルに文字がかぶるから気持ち悪いしで困っていたのでした。

    参考サイトも見てみたんだけど、やっぱり日本語で説明されているとわかりやすいですね。
    テーマのいじり方もなんとなくわかってきたので、もう少しいろいろ試してみようと思ってます。

    返信
    1. をかもと 投稿作成者

      satchin さん、どもです。

      Muxcron はシンプルだけど、ちょっとアレなので大幅に手を入れてます。
      Permalink やら date やらは、吐き出されてるけど css で display:none にされちゃってますので、適宜治したほうがよいかと、思われます。

      返信

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください