indexhibit_v2カスタマイズその1

Horizontal formatの画像にpaddingで白枠を付ける

body内の展示部分であるformat.horizontal.php
画像にpaddingで白枠を付けたい。

画像展示部分の大枠であるdiv id='img-container'の横幅がphp上で算出されているので

#img-container {
width: 5000px;
}

firebug上ではこのような形で出ている。

本来ならばphpの計算部分を書き換える必要があるが、phpはあまり詳しくない＆ユーザフォーラムの
英語の壁もあり書き換え場所、記述方法共にわからずどうにもうまくいかない。
単純に画像のdivに対して

#img-container .picture {
float: left;
padding:30px;
}

とかやるとimg-containerのwidthとfloatされて画像と枠のサイズが合わずに、はみ出してしまって
横並びになってる画像のレイアウトが崩れてしまう。

とりあえずの解決方法として

画像間のセパレーションのdivも自動的に作られているので
この幅を一時的に画像のpadding分を足した大きな数字を入れておき、
img-containerのwidthを計算させてから

最後に

#img-container .separator {
 width: 50px;
}

のように戻してやればいけるんじゃないかと思ってるがどうだろう。

追記

できた。

format.horizontal.php 115行目辺り（paddingの両端30pxと画像間のseparatorの幅を60pxとした。）

// PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!!
$this->picture_block_padding_right = (isset($OBJ->hook->options['horizontal_settings']['margin'])) ? 
	$OBJ->hook->options['horizontal_settings']['margin'] : 120;

paddingの両端30pxと画像間のseparatorの幅を60pxとしたので120にした。

んで455行目辺りに追記

#img-container .separator { width: 60px !important; }
#img-container .picture { float: left; background:#fff; padding:30px; }

separatorの幅を60px !importantで上書きして画像のpaddingを30pxにして白枠作成完了。

このやり方だと最後の画像の横が120pxぐらい空く形になったけどひとまずこれで対応。