Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
v:2.0:templates [2019/11/28 22:41] – [Minor Styling Customizations] adam | v:2.0:templates [2025/06/03 21:44] (current) – [Minor Styling Customizations] foxybrett | ||
---|---|---|---|
Line 42: | Line 42: | ||
* Add custom content (HTML, JS) to your templates, for custom styles, tracking codes or custom fields on your checkout. | * Add custom content (HTML, JS) to your templates, for custom styles, tracking codes or custom fields on your checkout. | ||
* Enable debug logging to your browsers console. | * Enable debug logging to your browsers console. | ||
- | * Shipping and billing country/ | + | * Shipping and billing country/ |
+ | ==== Minor Language Customizations ==== | ||
+ | |||
+ | Much of the language of the Foxy cart, checkout, and receipt can be modified in the TEMPLATES [[https:// | ||
==== Minor Styling Customizations ==== | ==== Minor Styling Customizations ==== | ||
Using the custom code template setting, it's now possible to add CSS and javascript to your templates //without needing to modify the templates themselves// | Using the custom code template setting, it's now possible to add CSS and javascript to your templates //without needing to modify the templates themselves// | ||
- | You can customize your styling | + | You can customize your styling |
< | < | ||
Line 76: | Line 79: | ||
<code css> | <code css> | ||
- | /* Used within continue shopping button on full-page cart/cart */ | + | /* Used within continue shopping button on full-page cart/checkout |
- | #fc .fa-angle-double-left { | + | #fc .fa-angle-double-left, |
+ | #fc .fc-cancel-continue-shopping svg { | ||
fill: #666; | fill: #666; | ||
} | } | ||
/* Used within continue shopping button on sidecart */ | /* Used within continue shopping button on sidecart */ | ||
- | #fc .fa-caret-left { | + | #fc .fa-caret-left, |
+ | #fc .fc-sidecart-only-fixed .fc-fixed-button-left svg { | ||
fill: #FFF; | fill: #FFF; | ||
} | } | ||
/* Used within top proceed to checkout button on sidecart */ | /* Used within top proceed to checkout button on sidecart */ | ||
#fc .fa-caret-right, | #fc .fa-caret-right, | ||
- | [data-fc-sidecart] #fc .fa-caret-right { | + | [data-fc-sidecart] #fc .fa-caret-right, |
+ | #fc .fc-sidecart-only-fixed .fc-fixed-button-right svg { | ||
fill: #888; | fill: #888; | ||
} | } | ||
/* Used within bottom proceed to checkout button on sidecart and credit card field on tablet/ | /* Used within bottom proceed to checkout button on sidecart and credit card field on tablet/ | ||
- | #fc .fa-lock { | + | #fc .fa-lock, |
+ | #fc-cart .fc-action--checkout--button svg, | ||
+ | #fc .fc-checkout__section--payment svg.fc-svg-icon--lock { | ||
fill: #C1DB9B; | fill: #C1DB9B; | ||
} | } | ||
/* Used within payments section on full-size checkout */ | /* Used within payments section on full-size checkout */ | ||
- | #fc .fa-lock-large { | + | #fc .fa-lock-large, |
+ | #fc .fc-checkout__section--payment svg#fc-icon-lock-large { | ||
fill: #EEE; | fill: #EEE; | ||
} | } | ||
/* Used within remove coupon option */ | /* Used within remove coupon option */ | ||
- | #fc .fa-times-circle { | + | #fc .fa-times-circle, |
+ | #fc .fc-transaction__discounts .fc-action--close svg { | ||
fill: #666; | fill: #666; | ||
} | } | ||
/* Used within shipping fields on sidecart */ | /* Used within shipping fields on sidecart */ | ||
- | #fc .fa-truck { | + | #fc .fa-truck, |
+ | #fc .fc-address-entry svg { | ||
fill: #999; | fill: #999; | ||
} | } | ||
/* Used within tax fields on sidecart */ | /* Used within tax fields on sidecart */ | ||
- | #fc .fa-bank { | + | #fc .fa-bank, |
+ | #fc .fc-address-entry svg { | ||
fill: #999; | fill: #999; | ||
} | } | ||
Line 116: | Line 128: | ||
Use any of the applicable CSS rules above, altering the fill color code to customise as needed. | Use any of the applicable CSS rules above, altering the fill color code to customise as needed. | ||
+ | |||
+ | |||
+ | ==== Common responsive CSS media queries ==== | ||
+ | |||
+ | If you are adding custom styles, you may have a need to apply different styles based on the viewport the user is using. The following are the common media queries we utilise in our default styles to match into similar break points as us. You would just need to use the specific queries here based on your specific style requirements: | ||
+ | |||
+ | <code css> | ||
+ | @media (max-width: 480px) { | ||
+ | |||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | |||
+ | } | ||
+ | @media (min-width: 768px) and (max-width: 991px) { | ||
+ | |||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | |||
+ | } | ||
+ | @media (min-width: 992px) and (max-width: 1199px) { | ||
+ | |||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | |||
+ | } | ||
+ | </ |