MMM-page-indicator now easier to style

[KristjanESPERANTO]

MMM-page-indicator has been updated. The main change is that there are new classes that make it easier to customize the styling of the indicators and a new styling section in the README that describes some styling examples. Like this:

or this:

So if you use MMM-page-indicator, check it out 😀

The styling was also possible before, but was a little more complicated and the examples certainly help to develop your own cool styles.

Thanks to @mumblebaj for getting this rolling!

[Niggich]

Hey @KristjanESPERANTO, I used your module for long. Now I made the new MM Update and the Space between my Icons is to small and I didn’t found a way to change. Maybe you can help me? This ist my CSS.

.MMM-page-indicator .indicator::before {
  font-size: 20px;
  font-weight: 600;
  font-variant-emoji: text;
  line-height: 1.6;
  letter-spacing: 0.2 rem;
  white-space: pre;
  padding: 0 5px;
}

.MMM-page-indicator .page-0::before {
	content: "\f29a"; 
	font-family: FontAwesome;
	color: green;
}
.MMM-page-indicator .page-1::before {
	content: "\f6c3";
	font-family: FontAwesome;
	color: yellow;
}
.MMM-page-indicator .page-2::before {
	content: "\f1ea";
	font-family: FontAwesome;
	color: #FF692A;
}
.MMM-page-indicator .page-3::before {
	content: "\f073";
	font-family: FontAwesome;
	color: orange;
}
.MMM-page-indicator .page-4::before {
	content: "\f06d";
	font-family: FontAwesome;
	color: pink;
}
.MMM-page-indicator .page-5::before {
	content: "\e1b0";
	font-family: FontAwesome;
	color: greenyellow;
}
.MMM-page-indicator .page-6::before {
	content: "\f02f";
	font-family: FontAwesome;
	color: #155DFC;
}

.MMM-page-indicator .page-7::before {
	content: "\f03d";
	font-family: FontAwesome;
	color: cyan;
}
.MMM-page-indicator .page-8::before {
	content: "\f19d";
	font-family: FontAwesome;
	color: violet;
}
.MMM-page-indicator .page-9::before {
	content: "\f05a";
	font-family: FontAwesome;
	color: #27A3F5;
}
.MMM-page-indicator .page-10::before {
	content: "\f58b";
	font-family: FontAwesome;
	color: #F54927;
}
.MMM-page-indicator .page-11::before {
	content: "\f5a2";
	font-family: FontAwesome;
	color: lime;
}
.MMM-page-indicator .page-12::before {
	content: "\f008";
	font-family: FontAwesome;
	color: bisque;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

.MMM-page-indicator .active-page {
    color: orange;
    font-variant-emoji: text;
    animation: pulse 8s ease-in-out infinite;
}

Thank you!

[sdetweil]

@Niggich what position is this module in?

We changed how the regions are layed out, using flex

You could try adding near the top of custom.css
Top left for example

.region .top .left {
     display:block
}

[Niggich]

@sdetweil Thank you. The module region is bottom_bar. I fixed it. I just remove the ::before at .MMM-page-indicator .indicator::before.

thank you!

[sdetweil]

@Niggich ok, you shouldn’t have to remove ::before