Author Topic: Replace Download Button  (Read 14283 times)

0 Members and 1 Guest are viewing this topic.

Offline cch

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Replace Download Button
« on: July 17, 2012, 07:58:39 PM »
Hey guys

Can someone help me change the download button for a CSS3 button?

Here's the CSS, wasn't sure if you needed to look at it or not:

Code: [Select]
button.minimal {
  background: #e3e3e3;
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px;
}

button.minimal:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer;
}

button.minimal:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000;
}

Once I place that in my style.css file it says use <button class="minimal">Download</button>

I've tried to change the code in the functions.php but I'm not very good with php.

Any help will be great :)

Offline nobby

  • 4images Guru
  • *******
  • Posts: 2.873
    • View Profile
Re: Replace Download Button
« Reply #1 on: July 17, 2012, 08:30:13 PM »
Hi,

<button class="minimal">Download</button>

you inflict this line in the html one where the button should appear.

see Appendix

Offline cch

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: Replace Download Button
« Reply #2 on: July 17, 2012, 09:08:46 PM »
I'm not sure about this, shouldn't I do something to the download_button code in the functions.php file?

Offline nobby

  • 4images Guru
  • *******
  • Posts: 2.873
    • View Profile
Re: Replace Download Button
« Reply #3 on: July 17, 2012, 09:24:57 PM »
I'm not sure about this, shouldn't I do something to the download_button code in the functions.php file?

css code does not belong in php  :wink:

Offline cch

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: Replace Download Button
« Reply #4 on: July 17, 2012, 10:24:42 PM »
Here's what I have in my thumbnail_bit.html file:

Code: [Select]
<!-- you wish detail page in a small javascript open window, use {thumbnail_openwindow} -->
<table align="left"><td valign="top" width="125px">{thumbnail}</td>
<td valign="top"><b>Part:</b> {image_subname}<br />
<b>Downloads:</b> {image_downloads}<br />
<b>Dimensions:</b> {width} x {height}px<br />
<b>Uploaded:</b> {cat_date} by {user_name_link}<br />
<b>Filesize:</b> {image_file_size}<br />
<button class="minimal">Download</button></a></td>
</table>

The CSS3 button shows but no link to download the image?

Rembrandt

  • Guest
Re: Replace Download Button
« Reply #5 on: July 18, 2012, 08:30:09 AM »
insert in your in thumbnail_bit:
Code: [Select]
{download_button}
search in categories.php:

$site_template
->register_vars("thumbnails"$thumbnails);

and replace:

$site_template
->register_vars(array(
"thumbnails"=>$thumbnails,
"download_button"=>$download_button
));


Demo
mfg Andi
« Last Edit: July 18, 2012, 08:51:49 AM by Rembrandt »

Offline cch

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: Replace Download Button
« Reply #6 on: July 18, 2012, 08:45:56 AM »
Didn't work???

Still no link to download the image via the new CSS3 button.

Rembrandt

  • Guest
Re: Replace Download Button
« Reply #7 on: July 18, 2012, 08:47:28 AM »
sorry, my mistake, i have edit my post above...

Offline cch

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: Replace Download Button
« Reply #8 on: July 18, 2012, 12:57:56 PM »
Still no working, on your testing 4images it shows the download button, I want to replace that totally with a CSS3 button, not an image.

Rembrandt

  • Guest
Re: Replace Download Button
« Reply #9 on: July 18, 2012, 03:33:37 PM »
"<button>" works in a "<Form>", but you can style a link as "button".

1.) search in categories.php:

show_image
($image_row);

insert below:

    $target 
= (!empty($image_row['image_download_url']) && !is_remote_file($image_row['image_download_url']) && !is_local_file($image_row['image_download_url'])) ? "target=\"_blank\"" "";
    
$download_butt "<a class=\"minimal\" href=\"".$site_sess->url(ROOT_PATH."download.php?".URL_IMAGE_ID."=".$image_row['image_id'])."\"".$target.">Download</a>";
    
$site_template->register_vars("download_butt",$download_butt);

for the "new images" repeat step 1.) in index.php.

2.) in your thumbnail_bit.html, insert:
Code: [Select]
{download_butt}
important not "download_button"!

3.) in your style.css, insert:
Code: [Select]
.minimal {
  border: 2px outset #555555;
  background:url(images/spacer.gif);height:24px; background-repeat:repeat-x;
  text-decoration:none;
  border: 1px solid #bbb;
  color: #333;
  background-color: #e3e3e3;
  font-weight: bold;
  font-size:  12px;
  font-family: helvetica neue, helvetica, arial, sans-serif;
  padding: 8px 9px;
 
  text-shadow: 0 1px 0 #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
}

.minimal:hover {
    background:url(images/spacer.gif);height:24px; background-repeat:repeat-x;
    background-color: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer;
}

.minimal:active {
 border: 2px inset #999999;
 background:url(images/spacer.gif);height:24px; background-repeat:repeat-x;
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000;
}

mfg Andi

Offline cch

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: Replace Download Button
« Reply #10 on: July 18, 2012, 11:31:39 PM »
Thank you very much :D

One thing tho, if I change some of the CSS the changes don't show? I wanted to change the width of the button and add margin but it isn't showing?

Rembrandt

  • Guest
Re: Replace Download Button
« Reply #11 on: July 19, 2012, 05:23:12 AM »
.. I wanted to change the width of the button and add margin but it isn't showing?

no "margin" , set "padding" and "line-height".
example:
Code: [Select]
.minimal {
  border: 2px outset #555555;
  background:url(images/spacer.gif);
  background-repeat:repeat-x;
  text-decoration:none;
  border: 1px solid #bbb;
  color: #333;
  background-color: #e3e3e3;
  font-weight: bold;
  font-size:  12px;
  font-family: helvetica neue, helvetica, arial, sans-serif;
  padding: 8px 50px;
  line-height:34px;
 
  text-shadow: 0 1px 0 #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
}

.minimal:hover {
  background:url(images/spacer.gif);
  background-repeat:repeat-x;
  background-color: #d9d9d9;
  color: #222;
  cursor: pointer;
  font-weight: bold;
  font-size:  12px;
  font-family: helvetica neue, helvetica, arial, sans-serif;
  padding: 8px 50px;
  line-height:34px;
  -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
  -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
  box-shadow: inset 0 0 1px 1px #eaeaea;
}

.minimal:active {
  border: 2px inset #999999;
  background:url(images/spacer.gif);
  background-repeat:repeat-x;
  background-color: #d0d0d0;
  color: #000;
  font-weight: bold;
  font-size:  12px;
  font-family: helvetica neue, helvetica, arial, sans-serif;
  padding: 8px 50px;
  line-height:34px;
  -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
  -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
  box-shadow: inset 0 0 1px 1px #e3e3e3;
}

Offline cch

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: Replace Download Button
« Reply #12 on: July 19, 2012, 09:03:00 AM »
Awesome thanks :)