Moodle Moodle 3.1.5+ (Build: 20170331) Theme Elegance, release 3.1.0, version 2016081500
Simple annoyance, possibly a well-known one. HTML lists (ul) are rendered with bullets in the Editor (TinyMCE) but not in the end product.
The code:
Edit: Noticed that Bootstrap has the same problem, but not More.
Just noting that Elegance and Bootstrap (the theme, rather than the framework) are Bootstrap3 themes and have some differences to Clean and More (BootstrapBase) which are based on Bootstrap2.
Hi Visvanath,
EDITED: Sorry I missed seeing the version in your first post earlier.
My Computer crashed the other day so am flitting between computer updates to Moodle Themes on my iPad!
Which version of Moodle are you currently using?
I've added some missing CSS rules in Moodle for this sort of thing over the years, so could need updating again...seems a bit odd though???
Unless Elegance is blocking them?
CSS is...as follows and there is nothing fancy about it, but it tends to be in the useragent as it is common to all. The problems tend to be when different levels are needed...but generally this is all that is needed.
ul { list-style-type: square;}
Sorry for interupting the discussion.
Cheers
Mary
If I remember correctly, there is a bug(?)/feature(?) in the less in the bootstrap theme that applies a 'none' as the bullet type, so you probably need to add something like
ul {list-style: outside none circle;}to your css - although it probably needs to be more specific to avoid bulleting other things that are treated as <ul> elements in Moodle..course-content li.section li.activity ul {list-style: outside none disc;}ul { list-style-type: square;} should show some result, I thought. No response though, unfortunately.
.course-content li.section li.activity ul {list-style: outside none disc; color: red;}the list gets the color, but not the bullets. (See the screen shot below.)
From memory you cannot colour a bullet as they do not respond to text colour, you need to add an image.
https://css-tricks.com/almanac/properties/l/list-style/
Ill look into this as could be editor styles are missing.
be back later as dashing to shops
M
Well, the colour shows you have the right selector, so are you able to use firebug or chrome developer tools to make sure that there isn't an !important or something else overriding the styles for the bullet itself?
You need something like
ul,
ul ul,
ul ul ul,
ul ul ul ul,
ul ul ul ul ul {
list-style-type: square !important;
list-style-position: outside !important;
list-style-image: none !important;
}Which will cover sub-menu lists as well as just top level lists.
Try adding that to the CSS custom setting in the Elegance theme.
Cheers
Mary
.course-content li.section li.activity ulis the right one.
ul, ul ul, ul ul ul, ul ul ul ul, ul ul ul ul ultouches just too many things, as found out with my red paint method.
{list-style-type: circle !important; list-style-position: outside; list-style-image none; } and other variations of it. No reaction..course-content li.section li.activity ul {list-style-type: disc; list-style-position: inside; list-style-image none; }. Thank you both for all your support!
Well glad someone is happy today!
LOL
Mary
.course-content li.section ul {list-style-type: disc; list-style-image none; padding-left: 17px; }
.course-content li.section ol {list-style-type: decimal; list-style-image none; padding-left: 17px; }
.course-content li.section li.activity ul {list-style-type: disc; list-style-image none; padding-left: 17px; }
.course-content li.section li.activity ol {list-style-type: decimal; list-style-image none; padding-left: 17px;} 