Domoticz

HansieNL wrote: ↑Saturday 31 October 2020 13:48

Chris12 wrote: ↑Saturday 31 October 2020 12:16 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;
}

/* 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;
}

Spoiler: show

Chris12 wrote: ↑Saturday 31 October 2020 14:13

HansieNL wrote: ↑Saturday 31 October 2020 13:48

Chris12 wrote: ↑Saturday 31 October 2020 12:16 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;
}

Spoiler: show

Chris12 wrote: ↑Saturday 31 October 2020 15:26 @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 wrote: ↑Saturday 31 October 2020 16:06

Spoiler: show

Chris12 wrote: ↑Saturday 31 October 2020 15:26 @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:

.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;
}

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;
}

Spoiler: show

Chris12 wrote: ↑Saturday 31 October 2020 17:08 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).

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

Lokonli wrote: ↑Friday 30 October 2020 23:13 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 wrote: ↑Monday 02 November 2020 14:56 annybody any idea how to make the blocks smaller? high: is not an options in blocks and cannot figure it out.



like this

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

madpatrick wrote: ↑Monday 02 November 2020 17:14 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

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

HansieNL wrote: ↑Monday 02 November 2020 19:02

madpatrick wrote: ↑Monday 02 November 2020 17:14 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 wrote: ↑Monday 02 November 2020 17:14 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

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

madpatrick wrote: ↑Monday 02 November 2020 19:08 nope. doesn't change the height

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