MMM-Carousel Pagination Icons

[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!