Grid View Question

[phi148]

Does anyone know how to show the product model number and also manufacturer in the "grid view".

They show in the list view, but I'd also like them in the grid view.

I believe this may require just CSS changes and not PHP...

Help!

[BrockleyJohn]

The stuff that only displays in list is hidden in grid by this rule:

.grid-group-item .list-group-item-text {
    display: none;
}

If you set display for the whole of this class you will also see description in grid.

To pick off individual bits to show, you'll need to be more specific, eg. for model

.dl-horizontal.list-group-item-text {
    display: block;
}

in your user.css

But if that ends up showing other stuff that you didn't want to, you'll have to add something so you can target it exactly. Either a simple change to the php that outputs the grid, or a fancy bit of javascript that avoids you changing core code.

[burt]

user.css

.grid-group-item .list-group-item-text { display: block; }
.grid-group-item p.list-group-item-text { display: none; }

should do it.

[phi148]

Thanks so much guys.  Huge help!

[♥JcMagpie]

I want to have the model number of the product display from the left on both list and grid. At the moment it just floats around in the middle and looks lost!

The model text is achived by changing text-align to left, But the actual part number is proving stubborn? Unable to get it to move over, anyone know the right css for this?

.dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

 

[♥JcMagpie]

ok manged to get both working with this in browser but not in user.css?

.dl-horizontal dt {
    float: left;
    width: 60px;
    clear: left;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
    
    
.dl-horizontal dd {
    margin-right: 180px;}

[burt]

You need to re-implement the following file in a better way, as this file is problematic.

By re-implement I mean change the HTML for each product to include bootstrap code;

<div class="row">
  <div class="col-sm-4">image</div>
  <div class="col-sm-8">description<br>dt list</div>
  <div class="col-xs-6">View Button</div>
  <div class="col-xs-6">Buy Button</div>
</div>
  
  

Something like that anyway.  Experiment until it looks as you want it in both list and grid view.

[♥JcMagpie]

Sorry was me just beeing stupid! CSS change did work but I had 2 sites open was changing one and looking at the other!! Looks fine in both grid and list.