4images Forum & Community

4images Modifications / Modifikationen => Templates & Styles (Requests & Discussions) => Topic started by: cch on July 17, 2012, 07:58:39 PM

Title: Replace Download Button
Post by: cch 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 :)

Title: Re: Replace Download Button
Post by: nobby 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

Title: Re: Replace Download Button
Post by: cch 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?

Title: Re: Replace Download Button
Post by: nobby on July 17, 2012, 09:24:57 PM

Quote from: cch 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?

css code does not belong in php  :wink:

Title: Re: Replace Download Button
Post by: cch 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?

Title: Re: Replace Download Button
Post by: Rembrandt 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 (http://test.vienna-pictures.com/index.php)
mfg Andi

Title: Re: Replace Download Button
Post by: cch on July 18, 2012, 08:45:56 AM

Didn't work???

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

Title: Re: Replace Download Button
Post by: Rembrandt on July 18, 2012, 08:47:28 AM

sorry, my mistake, i have edit my post above...

Title: Re: Replace Download Button
Post by: cch 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.

Title: Re: Replace Download Button
Post by: Rembrandt 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

Title: Re: Replace Download Button
Post by: cch 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?

Title: Re: Replace Download Button
Post by: Rembrandt on July 19, 2012, 05:23:12 AM

Quote from: cch on July 18, 2012, 11:31:39 PM

.. 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;
}


Title: Re: Replace Download Button
Post by: cch on July 19, 2012, 09:03:00 AM

Awesome thanks :)