| Author |
 Topic  |
Andy
ECT Moderator
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
ECT Moderator
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
ECT Moderator
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
ECT Moderator
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
ECT Moderator
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
ECT Moderator
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
ECT Moderator
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
ECT Moderator
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
Ecommerce Template Expert
United Kingdom
570 Posts |
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
8727 Posts |
Posted - 07/10/2019 : 19:24:43
|
| I don't believe you will have problems using any of this with magiczoom. |
|
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 01/12/2020 : 20:44:41
|
Use button style radio options
I want to use this on a product line but I'm a little confused by the instructions.
There is this line in the example css:
.pinktop2 .detailoptiontext{display:none;}
How do I know what to use in place of .pinktop2? Do I need this?
I was going to set up a Small, Medium, Large option that would apply to a large number of different items.
I know Andy isn't here anymore but can someone help clear up my confusion?
Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~ |
|
|
Phil
ECT Moderator
United Kingdom
7115 Posts |
Posted - 01/13/2020 : 01:00:48
|
quote:
There is this line in the example css:
.pinktop2 .detailoptiontext{display:none;}
How do I know what to use in place of .pinktop2? Do I need this?
Hi Julie,
You would need to substitute .pinktop2 with the product ID that the option is assigned to. So if your product ID is ghg-20 you would use
.ghg-20 .detailoptiontext{display:none;}
* Database Migrations and Conversions*
* ASP to PHP Cart Conversions*
*Contact Us*
*Buy The PHP Capture Card Plugin*
*Rate Our Services/View Our Feedback* |
|
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 01/13/2020 : 08:00:12
|
Oh, wow...so if I have a 1,000 items I would have to add each of their ProductID's to the css.... yikes!
Is there another way to do this?
Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~ |
|
|
Phil
ECT Moderator
United Kingdom
7115 Posts |
|
Vince
Administrator
39256 Posts |
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 01/13/2020 : 12:18:14
|
That would be an awesome idea!! :)
Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~ |
|
|
Vince
Administrator
39256 Posts |
|
dbdave
ECT Moderator
USA
8727 Posts |
Posted - 01/14/2020 : 09:34:35
|
quote:
In the end what I did was go for a "Custom CSS Classes" field. That way you can add one or more of whatever class you like to any of the products.
Great idea Vince... |
|
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 01/14/2020 : 14:26:04
|
Cool! I'll take an advanced version.... you should have my email from my last pm I sent ya. If not, let me know.
Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~ |
|
|
Vince
Administrator
39256 Posts |
Posted - 01/15/2020 : 01:17:49
|
Hi Julie
Ok, what I've done is put it here as a "Beta"...
https://www.ecommercetemplates.com/updaters.asp?betas=true
...so you can get it now in the normal way by selecting the Beta there. GMail now won't let us send ZIP's even if they are disguised as PDF's so this is the best way I think. Both ASP and PHP versions are available.
By the way Julie. As you seem to have a lot to do with dogs, do you know what to do about a mutt who doesn't like puppies at all? Ours is an American Stanford crossed with just about everything else. She has a lovely character and gets on really well with other dogs, and isn't a dominant character at all; but twice now has gone for puppies that are new additions to families of dogs she already knows. You never know etc so I just thought I'd ask. 
Vince
Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater |
|
|
Positivek9
Ecommerce Template Guru
USA
4061 Posts Pre-sales questions only (More Details...)
|
Posted - 01/15/2020 : 11:37:46
|
By any chance do you know what files the changes were made to? I'd rather not upload all since I have to make small changes to some but if so, then I'll do it.
As for your dog, I'm not sure what is going on. Unless it has to do with how he views the "pack", a new addition may be felt to be a threat and he acts accordingly. I have some dogs that welcome new dogs/puppies with wagging tail, others just want to eat them for breakfast.
Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~ |
|
|
|
Topic |
|
CSS product image overlays, options and more
