bigbird_3156 Posted December 10, 2014 Share Posted December 10, 2014 Hi, I'm trying to put a gap between the three buttons on the header of my site. Ive been able to add css that allows a gap between them, but the gap is about 10px regardless of how I change the settings... I only want 2 or 3 px .... this is what I've done in header: echo tep_draw_button( HEADER_TITLE_MY_ACCOUNT , 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL')) . '<a class="button_gap">' . tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) . '</a>' . '<a class="button_gap">' . tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) . '</a>'; and this is the css .button_gap { border: none; padding: 2px; } Ive also tried margin-right: 2px; but it seems to make no difference.... if I don't have the border: none; line in then I get a border around the gap box the same as the border of the button - but if I use the border: none command then I loose the border on the right side of the actual button as if the button is being overlapped by the gap (if that makes sense). Obviously I have missed the point somewhere... can anyone help? Link to comment Share on other sites More sharing options...
auzStar Posted December 10, 2014 Share Posted December 10, 2014 @@bigbird_3156 Hi Peter, The class info needs to be sent to the function that draws the button via the params parameter. If that makes sense. Try this: echo tep_draw_button(HEADER_TITLE_MY_ACCOUNT , 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'), 'secondary', array('params' => 'class="button_gap"')) . tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART), 'secondary', array('params' => 'class="button_gap"')) . tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'secondary', array('params' => 'class="button_gap"')); css: .button_gap { margin-left: 2px; } cheers :santa: My Add-onsAdvanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download SupportAjax Product Listing for osC 2.3.4 (bootstrap) Download SupportCategory New Products Carousel for osC 2.3.4 (bootstrap) Download SupportCategory Popular Products Carousel for osC 2.3.4 (bootstrap) Download SupportCustomer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportFront Page New Products Carousel for osC 2.3.4 (bootstrap) Download SupportIndex Nested - Product Listing for osC 2.3.4 (bootstrap) Download SupportMatch Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download SupportModular Category Page for osC 2.3.4 (bootstrap) Download SupportNEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download SupportNEW Equal Height Module for osC 2.3.4 (bootstrap) Download SupportProducts Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download SupportTwitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportUpcoming Products Modules for osC 2.3.4 (bootstrap) Download Support Assisted Add-onsScroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support Bootstrap Add-ons created by other membersosCommerce Bootstrap Addons and Code Link to comment Share on other sites More sharing options...
bigbird_3156 Posted December 10, 2014 Author Share Posted December 10, 2014 @@auzStar Thanks for that, but I applied what you sent me, and it did nothing, as in the buttons are flush up against each other like they were originally. I put some extreme values in the css to make sure (20px etc) and it made no difference. Link to comment Share on other sites More sharing options...
♥kymation Posted December 10, 2014 Share Posted December 10, 2014 This code in includes/header.php creates a jQuery buttonset out of those three buttons. <script type="text/javascript"> $("#headerShortcuts").buttonset(); </script> Remove that and the buttons will separate. You may need to add more separation to make them look good. Regards Jim See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
auzStar Posted December 10, 2014 Share Posted December 10, 2014 Thanks @@kymation, Forgot about the jquery code. Works once that is removed. Should have tested first. :thumbsup: @@bigbird_3156 Still use the code I provided above. You shouldn't be wrapping buttons with the <a> tag. cheers My Add-onsAdvanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download SupportAjax Product Listing for osC 2.3.4 (bootstrap) Download SupportCategory New Products Carousel for osC 2.3.4 (bootstrap) Download SupportCategory Popular Products Carousel for osC 2.3.4 (bootstrap) Download SupportCustomer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportFront Page New Products Carousel for osC 2.3.4 (bootstrap) Download SupportIndex Nested - Product Listing for osC 2.3.4 (bootstrap) Download SupportMatch Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download SupportModular Category Page for osC 2.3.4 (bootstrap) Download SupportNEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download SupportNEW Equal Height Module for osC 2.3.4 (bootstrap) Download SupportProducts Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download SupportTwitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportUpcoming Products Modules for osC 2.3.4 (bootstrap) Download Support Assisted Add-onsScroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support Bootstrap Add-ons created by other membersosCommerce Bootstrap Addons and Code Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.