- Posts: 29
- Thank you received: 0
Product Page CSS
-
Nick Rains
Inactive member - Topic Author
- Member
Less
More
12 years 5 months ago #20479
by Nick Rains
Product Page CSS was created by Nick Rains
I'm looking for the css section that allows customising of the Product Page colours - specifically the Add to Cart button background colour which I'd like to be red. Can someone point me towards the correct CSS file.
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
12 years 5 months ago #20482
by ivan.milic
Replied by ivan.milic on topic Product Page CSS
css/vm_ecommerce.css
Best use chromes "Inspect element" to see what to change.
Best use chromes "Inspect element" to see what to change.
Please Log in to join the conversation.
-
Nick Rains
Inactive member - Topic Author
- Member
Less
More
- Posts: 29
- Thank you received: 0
12 years 5 months ago #20484
by Nick Rains
Replied by Nick Rains on topic Product Page CSS
Yes, I did that and it seems that it's all specified in the five default styles. I can't change the button colours without changing other elements too.
I'd have to define a Custom style in the template settings, which is a possibility, but I don't really want to go through each individual setting as I'm happy with almost all the colours in Style 4 except the buy button.
Where are the Custom Style settings saved to? Maybe I could copy the Style 4 that I use and call it a Custom Style, then I'd be able to adjust just what I need, not everything.
I'd have to define a Custom style in the template settings, which is a possibility, but I don't really want to go through each individual setting as I'm happy with almost all the colours in Style 4 except the buy button.
Where are the Custom Style settings saved to? Maybe I could copy the Style 4 that I use and call it a Custom Style, then I'd be able to adjust just what I need, not everything.
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
12 years 5 months ago #20488
by ivan.milic
Replied by ivan.milic on topic Product Page CSS
css generated code for button is in template_css.php (using template parameters):
#product-tabs li a.current,#product-tabs li a.current:hover,
#product-tabs .nav li a:hover, #product-tabs .nav li a:focus,
span.addtocart-button input.addtocart-button, span.addtocart-button input.notify-button,
span.addtocart-button input.addtocart-button:hover, span.addtocart-button input.notify-button:hover {
background: -webkit-gradient(linear, 0 0, 0 bottom, from(<?php echo $vmTabActiveBgStart; ?>), to(<?php echo $vmTabActiveBgEnd; ?>));
background: -moz-linear-gradient(<?php echo $vmTabActiveBgStart; ?>, <?php echo $vmTabActiveBgEnd; ?>);
color: <?php echo $vmTabActiveColor; ?> !important;
background: linear-gradient(<?php echo $vmTabActiveBgStart; ?>, <?php echo $vmTabActiveBgEnd; ?>);
-pie-background: linear-gradient(<?php echo $vmTabActiveBgStart; ?>, <?php echo $vmTabActiveBgEnd; ?>);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='<?php echo $vmTabActiveBgStart; ?>', endColorstr='<?php echo $vmTabActiveBgEnd; ?>');
position:relative;
}
also see htis file:
components/com_virtuemart/assets/css/vmsite-ltr.css
#product-tabs li a.current,#product-tabs li a.current:hover,
#product-tabs .nav li a:hover, #product-tabs .nav li a:focus,
span.addtocart-button input.addtocart-button, span.addtocart-button input.notify-button,
span.addtocart-button input.addtocart-button:hover, span.addtocart-button input.notify-button:hover {
background: -webkit-gradient(linear, 0 0, 0 bottom, from(<?php echo $vmTabActiveBgStart; ?>), to(<?php echo $vmTabActiveBgEnd; ?>));
background: -moz-linear-gradient(<?php echo $vmTabActiveBgStart; ?>, <?php echo $vmTabActiveBgEnd; ?>);
color: <?php echo $vmTabActiveColor; ?> !important;
background: linear-gradient(<?php echo $vmTabActiveBgStart; ?>, <?php echo $vmTabActiveBgEnd; ?>);
-pie-background: linear-gradient(<?php echo $vmTabActiveBgStart; ?>, <?php echo $vmTabActiveBgEnd; ?>);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='<?php echo $vmTabActiveBgStart; ?>', endColorstr='<?php echo $vmTabActiveBgEnd; ?>');
position:relative;
}
also see htis file:
components/com_virtuemart/assets/css/vmsite-ltr.css
Please Log in to join the conversation.
-
Nick Rains
Inactive member - Topic Author
- Member
Less
More
- Posts: 29
- Thank you received: 0
12 years 5 months ago #20491
by Nick Rains
Replied by Nick Rains on topic Product Page CSS
Thanks for the quick reply. The actual fill colours for the button appear to be defined in the five standard template styles PHP files and affect other elements too. None of the CSS that I can see defines the colours and Chrome Inspect Element points towards the actual page URL rather than a CSS file.
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
12 years 5 months ago #20493
by ivan.milic
Replied by ivan.milic on topic Product Page CSS
background comes form template_css.php definition
Please Log in to join the conversation.
Time to create page: 0.168 seconds