web-dev-qa-db-fra.com

Joomla Tags in 2 Columns - RocketTheme Template

J'aimerais savoir comment créer des tags Joomla en deux colonnes.

Exemple de ce que j'ai: http://visualedgehosting.com/dfw-chimera/leadership/

Apprécier toute aide à l'avance,

3
timmiller

Vous utilisez un modèle RocketTheme, et je vois qu’il existe déjà un fichier custom.css.

templates/rt_chimera/css/rt_chimera-custom.css

Le css suivant est un exemple que vous pouvez utiliser comme base de départ pour donner la mise en page souhaitée sur cette page. Placez ce code à la fin de votre fichier 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

Votre modèle contient peut-être une option plus claire, mais vous pouvez ajouter les lignes suivantes à votre code 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;
    }

Assurez-vous que ce CSS est chargé après votre CSS de fournisseurs de modèles

1
jdog

Comme le fond gris à rayures semblait étrange dans un format à deux colonnes, j'ai ajouté ceci pour le supprimer en conservant le survol:

.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;
}

Merci encore!

0
timmiller