Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Ultimate Buttons


npn2531

Recommended Posts

This contribution, http://addons.oscommerce.com/info/7307 , replaces the several dozen individual buttons with a single image, (or no image, if pure CSS styling is preferred), and converts buttons to CSS. Buttons can be given 'hovering' and 'rollover' effects, and automatically resize to fit text. Eliminates the need to reproduce an entire set of buttons every redesign.

 

Download file contains CSS and images for 5 different button styles. Screenshots, instructions and links to examples also included.

 

Installation consists of two code replacements in includes/functions/html_output.php, uploading the two images to the images folder, and pasting the CSS selectors into stylesheet.css.

 

You can also create your own images for buttons, or adapt an existing button. Google 'CSS buttons' and 'sliding doors technique' for the basic process. Essentially you create the button image without text. Then cut the image into a left and right hand side. Then upload these two images to the images folder and adjust the CSS in the stylesheet to set the padding and text styling. The button adjusts to text + padding by hiding varying widths of the left hand side 'under' the div tag containing the right hand side of the button.

 

see screenshots at and details at:

http://www.niora.com/oscommerce-ultimate-buttons.php

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

This contribution, http://addons.oscommerce.com/info/7307 , replaces the several dozen individual buttons with a single image, (or no image, if pure CSS styling is preferred), and converts buttons to CSS. Buttons can be given 'hovering' and 'rollover' effects, and automatically resize to fit text. Eliminates the need to reproduce an entire set of buttons every redesign.

 

Download file contains CSS and images for 5 different button styles. Screenshots, instructions and links to examples also included.

 

Installation consists of two code replacements in includes/functions/html_output.php, uploading the two images to the images folder, and pasting the CSS selectors into stylesheet.css.

 

You can also create your own images for buttons, or adapt an existing button. Google 'CSS buttons' and 'sliding doors technique' for the basic process. Essentially you create the button image without text. Then cut the image into a left and right hand side. Then upload these two images to the images folder and adjust the CSS in the stylesheet to set the padding and text styling. The button adjusts to text + padding by hiding varying widths of the left hand side 'under' the div tag containing the right hand side of the button.

 

see screenshots at and details at:

http://www.niora.com/oscommerce-ultimate-buttons.php

 

Cool one...

 

May be I'll use this on my next osc project..

 

Thanks..

 

ahmad

Link to comment
Share on other sites

Thank you for your contribution, works almost correct.

 

I have an issue with the alignment of the buttons.

All seem to be aligned to the left. The old buttons where centered.

I tried to change the CSS code but my knowledge of CSS.....

 

Appreciate your help.

Link to comment
Share on other sites

In the CSS, adjust the margins of the selector '.buttons'.

 

.buttons {
   background: transparent url('images/button_right.png') no-repeat scroll top right;
   color: #4B4B4B; /*use #F8F8F8 for appleblue, darkgray buttons  */
   display: block; 
   float: left;
   font-weight: normal;
   font-family: Arial, Helvetica, san-serif;
   font-size: 12px;  
   margin: 0px 6px 0px 0px; /* margins entire button */
   padding-right:10px;  /* overlap of left image on right image  */
   border: none;
   }

 

after margin you see 0px 6px 0px 0px. Thats: 'top' 'right' 'bottom' 'left'. The '6' is adding 6px of space on the right. To add 5px space to the left of the button, change the last '0px' to '5px'.

Edited by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

thank you for your reply.

Your solution is partially working, the buttons indeed moved to the right when increasing the value.

Buttons although disappear not "centered" everywhere in the shop.

I tried a "center" align in the <div> but no results.

If you want a screenshot, I can send it to you (I don't know if I can make a tinyurl link to this forum)

Link to comment
Share on other sites

You can also in '.buttons' on the stylesheet try replacing:

 

 margin: 0px 6px 0px 0px; 

 

 

with:

 

 

 margin-left: auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px:

Edited by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

  • 2 weeks later...

There might be an issue regarding centering buttons of unknown width within an area of unknown width

 

Here are 2 solutions, meant for a complete menu, but easily to apply also on a single button or a set of 2 buttons

 

1) Centre widthless floats and one more example

2) Centering Float Left Menus

 

I liked the first one more, so I wrap each button that I need to have centered into any area (or set of buttons) into 2 divs (outer and inner) that look as follows

.butflC {float:right;position: relative;left:-50%;} /* outer */
.butflCr {position: relative;left:50%;} /* inner */

 

This is working for Safari, FF and opera, I don't have a IE available right now to check, maybe some additional adjustment will be necessary

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...
  • 2 weeks later...

hi,

 

looks great,

install went perfect but when i choose matteblue and use according css included in contrib i get problem when i click e.g. on my account

the 'continue' button for a customer that wants signing in is showing a gap

Link to comment
Share on other sites

I am trying to get my site to validate now, the only outstanding issue is the buttons.

 

It is saying you can't have an block level element inside an inline element.

 

E.G

 

<a href"mylink.html><div class="buttons><span>Continue</span></div></a>

 

Any ideas please?

Link to comment
Share on other sites

  • 4 months later...

have been fiddling around with the sliding door buttons and now have it working in Mozilla, IE, Safari, Chrome.

 

First, I made longer background images (280px and a 10px) otherwise my buttons with a longer text were ripped apart in IE.

 

Am attaching my css for the buttons (BUT REMEMBER, MINE ARE LONGER THAN THE ORIGINAL ONES).

 

This article was of great help: My link

 

/* ultimate buttons, modified */


.buttons {
background: transparent url('images/button2_right_10px.gif') no-repeat scroll top right;
color: #000000; 
display: block; /*so whole element is fully clickable*/
float: left; /*span part will float up beside it and push it out*/
font-style: normal; /*vs italic*/
font-size: 0.85em;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
padding-right:10px; /* overlap of left image on right image: ((right-image-size)-(padding of span) - 1px), now text is centered*/
border: none;
overflow: visible; /*button stays in table-element in IE*/
margin-top: 6px; /*this aligns the submit button with the others*/
margin-right: 6px; /* without this, right button not displayed */
margin-bottom: 3px;
margin-left: 3px;
text-decoration: none;
}

.buttons span { background: transparent url('images/button2_left_280px.gif') no-repeat;
display: block;
padding: 3px 0px 6px 10px; /*positions text in button and shows all of button, check across browsers, so everything is displayed in all browsers*/
text-decoration: none;
border: none;
}

.buttons:hover {
color: #000000; 
cursor: pointer;
text-decoration: underline;
}

.buttons_submit {
background: transparent url('images/button2_left_280px.gif') no-repeat;
font-style: normal; /*vs italic*/
font-size: 0.95em;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #000000; 
display: block;
float:left;
padding: 3px 6px 6px 16px; /*positions text in button and shows all of button*/
border:none;
overflow: visible; /*button stays in table-element in IE*/
margin: 0px; /*this is required, otherwise Safari adds a margin by default and you have a line between the two images*/
}



.buttons_submit:hover {
color: #000000; 
cursor: pointer;
text-decoration: underline;
}

Edited by cjb
Link to comment
Share on other sites

  • 1 year later...

I am having problems with this (awesome) contribution when used with MATC (http://addons.oscommerce.com/info/5750)

 

We are using MATC on checkout_shipping as a "Must Accept Shipping Delay" (The implementation is the same as the original MATC) and after I installed Ultimate Buttons, MATC stopped working.

 

MATC has a check box that must be ticked before you can continue with checkout. The text above the tick box also highlights if you hover over the button without ticking the box. However, after this contribution was installed, both of these features no longer work. In other words, you can continue without ticking the box which doesn't work for us at all as we are manufacturers of our products.

 

I have looked through the Ultimate Buttons code and noticed that there doesn't appear to be a way of passing the 'parameters' back to the calling function. I am no expert, but that is what it looks like to me.

function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {
global $language;
$css_submit = '<div><span><input type="submit" class="button wood2" value="' . tep_output_string($value) . '" /></span></div>';
return $css_submit;
}

 

Can anyone indicate if I am correct or not, and also a potential fix (Without removing Ultimate Buttons!).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...