web-dev-qa-db-ja.com

2列のJoomlaタグ-RocketThemeテンプレート

2列でJoomlaタグを作成する方法を知りたいです。

私が持っているものの例： http://visualedgehosting.com/dfw-chimera/leadership/

事前に助けを感謝し、

templatescsstagslayoutgantry
3
timmiller

RocketThemeテンプレートを使用していますが、すでにcustom.cssファイルがあることがわかります。

templates/rt_chimera/css/rt_chimera-custom.css

次のcssは、そのページに必要なレイアウトを提供するための開始ベースとして使用できる例です。このコードをrt_chimera-custom.cssファイルの最後に配置します。

.tag-category .list-striped li {
    width: 45%;
    float: left;
}
.tag-category .list-striped li.cat-list-row0 {
    margin-right: 3%;
}

.tag-category .list-striped li img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 8px 15px 8px 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
1
FFrewin

テンプレートにはより明確なオプションがあるかもしれませんが、CSSに次の行を追加できます。

   .tag-category .list-striped li img {
        max-width: 25% !important;
        width: 100% !important;
   }

   .list-striped li, .list-striped dd, .row-striped .row, .row-striped .row-fluid {
        display: inline-block !important;
        width: 47% !important;
    }

テンプレートプロバイダーCSSの後にこのCSSが読み込まれていることを確認してください

1
jdog

縞模様の灰色の背景が2列のフォーマットで奇妙に見えたので、ホバーを保持して削除するためにこれを追加しました。

.list-striped li:nth-child(odd), .list-striped dd:nth-child(odd), .row-striped .row:nth-child(odd), .row-striped .row-fluid:nth-child(odd), .cat-list-row0 {
    background-color: rgba(232, 102, 102, 0);
}

.list-striped li:hover, .list-striped dd:hover, .row-striped .row:hover, .row-striped .row-fluid:hover, .cat-list-row0:hover, .cat-list-row1:hover {
    background-color: #ddd!important;
}

再度、感謝します！

0
timmiller