| Author |
 Topic  |
|
Andy
Administrator
95440 Posts |
 Posted - 10/25/2018 : 07:04:22
|
ECT Version 7.0.1 is packed with goodies and we've put up some examples on our demo store of some css formatting that is now possible with the new classes made available
http://ectwp.com/product/Clothes-with-options
We'll add tutorials for each over the coming days but they are all css based and really pretty simple to set up. Each product now has its own css class based on the product reference and each of the options has a class you can define yourself. Click on the "Details" links on the page above to see some examples of some css option formatting we have added to show what can be done. We've probably only scratched the surface here of what can be achieved.
Please Note for Product Option Displays
Internet Explorer and Edge don't support background properties for radio buttons
We have set up these example so they degrade nicely in both but please check the results yourself
Check the browser stats here for a guide to browser usage https://www.w3schools.com/browsers/default.asp
Andy
Please feel free to review / rate our software |
|
Andy
Administrator
95440 Posts |
Posted - 10/25/2018 : 08:20:31
|
Image Overlays CSS
Example of overlays with text "New" http://ectwp.com/product/Clothes-with-options
The CSS
.pinktop2 div.prodimage{
position:relative;
}
.pinktop2 div.prodimage::after
{content: 'NEW';
position: absolute;
font: 14px Arial,sans-serif;
letter-spacing: 3px;
left: 6px;
top: 10px;
color:#fff;
background:#E06A1E;
padding:18px 8px;
opacity:0.7;
border-radius:50%;
z-index:10;
transform: rotate(330deg);
-webkit-appearance: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.pinktop2 div.detailimage{
position:relative;
}
.pinktop2 div.detailimage::after
{content: 'NEW';
position: absolute;
font: 14px Arial,sans-serif;
letter-spacing: 3px;
left: 6px;
top: 10px;
color:#fff;
background:#E06A1E;
padding:18px 8px;
opacity:0.7;
border-radius:50%;
z-index:10;
transform: rotate(330deg);
-webkit-appearance: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
The CSS explained for the product page
.pinktop2 div.prodimage{
position:relative;
}
pinktop2 is the product id so we are focusing on the product image div for just the product "Ladies Pink Top New". The position is set to relative so the overlay can be absolutely positioned in relation to the div.
content: 'NEW'; <- The text to display
position: absolute; <- Position the text absolutely
font: 14px Arial,sans-serif; <- Font size and family
letter-spacing: 3px; <- Optional space between letters
left: 6px; <- Position from the left of the div
top: 10px; <- Position from the top of the div
color:#fff; <- Color of the text
background:#E06A1E; <- Background of the overlay
padding:18px 8px; <- Padding around the text
opacity:0.7; <- Give it some transparency in case it covers part of the image
border-radius:50%; <- Make it round
z-index:10; <- Make sure it sites on top of the image / div
transform: rotate(330deg); <- Bit of rotation (optional)
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); <- Bit of shadow on the text
For the detail page use .pinktop2 div.detailimage{
If you want to use multiple products, separate them with a comma eg
.pinktop2 div.prodimage::after, .pinktop3 div.prodimage::after{
If your product id starts with a number such as ours here https://www.ecommercetemplates.com/responsive-design-ecommerce.asp you can't normally define a class but there is a workaround.
In this case the product id is 0003rd00grb0090 so we use a kind of "escape"
.\30 003rd00grb0090 div.detailimage
Image overlays using an image
Example: http://ectwp.com/Multiple-Colors
Use the following css for the detail and product pages
.multiples div.detailimage{
position:relative;
}
.multiples div.detailimage::after
{background: url(../colours/onsale.png) no-repeat;
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
.multiples div.prodimage{
position:relative;
}
.multiples div.prodimage::after
{background: url(../colours/onsale.png) no-repeat;
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left:0;
}
Andy
Please feel free to review / rate our software |
 |
|
Andy
Administrator
95440 Posts |
Posted - 10/25/2018 : 09:04:54
|
Format individual elements per product
As the product and detail pages now have a global class assigned, based on the product id, you can change elements on the individual product page via the css An obvious example is the overlay above but you can do other things.
Here are a couple of example from http://ectwp.com/Pattern-Swatch
Change the In Stock label just for this product
.patternswatch .detailinstocklabel::after
{content: ' Patterns:';}
...where .patternswatch is the product id and detailinstocklabel is the css class we are identifying. Use ::before to place the text before the label eg for the price
.patternswatch .detailprice strong::before
{content: 'Sale ';}
Remove the product option label on just this product as it's not required, the swatches are self-explanatory
.patternswatch .detailoptiontext{display:none;}
Andy
Please feel free to review / rate our software |
|
|
Andy
Administrator
95440 Posts |
Posted - 10/26/2018 : 00:53:19
|
Use button style radio options
Example: http://ectwp.com/Ladies-Pink-Top-New
Please Note - the display in Internet Explorer and Edge will be different so please remember to check the display in those browsers too.
In your admin product option page select New Option and make it a radio button
Enter the options you want to display
Set two classes for each option as one can be used globally (csssize) and one unique per option (size12 etc)
Add the following css to your css file
div.csssize span{display:none}
div.csssize input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #eee;
color: #666;
top: 0px;
padding:20px 30px;
border-radius: 4px;
cursor: pointer;
margin-right: 7px;
outline: none;
border:1px solid #ccc;
}
div.csssize input::before
{ position: absolute;
font: 13px/1 Arial, sans-serif;
left: 7px;
top: 15px;
color:#000;
}
div.csssize input:hover
{
background-color: #fff;
}
div.csssize input:checked
{
background-color: #ccc;
}
div.size12 input::before
{content: 'Size 12';}
div.size14 input::before
{content: 'Size 14';}
div.size16 input::before
{content: 'Size 16';}
.pinktop2 .detailoptiontext{display:none;}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
div.csssize span{display:inline}
}
@supports (-ms-accelerator:true) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
@supports (-ms-ime-align:auto) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
_:-ms-lang(x), _:-webkit-full-screen, .headerClass{
div.csssize span{display:inline;}
div.csssize input{padding:6px;background:#fff}
}
doesnotexist:-o-prefocus, div.csssize span{display:inline;}
doesnotexist:-o-prefocus, div.csssize input{padding:6px;background:#fff}
The classes explained
div.csssize span{display:none} <- Remove individual option label
div.csssize input <- Style the button appearance
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #eee;
color: #666;
top: 0px;
height: 40px;
width: 60px;
border-radius: 4px;
cursor: pointer;
margin-right: 7px;
outline: none;
border:1px solid #ccc;
}
div.csssize input::before <- Format the text in the button
{ position: absolute;
font: 13px/1 Arial, sans-serif;
left: 7px;
top: 15px;
color:#000;
}
div.csssize input:hover <- Set the background for the hover state
{
background-color: #fff;
}
div.csssize input:checked
{
background-color: #ccc; <- Set the background for the checked state
}
div.size12 input::before
{content: 'Size 12';} <- Set the text to display in the button
div.size14 input::before
{content: 'Size 14';} <- Set the text to display in the button
div.size16 input::before
{content: 'Size 16';} <- Set the text to display in the button
.pinktop2 .detailoptiontext{display:none;} <- Hide the main product option text label where in this case pinktop2 is the product id where the options are shown
Check if using Internet Explorer or Edge or Opera and display accordingly
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
div.csssize span{display:inline}
}
@supports (-ms-accelerator:true) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
@supports (-ms-ime-align:auto) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
_:-ms-lang(x), _:-webkit-full-screen, .headerClass{
div.csssize span{display:inline;}
div.csssize input{padding:6px;background:#fff}
}
doesnotexist:-o-prefocus, div.csssize span{display:inline;}
doesnotexist:-o-prefocus, div.csssize input{padding:6px;background:#fff}
Andy
Please feel free to review / rate our software |
|
|
Andy
Administrator
95440 Posts |
Posted - 10/26/2018 : 01:31:17
|
CSS product option color swatches
Example: http://ectwp.com/Color-Swatch
Please Note, the display on Internet Explorer / Edge will be different as the radio buttons can't be hidden there
In your admin product option page select New Option and make it a radio button
Enter the options you want to display
Set two classes for each option as one can be used globally (radiocolor) and one unique per option (radioblue etc)
You can optionally add the alternate product image swatches
Add the following css to your css file
.radiocolor input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding: 20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radiocolor input:checked::before
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}
.radioblue input
{background-color: #3555c6;}
.radioblue input:checked::before
{color:#fff;}
.radiored input
{background-color: #cc0000;}
.radiored input:checked::before
{color:#fff;}
.radiogreen input
{background-color: #64C174;}
.radiogreen input:checked::before
{color:#fff;}
.radiopurple input
{background-color: #B6A5D3;}
.radiopurple input:checked::before
{color:#fff;}
.radioyellow input
{background-color: #E6ED25;}
.radioyellow input:checked::before
{color:#000;}
.colorswatch .optiontext{display:none;}
The classes explained
.radiocolor input <- Format the general swatch appearance
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding: 20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radiocolor input:checked::before <- Style the check mark
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}
.radioblue input <- Set the individual color swatch backgrounds
{background-color: #3555c6;}
.radioblue input:checked::before
{color:#fff;} <- Set the individual check mark color
.radiored input
{background-color: #cc0000;}
.radiored input:checked::before
{color:#fff;}
.radiogreen input
{background-color: #64C174;}
.radiogreen input:checked::before
{color:#fff;}
.radiopurple input
{background-color: #B6A5D3;}
.radiopurple input:checked::before
{color:#fff;}
.radioyellow input
{background-color: #E6ED25;}
.radioyellow input:checked::before
{color:#000;}
.colorswatch .optiontext{display:none;} <- Hide the main product option text label where in this case colorswatch is the product id where the options are shown
Andy
Please feel free to review / rate our software |
|
|
Andy
Administrator
95440 Posts |
Posted - 10/26/2018 : 01:57:57
|
Product option image swatches
Example: http://ectwp.com/Pattern-Swatch
Please Note, the display on Internet Explorer / Edge will be different as the radio buttons can't be hidden there
In your admin product option page select New Option and make it a radio button
Enter the options you want to display
Set two classes for each option as one can be used globally (radioswatch) and one unique per option (radiopaisley etc)
You can optionally add the alternate product image swatches
Add the following css to your css file
.radioswatch input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding:20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radiopaisley input
{background-image: url(../colours/paisley.png);}
.radiopaisley input:checked::before
{ position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}
.radiotartan input
{background-image: url(../colours/tartan.png);}
.radiotartan input:checked::before
{position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}
.patternswatch .detailoptiontext{display:none;}
.patternswatch .optiontext{display:none;}
The CSS explained
.radioswatch span{display:none} <- Remove the individual option labels
.radioswatch input <- Style the general appearance of the swatch
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding:20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radiopaisley input <- Set the background of the first swatch
{background-image: url(../colours/paisley.png);}
.radiopaisley input:checked::before <- Set the check mark of the first swatch
{ position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}
.radiotartan input <- Set the background of the second swatch
{background-image: url(../colours/tartan.png);}
.radiotartan input:checked::before <- Set the check mark of the second swatch
{position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}
.patternswatch .detailoptiontext{display:none;} <- Hide the main option label text
.patternswatch .optiontext{display:none;}
Andy
Please feel free to review / rate our software |
|
|
Andy
Administrator
95440 Posts |
Posted - 10/26/2018 : 02:18:28
|
Multiple purchase options with colors
Example: http://ectwp.com/Multiple-Colors
In your admin product option page select New Option and make it a multiple purchase option
Enter the choices you want to display
Add the following css to your css file
.multiorange{
color:#ea9e19
}
.multiorange input{
border:1px solid #ea9e19;
color:#ea9e19;
text-align:center;
border-radius:4px
}
div.multiorange::before{
content: '';
border-left:18px solid #ea9e19;
}
.multimauve{
color:#695aa8
}
.multimauve input{
border:1px solid #695aa8;
color:#695aa8;
text-align:center;
border-radius:4px
}
div.multimauve::before{
content: '';
border-left:18px solid #695aa8
}
.multiblue{
color:#4267B2
}
.multiblue input{
border:1px solid #4267B2;
color:#4267B2;
text-align:center;
border-radius:4px
}
div.multiblue::before{
content: '';
border-left:18px solid #4267B2
}
The CSS explained
.multiorange{ <- The color of the text
color:#ea9e19
}
.multiorange input{
border:1px solid #ea9e19; <- The color of input border
color:#ea9e19; <- The color of the input text
text-align:center;
border-radius:4px
}
div.multiorange::before{
content: ''; <- Set blank content
border-left:18px solid #ea9e19; <- The width and color of the swatch to the left of the input field
}
Andy
Please feel free to review / rate our software |
|
|
Andy
Administrator
95440 Posts |
Posted - 10/31/2018 : 02:59:58
|
In 7.0.1 all types of product option can be given their own css class so it is possible to format text input fields and drop down menus as well as the examples provided above. Radio buttons probably provide the most flexibility but you can also look at examples of styling the other options, Here are some examples from a third party site
Drop down select menus - https://freefrontend.com/css-select-boxes/
Text input fields - https://freefrontend.com/css-input-text/
Some may require the addition of javascript which is probably overkill for product options. Also check in different browsers for compatibility.
Andy
Please feel free to review / rate our software |
|
|
1818charlie
Advanced Member
United Kingdom
305 Posts Pre-sales questions only
(More Details...)
|
Posted - 07/10/2019 : 18:45:59
|
Am I correct in thinking that this feature doesn't work when using MagicZoom?
Steve
Using ECT PHP versions since 2004 / 5
|
|
|
dbdave
ECT Moderator
USA
7990 Posts |
Posted - 07/10/2019 : 19:24:43
|
| I don't believe you will have problems using any of this with magiczoom. |
|
|
| |
Topic |
|
CSS product image overlays, options and more
