Presentation text with bullets colour issue

Submitted by JohnMarks on Thu, 03/09/2017 - 19:45
Forums: 
Content creation

I was creating a presentation in H5P and wanted to use a "White" font when I used bullet points for the text for some reason tthe bullet points where black yet my text appeared white. As my background is dark the bullet points could not be seen.

Could someone maybe test this and see if it is

  • a bug
  • user error

 

 

H5P file: 
Binary Data test-2121-57617.h5p
tomaj's picture

tomaj

Fri, 03/10/2017 - 09:35

Hi,

The color needs to be set to the element surrounding the list, but there is no such element accessible in the editor.

I tried to play around with it a little bit, but I couldn't find a solution.

Hopefully someone else has a suggestion...

- Tom

JohnMarks

Tue, 03/21/2017 - 18:28

Any feedback I was thinking the only way would be a custom CSS, I have installed the custom CSS mod for wordpress but I dont know much about css.

The element in question looks like h5p-element-overlay but not sure how to code the CSS to define the colour or image of a <ul> tag

papi Jo's picture

papi Jo

Tue, 03/21/2017 - 23:38

Hi JohnMarks,

There is no easy solution to your request. There are various ways of setting color on bullets using CSS. See http://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-u....

The following solution works on your test H5P Course Presentation example. After you have installed the custom CSS mod for Wordpress, enter these 2 CSS rules in YOUR_SITE\wp-content\uploads\h5p\custom-h5p.css

.h5p-advanced-text ul li {
  list-style-type: none;
}
.h5p-advanced-text ul li:before {
    content: "\f111"; // fa-circle
    font-family: 'H5PFontAwesome4';
    color: white; /* or whatever color you prefer */
    margin-right: 6px;
    font-size: xx-small;
}

See attached screenshot for result. Please note that this will change the bullet to a white-colored disk for ALL your advanced text lists on your wordpress site for all the H5P contents.

tomaj's picture

tomaj

Wed, 03/22/2017 - 08:56

Thanks Papa Jo!

And here is a link to the documentation on how to do visual changes.

- Tom

JohnMarks

Wed, 03/22/2017 - 16:55

Thank you both for the help, I have the custom CSS loaded and I have a custom colour set now but the bullet mark does not appear correcty (more of a square), I saw that it was a font awesome so I also tweaked the type of icon that it was but it still did not change

http://astronautweb.co/snippet/font-awesome/

Here is the screenshot above or link to what it looks like

http://s15.postimg.org/yl6auzacr/bullet_error.png

I used the default theme in wordpress "Twenty SixteenVersion: 1.3" and set that to see if it was a theme issue but still the same problem :-(

tomaj's picture

tomaj

Thu, 03/23/2017 - 08:58

Hi,

Those squares are often referred to as tofu, and I found this definition of it:

An empty rectangle displayed by some systems in place of a character not supported by available fonts.

:)

The thing is, using the unicode can sometime be a bit risky for these symbols. I would double check with what unicode font-awesome itself is using for a given font.

Also have a look at the h5p font awesome github repo, maybe you can get some idea of why it's not working for you. (maybe the font-family is wrong?).

- Tom

JohnMarks

Fri, 03/24/2017 - 16:05

Thanks for the hints
I have read a few things below and I will try and check what I have defined in my header it is just strange that it works for papi Jo

http://stackoverflow.com/questions/17254339/font-awesome-unicode