VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: cvrak on July 08, 2024, 13:12:50 PM

Title: Quantity controls symbols are not visible
Post by: cvrak on July 08, 2024, 13:12:50 PM
Hi,
I'm using VM 4.2.12 with Joomla 4.4.5 and php 8.2
At products page the quantity controls show green rectangles (this is ok) but "+" and "-" symbols are not showing.
Can this be solved with some CSS rules? Which ones?
The URL is  https://4epoches.com/e-shop (https://4epoches.com/e-shop) to get an idea what I mean.

Thanks
Title: Re: Quantity controls symbols are not visible
Post by: Jumbo! on July 09, 2024, 00:06:02 AM
The template uses the old Bootstrap 2 icon library, which is not loaded into the site. Therefore, you do not see the icons. You can add the following custom CSS to resolve the issue.

.glyphicon-plus:after {
    content: "+";
}
.glyphicon-minus:after {
    content: "-";
}
Title: Re: Quantity controls symbols are not visible
Post by: cvrak on July 11, 2024, 10:57:03 AM
I've put the css and worked!
Thanks a lot for the help.

I've set white color, and I have a question: How can I increase the size only of "+" & "-" without change the size of the button? Trying to do it with css, the whole button increased.

Thanks


Quote from: Jumbo! on July 09, 2024, 00:06:02 AMThe template uses the old Bootstrap 2 icon library, which is not loaded into the site. Therefore, you do not see the icons. You can add the following custom CSS to resolve the issue.

.glyphicon-plus:after {
    content: "+";
}
.glyphicon-minus:after {
    content: "-";
}

Title: Re: Quantity controls symbols are not visible
Post by: Jumbo! on July 11, 2024, 18:03:35 PM
Quote from: cvrak on July 11, 2024, 10:57:03 AMI've set white color, and I have a question: How can I increase the size only of "+" & "-" without change the size of the button? Trying to do it with css, the whole button increased.

You can customise the size of the symbols using font size and line height. Check the example below.

/* Set the symbol size and color */
.glyphicon-plus, .glyphicon-minus {
    font-size: 1.5em;
    line-height: 1;
    color: #fff;
}

/* Set the plus symbol */
.glyphicon-plus:after {
    content: "+";
}

/* Set the minus symbol */
.glyphicon-minus:after {
    content: "-";
}