XF 1.x How did you get the product Manager to arrange in columns?

Russ

Pixel Exit Staff
It's some basic html/CSS adjustment. I need to make some adjustments to it for responsive actually... I'll try to do that in the next few days and post it up.
 

Steve

Pixel Exit Staff
Here, this should be drop in. Template: xenproduct_product_index.css. Based on the default style though.

Code:
.xenTooltip.narrow
{
    max-width: 300px;
}

.productTabHeadings
{
    position: relative;
}

.productTabHeadings .extraLinks
{
    position: absolute;
    right: 0px;
    font-size: 11px;
}

.productTabHeadings .extraLinks .smallButton
{
    position: relative;
    width: 70px;
    height: 19px;
    line-height: 19px;
}

.tabs .ElasticTab
{
    background: transparent;
    border: none;
    font-size: 11px;
    width: 45px;
}

ol.productList.Sortable {
overflow: hidden;
padding-left: 5px;
}

.productListItem
{
    display: inline-block;
    text-align: center;
    word-wrap: normal;
    background-color: @contentBackground;
    border: 1px solid @primaryLighterStill;
    border-radius: 5px;
    margin: 10px 10px 0 0;
    width: 244px;
    box-sizing: border-box;
    vertical-align: top;
}

.productListItem.deleted .deletionNote
{
    font-size: 11px;
    float: left;
    color: rgb(150,0,0);
}

.productListItem .main
{
    width: 165px;
    margin: 0 auto;
}

.productListItem .listBlock
{
    vertical-align: top;
}

.productListItem .listBlockInner
{
    padding: 10px 5px;
    min-height: 134px;
}

.productListItem .posterAvatar
{
    width: 52px;
    vertical-align: top;
    padding: 12px 5px;
}

.productListItem .posterAvatar .avatarContainer
{
    display: block;
    position: relative;
}

.productListItem .posterAvatar .avatar
{
    padding-right: 5px;
    display: block;
    width: 48px;
    height: 48px;
}

.productListItem .posterAvatar .avatar img
{
    width: 48px;
    height: 48px;
    display: block;
}

.productListItem .image
{
    text-align: center;
    max-height: 130px;
}

.productListItem .main .title
{
    font-size: 12pt;
    font-weight: bold;
}

.productListItem .productButtons
{
    margin: 5px 0;
}

.productListItem .main .version
{
    color: @mutedTextColor;
    font-weight: normal;
}

.productListItem .main .productDetails
{
    font-size: 11px;
}

.productListItem .main .featureList,
.productListItem .main .tagLine
{
    font-size: 11px;
    margin-top: .5em;
    display: block;
}

.productListItem .main .tagLine
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.productListItem .main .featureListColumns
{
    font-size: 12px;
}

.productListItem .main .featureListColumns li
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    list-style-type: disc;
    display: list-item;
    list-style-position: inside;
}

.productListItem .productStats
{
    font-size: 11px;
    @property "secondaryContent.background";
    background-color: @primaryLightest;
    @property "/secondaryContent.background";
}

.productListItem .productStats
{
    text-align: center;
}
.productListItem .productStats .listBlockInner
{
    border-top: 1px solid @primaryLighterStill;
}

.productListItem .productStats .price
{
    display: block;
}

.productListItem .productStats .button
{
    display: inline-block;
    margin: 4px;
}

.productListItem .productStats .price
{
    color: @primaryDark;
    font-size: 15pt;
    font-weight: bold;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .productList .listBlock.image
    {
        display: none;
    }

    .Responsive .productBuy .price
    {
        font-size: 12pt;
    }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .listBlock
    {
        display: block;
        width: 100%;
    }

    .Responsive .productInfo
    {
        display: none;
    }

    .Responsive .productStats .listBlockInner
    {
        padding: 5px 2px;
    }

    .Responsive .productTabHeadings .extraLinks
    {
        right: 10px;
        top: -25px;
    }
}
</xen:if>
upload_2016-2-12_20-24-51.png
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.