MMM-Carousel Pagination Icons

[sdetweil]

@mumblebaj one small step!

[com1cedric]

@sdetweil Hello Sam, may I ask you one question about this topic? do you know how it would be possible to show an image stored on the Raspberry or linked from the web, instead of showing an icon from Fontawesome?

[sdetweil]

@com1cedric just point the url() to the file

url('/folder_in_mm_tree/xxx.jpg/png/gif as appropriate')

note the MM web server root is ~/MagicMirror

so the files have to be in THAT folder tree
you can LINK files/folders outside into the MM tree with the -->ln<-- command

so, assume you made a

MagicMirror/icons

folder and in it is

circle.png

then you could use

url('/icons/circle.png')

or

url('http://localhost:mm_port/icons/circle.png')  /* not this ONLY works IF the browser is on the SAME MACHINE as MM..*/

if not you need the relative(url(‘/…’), OR have to hard code the MM machine address
like this

url('http://MM_IP_address:mm_port/icons/circle.png')

if linked from the web use its complete url path

[com1cedric]

@sdetweil said in MMM-Carousel Pagination Icons:

url(‘/icons/circle.png’)

Thank you very much Sam.

currently, I have the following command (which works well and shows an icon from FontAwesom) in custom.css:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
content: “\f207”;
font-family: FontAwesome;
color: #FF4433;
}

After putting an image called “olympic.png” in the “MagicMirror/icons” folder, it still does not appear if I write:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
url(‘/icons/olympics.png’);
}

Do I habe to still use “content:” before or something else?

PS. sorry for asking, I am quite new in this CSS topic

[sdetweil]

@com1cedric i will test this out and get back

icons are very small images

[sdetweil]

@com1cedric see here, this is good info

https://forum.magicmirror.builders/post/125833

[com1cedric]

@sdetweil
OK, I looked into it, thank you.

Now, I have this images from Fontawesome. It looks nice, but I would like to be able to use other image if needed.

For example, I would replace the “sun” with a picture “04n.png” in the “icons” forder on my raspberry.

I tried to change line 251 with 250 in the custom.css file

Now, the result is, that the sun has disappeared (correct), but just has been replaced with a gap.

do you maybe see a mistake in my custom.css file? the problem is maybe between lines 221 and 240. this is strange…

[sdetweil]

@com1cedric can you open the developers window (ctrl-shift-i), select the console tab
and put caro in the filter field to limit messages to the carousel module

this info might be of help on the image selection
https://elfsight.com/blog/svg-png-jpeg-choose-the-image-format-for-your-website/

[karsten13]

@com1cedric

the /icons subfolder will not work, you have to use one of these

[sdetweil]

@karsten13 ok, I forgot we are restrictive

[com1cedric]

@sdetweil and @karsten13

thank you for your inputs.

I tried it and put the image (downloaded from flaticon.com) on the CSS file

When I search for it in the Chromium browser (to be sure the URL is correct), it works

but when I put this path in the custom.css files, with full or shorten path, it does not appear…

in the console, I do not find anything suspicious (I only use mm-page and mm-page-indicator, and no carrousel).

[sdetweil]

@com1cedric again, we wont load the file path url,

/home/… in not one of out supported folders

it has to be MagicMirror web server based , from the MagicMirror folder as root (/)

url('/css/house.svg')

[karsten13]

I did a test with default calendar and custom.css:

.calendar div.module-content::after {
  content: url("/css/k13.svg");
}

or

.calendar div.module-content {
  content: url("/css/k13.svg");
}

which works (svg is visible).

So maybe something with your css concerning the child-stuff is wrong (my css knowledge is to bad to help here)

[mumblebaj]

@com1cedric MMM-page-indicator was updated recently so you do not have to use the nth-child stuff anymore. Checkout the latest version and the readme. I have added some samples of how you can use it. You should reference the svg as either @sdetweil or @karsten13 has shown and it should work.

[com1cedric]

@mumblebaj , @karsten13 and @sdetweil , thank you really for your help with this matter. I will test tomorrow and hope all this story will help other user in the future to profit from all your great job!