Template Fluorspar

wmorris:

Its the description area. Where all the bullets is. As I was saying is some of the lines I don't need the bullets and some other lines I do. That's what I am talking about.

When you go to Admin >> Catalog>> Categories/Products, there should be a drop-down near the center of the page labeled Text Editor.

If it shows Plain Text, you need to assign another text editor. If you don't see the option of CKEditor, you may need to "turn it on" at Admin >> Configuration >> My Store >> HTML Editor.

dbltoe:

When you go to Admin >> Catalog>> Categories/Products, there should be a drop-down near the center of the page labeled Text Editor.

If it shows Plain Text, you need to assign another text editor. If you don't see the option of CKEditor, you may need to "turn it on" at Admin >> Configuration >> My Store >> HTML Editor.

I tried that still not showing any of the bullets.

wmorris:

Ok, I have another issue with the bullet in description. Some sentence will use the bullets and some other sentences doesn't. How can I fix that?

I believe we solved the initial issue with the bullets not appearing. Now the issue with it not showing on all. Based on the css i gave you it is based off the the (p) tag.
SO anytime there a (p) tag a bullet will appear. The structure of your text that is causing the issue. You may want to add (ul) tags to yuor description to get exactly what you are looking for

wmorris:

I tried that still not showing any of the bullets.

Morris

Just another option... Lets remove the nth-of-type(n+2) from the original style. add this to your stylesheet at the bottom. You may still encounter the same issue with the bullets appearing where they should and should not be .....due to the fact its wrapped in a p tag and not a UL.

#productinfoBody p{
  position: relative;
  padding-left: 1.2em;
}

#productinfoBody p::before {
  content: "•";
  position: absolute;
  left: 0;
  color: black;
}

chadlly2003:

Morris

Just another option... Lets remove the nth-of-type(n+2) from the original style. add this to your stylesheet at the bottom. You may still encounter the same issue with the bullets appearing where they should and should not be .....due to the fact its wrapped in a p tag and not a UL.

#productinfoBody p{
position: relative;
padding-left: 1.2em;
}

#productinfoBody p::before {
content: "•";
position: absolute;
left: 0;
color: black;
}

Nope, Its showing bullets on all lines. That isn't want I am asking. It works normal on the classic responsive template.

I was wonder if someone can help with a some images issue.

On the new product module and product listings modules I have most images are taller than the other ones. How can keep all images the same size even the ones that are taller for an example.

Most sizes are:
1400x1400

the taller images is:
1400x1943

Hope you understand what I am trying to do.

wmorris,

Do you have an example to show? It makes it a lot easier to solve

wmorris:

I was wonder if someone can help with a some images issue.

On the new product module and product listings modules I have most images are taller than the other ones. How can keep all images the same size even the ones that are taller for an example.

Most sizes are:
1400x1400

the taller images is:
1400x1943

Hope you understand what I am trying to do.

Stylesheet.css
find this
line:65

.centerBoxContentsNew .productBox, .centerBoxContentsFeatured .productBox, .centerBoxContentsSpecials .productBox

background-color: rgb(255,255,255);
  border-style: solid;
  border-width: 1px;
  border-color: rgb(150,150,150);
  margin: 4px;
  font-weight: normal;
  color: rgb(44,44,44);
  padding: 5px;
  box-sizing: border-box;
}

add this to the

 height: 400px; 

Ok, I got the images fixed I had to resized them. The only problem I have right now is the border on the bottom is either longer or shorter than the other. I know it has to do with the product name. How can I fix that?

follow my directions above. I just tested it should work. this is the path to the css your trying to edit. The final result will look like the image I posted above

fluorspar/css/stylesheet.css

just go to line 65 and add

height:400px;

Ok, on the product listing I have a product is out of stock with the red image. It the box is longer than the others.

wmorris:

Are you saying that I need to copy this file:
\includes\languages\lang.english.php

and replace it with this file?
\includes\languages\fluorspar\lang.english.php

The height issue does work but the way your template is built I would go with a script to size those boxes. Using CSS to get the size would cause more of a headache.

Lets try this. This will solve your issue in a much easier manner

path: /includes/templates/your_template/common/tpl_main_page.php

add this to the very bottom

<script> 
    window.onload = function() {
        var boxes = document.querySelectorAll('.productBox');
        
        var maxHeight = 0;

        // First, find the maximum height
        boxes.forEach(function(box) {
            box.style.height = 'auto'; // Reset the height to auto
            var boxHeight = box.offsetHeight;
            if (boxHeight > maxHeight) {
                maxHeight = boxHeight;
            }
        });

        // Now, apply the maximum height to all product boxes
        boxes.forEach(function(box) {
            box.style.height = maxHeight + 'px';
        });
    };
</script> 

wmorris:

Ok, on the product listing I have a product is out of stock with the red image. It the box is longer than the others.

The height issue does work but the way your template is built I would go with a script to size those boxes. Using CSS to get the size would cause more of a headache.

Lets try this. This will solve your issue in a much easier manner

path: /includes/templates/your_template/common/tpl_main_page.php

add this to the very bottom

<script> 
    window.onload = function() {
        var boxes = document.querySelectorAll('.productBox');
        
        var maxHeight = 0;

        // First, find the maximum height
        boxes.forEach(function(box) {
            box.style.height = 'auto'; // Reset the height to auto
            var boxHeight = box.offsetHeight;
            if (boxHeight > maxHeight) {
                maxHeight = boxHeight;
            }
        });

        // Now, apply the maximum height to all product boxes
        boxes.forEach(function(box) {
            box.style.height = maxHeight + 'px';
        });
    };
</script> 

That did it. Thank You!

chadlly2003:

The height issue does work but the way your template is built I would go with a script to size those boxes. Using CSS to get the size would cause more of a headache.

Lets try this. This will solve your issue in a much easier manner

path: /includes/templates/your_template/common/tpl_main_page.php

add this to the very bottom

Ok, I have another issue on the new product module on the main page. Why are my product image is bigger than the other and the product listing images size is right?

wmorris:

Ok, I have another issue on the new product module on the main page. Why are my product image is bigger than the other and the product listing images size is right?

Just look at you site. Look like you got it.

Can i make one suggestion lets have zencart called the image size instead of the css. Once you make the changes below go to backend of zencart
and adjust your new 'product image size' there.

Once that is done look at how nice your images look on mobile and desktop. Big difference in quality of the image.

path: responsive.css
line:47
find this and remove....

img.listingProductImage{width:30%;}

path: responsive.css
line:150
find this and remove....

img.listingProductImage{width:60%;}

chadlly2003:

Just look at you site. Look like you got it.

Can i make one suggestion lets have zencart called the image size instead of the css. Once you make the changes below go to backend of zencart
and adjust your new 'product image size' there.

Once that is done look at how nice your images look on mobile and desktop. Big difference in quality of the image.

path: responsive.css
line:47
find this and remove....

img.listingProductImage{width:30%;}

> 
> path: responsive.css
> line:150
> find this and remove....
> ```
img.listingProductImage{width:60%;}

What am I looking for in the backend of Zen-Cart?

wmorris:

What am I looking for in the backend of Zen-Cart?

Now you can control the image width and height via the admin.

After you make the above changes you can login to your admin and change images sizes there.

go to configuration

• images

look for
Image - Product Listing Height
Image - Product Listing width

You can also resize the new product images etc...

chadlly2003:

Now you can control the image width and height via the admin.

After you make the above changes you can login to your admin and change images sizes there.

go to configuration

• images

look for
Image - Product Listing Height
Image - Product Listing width

You can also resize the new product images etc...

The new product module the main page hasn't changed its still showing the big or height is long. The product listing is fine.

You haven't made the changes yet. I am still seeing the css there.