-
Posts
-
Hi Enfold,
I’m setting up my first catalogue for a food menu listing but there are a few items I’d like to customise.
Firstly, I want to use bullet points to list what the menu includes (in the description section, not the title). When I do this, it doesn’t use bullets and has dotted lines between the entries. This is too messy for readability as I have a number of inclusions to list off. I would like to use the standard bullets if possible. If I do this manually, (adding bullets to text rather than using the formatting toolbar), my longer line lengths don’t wrap well for responsiveness.
The second thing I’d like to do is use a heading style on some Catalogue item descriptions (ALL ENTREES in example), however it adds extra space above the text which looks odd as the dotted line sits higher. How do I stop this from happening?
Appreciate your help on resolving these!
Cheers,
Salt DesignHey Salt,
Please try the following in Quick CSS under Enfold->General Styling:
.av-catalogue-list li { border-bottom: none; } .av-catalogue-title h3 { margin-top: 20px; }About the list bullets; could you add an actual list so that we can see the problem please?
Best regards,
RikardHi Rikard,
Thanks for your message and css – the H3 is all sorted and will work great :)For the bullet list, I had already tried that border-bottom: none; but that removes it from all catalogue listings, not the bullet list in the item description section.
I’ve updated the page example to only show the ‘real’ bullet list under the title ‘Alternate Drop’, which shows a series for rows divided by dotted lines (and no * bullet glyph). These are the lines I wish to remove and have formatted as a standard list of items. Is that possible? (Ie. when use use the bullet list from the formatting toolbar, this is the result you get – not what you would usually see in a standard text box).
Salt Design
Hi,
Thanks for the update. Please try this CSS as well:
.av-catalogue-list li { border-bottom: none; list-style-type: disc; }Best regards,
RikardThanks Rikard – Unfortunately this isn’t resolving the issues.
The underline is being removed from every entry, not just the description part.
And now there is a bullet appearing on every catalogue item (not just those formatted as a bullet in the list description section).Is there some different CSS that can resolve these?
Cheers,
Salt DesignHi,
Thanks for the update. Could you post a screenshot or a mockup highlighting your intentions please?
Best regards,
RikardHi Rikard,
I’ll share a link to the Canapes menu page which is how we want it to look. This looks good, but I’ve manually added the bullet styling (and realise the bullets won’t be the gold colour when using the proper bullet feature), which means that when the website is responsive and changes size, the line wrapping is no long indented and gets messy on the longer text lines.
The other link I’ll provide is how the menu looks if you use the ‘bullet’ option from formatting toolbar – it adds lots of dotted lines and no bullets.
We don’t wish to change the styling/dotted lines for the Catalogue Item TITLE, but just the DESCRIPTION section.
Salt Design
Hi,
Thanks for the update. Please try this CSS instead:
.av-catalogue-content ul li.p1 { border-bottom: none; border-bottom: none; list-style-type: disc; }If you want to style the disc, then please try something like this: https://www.w3schools.com/howto/howto_css_bullet_color.asp
Best regards,
RikardThanks Rikard,
The CSS provided adjusted the formatting to how we would like it styled.
Note: We did have re-import some of the bulleted text, as some of it seemed to retain the old formatting.We’ll take a look into the code for colouring the bullets too.
Appreciate all your help on this one :)
Salt Design
- You must be logged in to reply to this topic.