Dashticz - Show your dashboard and how-to's!

[Chris12]

Hi, running the latest beta (3.6.6) and I was wondering if I can change the page slide buttons/dots to another color? Especially the inactive page slider are hardly seen when using a dark background. Can the inactive dots color be manipulated via the custom.css file?

Maybe a nice enhancement would be that the color can be set per page, so you can have different colors based on the backgroud (morning/noon/afternoon/night). And maybe the dot can be build like a circle with an outer line and fill, which can be different colors as well?

You can play with following settings:

Code: Select all

.-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 0.2 !important;
}
.swiper-pagination-bullet {
    opacity: 0.8 !important;
}

It doesn't seem to do a thing when adding the above/below code into my custom.css, when changing the opacity the dotted bullet stays white, and only the active one is shown. The other (2 in my case) are not visable.
I also tried changing the color to yellow, but that doens;t work as well.

Code: Select all

/* Page slider buttons */
.-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 0.8 !important;
    color: yellow !important;
}
.swiper-pagination-bullet {
    opacity: 0.8 !important;
    color: yellow !important;
}

[HansieNL]

Spoiler: show

Hi, running the latest beta (3.6.6) and I was wondering if I can change the page slide buttons/dots to another color? Especially the inactive page slider are hardly seen when using a dark background. Can the inactive dots color be manipulated via the custom.css file?

Maybe a nice enhancement would be that the color can be set per page, so you can have different colors based on the backgroud (morning/noon/afternoon/night). And maybe the dot can be build like a circle with an outer line and fill, which can be different colors as well?

You can play with following settings:

Code: Select all

.-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 0.2 !important;
}
.swiper-pagination-bullet {
    opacity: 0.8 !important;
}

It doesn't seem to do a thing when adding the above/below code into my custom.css, when changing the opacity the dotted bullet stays white, and only the active one is shown. The other (2 in my case) are not visable.
I also tried changing the color to yellow, but that doens;t work as well.

Code: Select all

/* Page slider buttons */
.-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 0.8 !important;
    color: yellow !important;
}
.swiper-pagination-bullet {
    opacity: 0.8 !important;
    color: yellow !important;
}

Looks like a minus - is copied during copying the code. Just remove it from .-pagination

[HansieNL]

@Chris12 Opacity is working, but looks like change color is over ruled by other code.

[Chris12]

@HansieNL Yes opacity is working , but only the active button is show.
What I want to accomplish is, to also make the inactive buttons visable on a black background.

[HansieNL]

Spoiler: show

@HansieNL Yes opacity is working , but only the active button is show.
What I want to accomplish is, to also make the inactive buttons visable on a black background.

I now think the colors are fixed: white (active) and black (inactive). Then you won’t see the black dot on a dark background. We’ll have to ask @Lokonli if we can change this.

EDIT: @Chris12 Can you try with background-color:

[Lokonli]

Spoiler: show

@HansieNL Yes opacity is working , but only the active button is show.
What I want to accomplish is, to also make the inactive buttons visable on a black background.

I now think the colors are fixed: white (active) and black (inactive). Then you won’t see the black dot on a dark background. We’ll have to ask @Lokonli if we can change this.

EDIT: @Chris12 Can you try with background-color:

You can configure the styling via custom.css.

Examples:

Code: Select all

.swiper-pagination .swiper-pagination-bullet {
    opacity: 1;
    border: white solid 1px;
    background-color: green;
    width: 15px;
    height: 15px;
}
.swiper-pagination .swiper-pagination-bullet-active {
    border: white solid 1px !important;
    background-color: orange !important;
    width: 25px;
    height: 25px;
}

.swiper-pagination .swiper-pagination-bullet:nth-child(2) {
    background-color: red;
    width: 5px;
    height: 5px;
}

This will give a big active orange bullet, smaller green not active bullets. The second bullet will be small and red.

pagination.jpg (2.14 KiB) Viewed 1666 times

[Chris12]

Thanks!! @Lokonli & @HansieNL, it now works like a charm.

Spoiler: show

Code: Select all

/* Page slider buttons */
.swiper-pagination .swiper-pagination-bullet-active {
	border: yellow solid 2px !important;
        opacity: 1.0 !important;
	width: 15px;
	height: 15px;
	background-color: black !important;
}
.swiper-pagination-bullet {
	border: white solid 1px !important;
        opacity: 1.0 !important;
	width: 15px;
	height: 15px;
	background-color: black !important;
}

Maybe one last thing which might can be changed as well: can the spacing between the bullets also be wider, so on a touchscreen (tablet) is more easier to use (without fail-clicking/pressing).

[HansieNL]

Spoiler: show

Thanks!! @Lokonli & @HansieNL, it now works like a charm.

Spoiler: show

Code: Select all

/* Page slider buttons */
.swiper-pagination .swiper-pagination-bullet-active {
	border: yellow solid 2px !important;
        opacity: 1.0 !important;
	width: 15px;
	height: 15px;
	background-color: black !important;
}
.swiper-pagination-bullet {
	border: white solid 1px !important;
        opacity: 1.0 !important;
	width: 15px;
	height: 15px;
	background-color: black !important;
}

Maybe one last thing which might can be changed as well: can the spacing between the bullets also be wider, so on a touchscreen (tablet) is more easier to use (without fail-clicking/pressing).

You can change the space between the bullets by changing the 4px to your needs:

Code: Select all

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 4px;
}

[Chris12]

thanks! appreciate the quick help & sollutions offered!

[joostnl]

Worked out great

See:
https://dashticz.readthedocs.io/en/beta ... ml#styling

Most easy to do this via custom.css

To remove the complete header:

Code: Select all

[data-id='my_multi_plant'].graph .graphheader {
    display: none
}

(The documentation was not correct, which has been fixed in the beta version)

[nfuse]

annybody any idea how to make the blocks smaller? high: is not an options in blocks and cannot figure it out.



like this

[Lokonli]

annybody any idea how to make the blocks smaller? high: is not an options in blocks and cannot figure it out.



like this

You can add the following to custom.css:

Code: Select all

div.mh {
    height: 50px;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

[madpatrick]

Lokonli,

I want to make the height of my Garbage block large and tried this.

Code: Select all

div.mh.trash {
    height: 70px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

Unfortunaly nothing happens, not even with only div.mh

[HansieNL]

Lokonli,

I want to make the height of my Garbage block large and tried this.

Code: Select all

div.mh.trash {
    height: 70px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

Unfortunaly nothing happens, not even with only div.mh

Can you try with:

Code: Select all

[data-id='garbage']
    height: 70px !important; 
}

[HansieNL]

Lokonli,

I want to make the height of my Garbage block large and tried this.

Code: Select all

div.mh.trash {
    height: 70px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

Unfortunaly nothing happens, not even with only div.mh

Can you try with:

Code: Select all

[data-id='garbage']
    height: 70px !important; 
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

[HansieNL]

Lokonli,

I want to make the height of my Garbage block large and tried this.

Code: Select all

div.mh.trash {
    height: 70px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

Unfortunaly nothing happens, not even with only div.mh

Can you try with:

Code: Select all

[data-id='garbage']
    height: 70px !important; 
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

[madpatrick]

nope. doesn't change the height

[HansieNL]

nope. doesn't change the height

The { was missing. Can you try again, because it's working here:

Code: Select all

[data-id='garbage'] {
    height: 70px !important; 
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

[Lokonli]

or:

Code: Select all

div.trash {
    height: 70px !important; 
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

[madpatrick]

Thanks guys !

Both options are working