3

I'd love to know how I can create Joomla tags in two columns.

Example of what I have: http://visualedgehosting.com/dfw-chimera/leadership/

Appreciate any help in advance,

1

You are using a RocketTheme template, and I see there is already a custom.css file.

templates/rt_chimera/css/rt_chimera-custom.css

The following css is an example you can use as starting base, to give the layout you want on that page. Place this code, at the end of your rt_chimera-custom.css file.

.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;
}
  • @timmiller: You are welcome. Glad if that helped. – FFrewin Sep 2 '15 at 14:09
1

There may be some clearer option in your template, but you could add the following lines to your 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;
    }

Make sure this CSS is loaded after your template providers CSS

0

Since the striped grey background looked strange in a two column format, I added this to remove it retaining the hover:

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

Thanks again!

  • Ok - well done. However keep in mind that this can not be considered as an answer to your question, as it is not answering the question of how to create 2 columns layout. Any other stylish details are irrelevant to the initial question. This answer would fit to a question on how to remove the undesired hover effect from 2 columns layout. As for the answers above, consider to vote up any of those that helped you, or even select one that solved your question. – FFrewin Sep 2 '15 at 14:06
  • Ah. Roger that. Will do so in the future. Thanks again. – timmiller Sep 3 '15 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.