Post by stafio » Tue Nov 25, 2008 12:09 am

In making the customization of the cart appearance even easier, I think it would be a good idea to add a css class on all buttons throughout the site. The class could be added to the css and left empty for now, making it easy for the users to just add some style information should they wish to change the look of the buttons.

eg.

.button {
}

Perhaps this could be squeezed in for 0.7.9.

Newbie

Posts

Joined
Fri Nov 21, 2008 2:17 am

Post by Qphoria » Tue Nov 25, 2008 12:21 am

it's a good idea, but don't you also need to add class="button" to each button?

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by stafio » Tue Nov 25, 2008 12:52 am

Yes, that would need to be added to each button as well as the css entry.

Newbie

Posts

Joined
Fri Nov 21, 2008 2:17 am

Post by hm2k » Tue Nov 25, 2008 1:42 am

Oh god, you have no idea about this, please don't even get me started...

Just a couple of articles for you to read:

http://www.456bereastreet.com/lab/styli ... it-button/
http://particletree.com/features/redisc ... n-element/

I had all sorts of fun with buttons in a previous project.

In the end, in order to resolve it I had to use the element and have a form per button...

Code: Select all

<form action="admin.php?a=%s" method="POST" style="display: inline;">
      	<input class="inputsubmit" type="submit" id="%s" name="%s" value="%s">
</form>
Fun and games.

if you need help with something more specific we can go from there, but I'm not about to try and fully handle this.

UK Web Hosting


User avatar
Global Moderator

Posts

Joined
Tue Mar 11, 2008 9:06 am
Location - UK

Post by stafio » Tue Nov 25, 2008 3:45 am

I'm just thinking of adding one class that would affect all buttons on the site, nothing too crazy. As Qphoria said, it's just a matter of adding class="button" to each and element. I'm not sure why you would have to add one form per button as you indicated.

Something along the lines of the first example you posted is close to what I'm thinking. It seems a little over complicated though as each button is wrapped in a with the buttons having their own id's. Here's a simplified version, which produces the output seen in the attached .jpg.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Buttons!</title>
	<style type="text/css">
  <!--
    .el01 {width:100%} /* Width */
    .el02 { /* Text and background colour, blue on light gray */
      color:#00f;
      background-color:#ddd;
    }
    .el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
    .el04 {border-width:6px} /* Border width */
    .el05 {border:2px dotted #00f} /* Border width, style and colour */
    .el06 {border:none} /* No border */
    .el07 { /* Different font, background color, text color */
			font-family: "Courier New",Courier; 
			color: #FACD64;
			background: #BC3C1F;
		}
    .el08 {font-size:2em} /* Bigger text */
    .el09 {font-size:0.5em} /* Smaller text */
    .el10 {font-weight:bold} /* Bold text */
    .el11 {padding:1em} /* Increase padding */
    .el12 {text-align:right} /* Change text alignment */
  -->
  </style>
</head>
<body>
	<div style="width: 200px;">
    <input type="button" class="el01" value="el01" />
  	<br><input type="button" class="el02" value="el02" />
  	<br><input type="button" class="el03" value="el03" />	
  	<br><input type="button" class="el04" value="el04" />
  	<br><input type="button" class="el05" value="el05" />
  	<br><input type="button" class="el06" value="el06" />
  	<br><input type="button" class="el07" value="el07" />
  	<br><input type="button" class="el08" value="el08" />
  	<br><input type="button" class="el09" value="el09" />
  	<br><input type="button" class="el10" value="el10" />
  	<br><input type="button" class="el11" value="el11" />							
  	<br><input type="submit" class="el12" value="el12" />
	</div>
</body>
</html>

Attachments

???
buttonStyles.jpg
Last edited by stafio on Tue Nov 25, 2008 4:01 am, edited 1 time in total.

Newbie

Posts

Joined
Fri Nov 21, 2008 2:17 am

Post by Qphoria » Tue Nov 25, 2008 5:07 am

Yea hm2k is just crazy :)

I did some googling and found that it's pretty easy to do if you follow along here

http://www.ampsoft.net/webdesign-l/image-button.html
That site describes how to do it for but it works the same for

I've even got it working on my onepage checkout contrib:

Attachments

???
onepage_imagebutton1.jpg
Last edited by Qphoria on Tue Nov 25, 2008 5:38 am, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am
Who is online

Users browsing this forum: No registered users and 3 guests