How Can I center-text on List View Only?

[greasemonkey]

Calling all bootstrap experts....

 

How can I center the following on list view only????

$prod_list_contents .= '       <div class="col-xs-6 text-right">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';

With an IF statement I'm sure.... but I can't for the life of me figure out what the variable is????

if ?????? {
$prod_list_contents .= '       <div class="col-xs-6 text-center">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';
}else{
$prod_list_contents .= '       <div class="col-xs-6 text-right">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';

[greasemonkey]

 

Calling all bootstrap experts....

 

How can I center the following on list view only????

$prod_list_contents .= '       <div class="col-xs-6 text-right">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';

With an IF statement I'm sure.... but I can't for the life of me figure out what the variable is????

if ?????? {
$prod_list_contents .= '       <div class="col-xs-6 text-center">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';
}else{
$prod_list_contents .= '       <div class="col-xs-6 text-right">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';

 For now I've edited to;

     $prod_list_contents .= '        <div class="col-xs-12 col-sm-6 text-right text-center-xs ">' . tep_draw_form('buy_now', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id='. $listing[$x]['products_id'], $request_type), 'POST') . tep_draw_input_field('buyqty', '1', 'style="width:44px;text-align:center;"', 'tel') . ' ' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', NULL, NULL, NULL, 'btn-success btn-md') . '</form></div>';

Which at least gives me center on small device... however I was hoping to separate grid and list view - if possible?

[♥Tsimi]

If i remember right there is a class for grid and list. I used this several times to align stuff different in grid view.

I will be soon at the office then i can take a look at it.

[♥Tsimi]

@@greasemonkey

 

Hi Scott

 

So no now I am at the office starting my brain with some coffee and looking at the product_listing.php file.

 

I am not sure how your product listing looks like but I have this for example inside the GOLD version

$prod_list_contents .= '<div class="item list-group-item col-sm-4">';

list-group-item is the class for, as the name says, list view. So if you want to have the product name centered in the list view you could add something like this inside your user.css

.list-group-item .list-group-item-heading {
 text-align: center;
}

lets say you want to do the same but opposite only for grid view then you add this.

.grid-group-item .list-group-item-heading {
  text-align:center;
}

list-group-item and grid-group-item are the classes for each view. Those are used by the grid/list header tags module.

So first you choose for which view by adding one of those and then you add additional the next class which in our example is .list-group-item-heading for the name.

Make sense?

[♥Tsimi]

Sorry Scott I just saw you gave an example code.

So in your case add a new class to the button code for example button-listing.

$prod_list_contents .= '       <div class="col-xs-6 text-right button-listing">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm') . '</div>';

then add this to your css.

.list-group-item .button-listing {
 text-align: center;
}

[greasemonkey]

@@Tsimi that works... However I think I've asked the "wrong questions".

 

I've got to look at this again.

 

I think, however, what I'm looking for is a different col- width dependent on grid or list.

 

Make sense?

 

So grid col-sm-12

 

And List col-sm-6

[♥Tsimi]

@@greasemonkey

 

I see...then try this.

 

Add or keep if you already added the class button-listing and add this to your user.css

@[member=media] (min-width: 768px) {
.grid-group-item .button-listing {
  text-align: center;
  width: 100%;
}

.list-group-item .button-listing {
  text-align: right;
  width: 50%;
}
}

this is for sm view only. If you want to change the xs view then you have to copy and paste this code and remove the media code part. For md view use min-width: 992px and for lg view use min-width: 1200px.

[greasemonkey]

@@Tsimi thanks so much!.... did I over complicate this or what!

 

Here's the final solution.... To center the price and buy now button on grid view only;

 

user.css

/*center price and buy now on grid view only*/
.grid-group-item .button-listing {
  text-align: center;
  width: 100%;
}

And add the button-listing class to the product listing price and buy now button

<div class="col-xs-6 button-listing">

<div class="col-xs-6 text-right button-listing">