Deals 1.1 Template

No problem esposito :)

Regarding the Buy button and cart image, both of them actually not an image. Buy button is just a lines of css code and the Cart graphic is actually a font icons.
So, both of them can be modified via CSS.

For the Buy button, please open file <root>/templates/deals_plazza/css/com_k2.css .
You can modify the look of Buy button by modifying these codes below (line2 975)
.k2deals-buynow_inner a,
.k2deals-buynow_inner a:visited,
.k2deals-buynow_inner-expired p {
    color: #507253!important;
    font-size: 40px!important;
    font-weight: 700!important;
    letter-spacing: -3px!important;
    text-shadow:0 1px 0 #fff!important;
    padding: 10px 20px!important;
    border: 1px solid #737243;
    box-shadow: inset 0px 1px 0px #fff,
    0 0 5px #737243;
    display: block;
    border-radius: 6px;
    background-color: #ffff88;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 136)), to(rgb(226, 225, 121)));
    background-image: -webkit-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
    background-image: -moz-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
    background-image: -o-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
    background-image: -ms-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
    background-image: linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffff88', EndColorStr='#e2e179');
    line-height: normal;
 
}

and for the Cart icon, please open file <root>/templates/deals_plazza/css/icon.css
Replace the code :
.icon-basket:before { content: '\e73d'; } /* '' */
with this one
.icon-basket { your_modification_code_is_here }

Change the part "your_modification_code_is_here" with your own code

Hope this helps :)
11 years 4 months ago #7 by andy

Please Log in or Create an account to join the conversation.

Hi sikumbang. Thanks again for your quick replies. I have really appreciated. I will check now about the button and how it can be customized. I am looking now the file category_item.php and itemp.php on "k2deals-inner-timeleft" and i will like to modify hours countdown as the sample i attach herein. What can i modify? Thanks
11 years 4 months ago #8 by Alfred

Please Log in or Create an account to join the conversation.

Esposito,
In both of files, please find this code (arround lines 112 in category_item.php):
layout: '<span><b>{d<}{dn}</b> {dl} and {d>}'+ '<b>{hn}</b> {hl}, <b>{mn}</b> {ml}, <b>{sn}</b> {sl}</span>'
than change that with this one :
layout: '<span><b>{dn}</b> .'+ '<b>{hn}</b> : <b>{mn}</b> : <b>{sn}</b></span>'
11 years 4 months ago #9 by andy

Please Log in or Create an account to join the conversation.

Hi sikumbang. Thanks for the info. I tried to modify the code as you quoted and it works.

Now the only small bug issue is on the buy button. I tried to change color via css but it works only with IE. In Firefox and chrome color does not change. Could you pls double check?. I clean up also both browser cache to see if it was displaying properly. Thanks
11 years 4 months ago #10 by Alfred

Please Log in or Create an account to join the conversation.

esposito, can you tell me how did you modify the code? Is there any live url to see?
11 years 4 months ago #11 by andy

Please Log in or Create an account to join the conversation.

Hello sikumbang. I quote you below the code i modified:

.k2deals-buynow_inner a,
.k2deals-buynow_inner a:visited,
.k2deals-buynow_inner-expired p {
color: #507253!important;
font-size: 40px!important;
font-weight: 700!important;
letter-spacing: -3px!important;
text-shadow:0 1px 0 #fff!important;
padding: 10px 20px!important;
border: 1px solid #737243;
box-shadow: inset 0px 1px 0px #fff,
0 0 5px #737243;
display: block;
border-radius: 6px;
background-color: #ff7e00;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 136)), to(rgb(226, 225, 121)));
background-image: -webkit-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
background-image: -moz-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
background-image: -o-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
background-image: -ms-linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
background-image: linear-gradient(top, rgb(255, 255, 136), rgb(226, 225, 121));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ff7e00', EndColorStr='#e2e179');
line-height: normal;
}

I changed background-color with #ff7e00 (Orange). Thanks

I can't find where is the cart icon. Thanks
11 years 4 months ago #12 by Alfred

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum