How can I make bullets in list visible in description

Hi!
How can I make bullets visible in productdescription area. using Virtumart 3+
Use template typography is enabled.

Regards

The best solution I found is to use the CSS ::before selector. That way the bullets won't sit outside the container they're in. I wanted my bulleted list in the Short Description, but you could do this in the regular description as well. Here's how I worked it out on my site...

Create an unordered list using HTML. Example:

Code: Select all

<ul class="s-desc">
<li>All Aluminum Construction</li>
<li>Available in 6 or 10 Tray Capacity for 18” x 26” trays</li>
<li>High Quality 5” Polyurethane swivel casters for easy maneuvering</li>
<li>Fully welded frame for strength</li>
</ul>

Notice I gave the <ul> tag a class of "s-dec." In my CSS, I added the following:

Code: Select all

.s-desc li:before {
content: "\f111";
font-family: FontAwesome;
font-size: 6px;
left: 0;
position: absolute;
top: 15px;
padding: 0; }

All that CSS is just to create the bullets. The content is set to "\f111" because that is the FontAwesome web font's code for bullets. The size of the bullets is 6px, and the 15px positioning puts them in the middle of the text line. You may need to adjust some of those settings to get yours to look the way you want.

I prefer this version because I have longer text for each bullet that may wrap to the next line. I want any text on the second line to left align with the first line of text, not the bullets. If you use the traditional disc bullets in CSS, and set their position to inside, that's what will happen, which looks odd. If you set position to outside, text left aligns from line to line, but the bullets sit outside to the left of the container, which again looks odd. The above solution solves both of those issues.

Hope that helps!

Thanks a lot, I will try this!
Kind regards

Hi!
in wich CSS-file did you put the css code?

Best regards

You can use override.css
Could you please post an url to your site, where you would like to have the bullets?

Hi!
Sorry for late reply. Well it is on the product detail page in the long description area I want to have the opportunity to have list bullets. http://joomla.surfskjulet.se/index.php? ... gory_id=27
It also would be nice to see the description header/reviews in the top of description area like in your demo. The buttons in the pop-up when added a product in cart doesn´t look like in your demo version as well. See attached images.

Thankful for your help!

Best regards

Lets stick with original topic question for now.
Please edit: /templates/gk_storefront/css/override.css and add at its end:

Code: Select all

.product-description ul {
    list-style: disc;
    padding-left: 20px;
}


Remember to enable "CSS override" in template settings - advanced section.

Hi!
Thank you so much!
When you have time I would be thankful if you could help me with my other question as well.
Best regards

The popups issue is due to wrong popup script selected in VM settings. You should have "Use Fancybox" unchecked.

Hi!
Thanks a lot, it solved the problem with the pop-up!

Is there anything else I can help you with regarding this topic?

Hi!
well if you have an idea why the description label in top of the long description area not showing up like in your demo?
Regards

Could you please mark this element on a screenshot?

Hi Cyberek!
Sorry for late reply. You can see an image I posted earlier in this topic. It is the Description and Reviews headers/buttons above the long description area that not showing up.
Thank you for taking your time solving my issues!

/Olajo

Your site is password protected.
Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

To enable the tabs you actually need to have something to show there
You can do it by enabling reviews and rating and selecting "Show Review" or "Show Rating" to Everybody in shopfront settings of VM.

Hi!
Yes, but if I don´t want reviews and ratings on why isn´t the description label visable?

Regards

Because it is not a label but a tabbed view browsing selector. If there is only 1 tab the script doesn't show tabs at all.