SOLVED: addClass no working

[Opus]

Hi I use this format for the custom.js:
//Zeile 1 -----------------
blocks['638_1'] = {}
blocks['638_1']['title'] = 'Innentemperatur';
blocks['638_1']['width'] = 12;
blocks['638_1']['addClass'] = 'bigfont';

But the addClass does nothing. I've created the css class in custom.css:
.bigfont {font-size: 3em !important;}

where is my Problem?

[HansieNL]

I don’t know of you made a mistake, but you have to add the block lines to config.js.
Can you try with:

Code: Select all

.block_638_1 .bigfont {font-size: 3em !important;}

[lzwfkv]

Indeed, @Opus seems to be right: i have done some tests on latest beta and only the new block types are inheriting the addClass class, the legacy ones do not work with that property. You can check that with F12 (dev tools) and inspecting the block element: legacy <DIV> blocks do not have the added class.
I did not note it before, because i had used the addClass attribute for the new Camera block only, where it worked.

[HansieNL]

Indeed, @Opus seems to be right: i have done some tests on latest beta and only the new block types are inheriting the addClass class, the legacy ones do not work with that property. You can check that with F12 (dev tools) and inspecting the block element: legacy <DIV> blocks do not have the added class.
I did not note it before, because i had used the addClass attribute for the new Camera block only, where it worked.

That means @Opus just has to change the code to the new block type to get it working:

Code: Select all

blocks['638_1'] = {
title: 'Innentemperatur',
width: 12,
addClass: 'bigfont'
}

[Lokonli]

addClass should work for all Domoticz devices and for most special blocks.
If you encounter issues please share your block definition from your CONFIG.js.

[Lokonli]

I don’t know of you made a mistake, but you have to add the block lines to config.js.
Can you try with:

Code: Select all

.block_638_1 .bigfont {font-size: 3em !important;}

The 'addclass' parameter is added to the same div as the block identifier.
So your CSS selector should be without space in this case, like:

Code: Select all

.block_638_1.bigfont {font-size: 3em !important;}

And indeed, the block definition should be part of CONFIG.js

[Lokonli]

If you want to change the font-size of the title, you have to add the following to custom.css:

Code: Select all

.bigfont .title {
    font-size: 3em !important;
}

Explanation:
The 'addClass' class parameter is added to the top-level div of the block. The title part is a child div of the top level div, and contains the class 'title'.

[Opus]

Thanks for the help. But it dont change anything
Now my config.js and custom.css for a better look:
Config.js
var config = {}
//config['edit_mode'] = 1;
config['domoticz_ip'] = 'http://192.168.178.122:8080';
config['login_timeout'] = '60';
config['user_name'] = '';
config['pass_word'] = '';
config['app_title'] = 'Hauptseite';
//config['room_plan'] = '8';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['language'] = 'de_DE';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['owm_api'] = '3804ab881ab1c801b7a0d4a1a25xxxxx';
config['owm_city'] = 'Waldems';
config['owm_name'] = '0';
config['owm_country'] = 'de';
config['owm_lang'] = '0';
config['owm_cnt'] = '3';
config['owm_days'] = 1;
config['owm_min'] = 1;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 0;
config['static_weathericons'] = 1;
//config['default_news_url'] = 'https://www.welt.de/feeds/topnews.rss';
config['news_scroll_after'] = '7';
config['dashticz_php_path'] = './vendor/dashticz/';
//config['standby_call_url'] = '0';
//config['standby_call_url_on_end'] = '0';
config['theme'] = 'default';
config['background_image'] = 'img/bg15.jpg';
config['standby_after'] = 0;
config['start_page'] = 1;
config['enable_swiper'] = '2';
config['vertical_scroll'] = '2';
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '10';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['blink_color'] = '255, 255, 255, 1';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'de_DE';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 0;
config['gm_zoomlevel'] = 0;
config['gm_latitude'] = 0;
config['gm_longitude'] = 0;
config['speak_lang'] = 'de_DE';
config['idx_moonpicture'] = 0;
config['disable_update_check'] = 1;
config['no_rgb'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['disable_googleanalytics'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 1;
config['security_button_icons'] = 1;
config['hide_seconds'] = 1;
config['hide_seconds_stationclock'] = 0;
//config['hide_mediaplayer'] = 0;


//Definition of blocks
var blocks = {}


//Column 1-----------------------------------------------------
//Zeile 1 ------------------

blocks['376_1'] = {}
blocks['376_1']['title'] = 'Außen-Temperatur';
blocks['376_1']['width'] = 6;

blocks['376_2'] = {}
blocks['376_2']['title'] = 'Luftfeuchte';
blocks['376_2']['width'] = 6;

//Zeile 2 --------------------
blocks[305] = {}
blocks[305]['title'] = '';
blocks[305]['width'] = 6;
//blocks[305] = {single_block: true};

blocks[553] = {}
blocks[553]['title'] = 'Regen';
blocks[553]['width'] = 6;
//blocks[553] = {single_block: true};

//Zeile 3 --------------------
blocks['376_3'] = {}
blocks['376_3']['title'] = 'Luftdruck';
blocks['376_3']['width'] = 6;

blocks[643] = {}
blocks[643]['title'] = 'UV - Index';
blocks[643]['width'] = 6;
//blocks[305] = {single_block: true};


//Column 2 ------------------------------------------------

//Zeile 1 -----------------
blocks['638_1'] = {
title: 'Innentemperatur',
width: 12,
addClass: 'bigfont'
}

//Zeile 2 -------------------

//Wetter
blocks['weather_owm'] = {}
blocks['weather_owm']['title'] = 'Wettervorhersage';
blocks['weather_owm']['width'] = 4;
blocks['weather_owm'] = {single_block: true};

//Zeile 3 -------------------

//News ----------------------
blocks['news_1'] = {}
blocks['news_1']['feed'] = 'https://rss.sueddeutsche.de/rss/Topthemen';
blocks['news_1']['maxheight'] = 200;
blocks['news_1']['refresh'] = 320;

blocks['news_2'] = {}
blocks['news_2']['feed'] = 'http://wetter.com/wetter_rss/wetter.xml';
blocks['news_2']['maxheight'] = 200;
blocks['news_2']['refresh'] = 300;


//Column 3 ---------------------------------------------------
//Zeile 1 ---------------------



blocks['638_2'] = {}
blocks['638_2']['title'] = 'Innenfeuchte';
blocks['638_2']['width'] = 6;
//blocks['638_2'] = {single_block: true};

blocks[1535] = {}
blocks[1535]['title'] = 'Poolwasser';
blocks[1535]['width'] = 6;
//blocks[1535] = {single_block: true};


//Zeile 2 ---------------------
blocks['680_1'] = {}
blocks['680_1']['title'] = 'Pool Luft';
blocks['680_1']['width'] = 6;
//blocks['638_2'] = {single_block: true};

blocks['680_2'] = {}
blocks['680_2']['title'] = 'Pool Luftfeuchte';
blocks['680_2']['width'] = 6;
//blocks['638_2'] = {single_block: true};


//Zeile 3 ---------------------

blocks[604] = {}
blocks[604]['title'] = 'Verbrauch Keller';
blocks[604]['width'] = 6;
//blocks['638_2'] = {single_block: true};

blocks[312] = {}
blocks[312]['title'] = 'Dunstabzug';
blocks[312]['width'] = 6;
//blocks['638_2'] = {single_block: true};

//Zeile 4 ---------------------

blocks[1640] = {}
blocks[1640]['title'] = 'Licht Balkon';
blocks[1640]['width'] = 6;
blocks[1640] = {single_block: true};

blocks[1682] = {}
blocks[1682]['title'] = 'Hoflicht';
blocks[1682]['width'] = 6;
blocks[1682] = {single_block: true};

//Zeile 5 ---------------------

blocks['garage_cam'] = {}
blocks['garage_cam']['type'] ='camera';
blocks['garage_cam']['title'] ='Kellertür';
blocks['garage_cam']['imageUrl']= 'http://192.168.178.86:1026/cgi-bin/video.jpg';
blocks['garage_cam']['videoUrl']= 'http://192.168.178.86:1026/cgi-bin/video.jpg';
blocks['garage_cam']['refresh']= 100;
blocks['garage_cam']['width']= 12;
blocks['garage_cam']['maxheight']= 200;


//Column 4 --------------------------------------------------------
//Zeile 1 ---------------
blocks[685] = {}
blocks[685]['title'] = 'Allg. Meldungen';
blocks[685]['width'] = 11;
//blocks[685] = {single_block: true};



//Column 5 --------------------------------------------------------
//Zeile 1 ---------------
blocks[1704] = {}
blocks[1704]['title'] = 'Nachtwache';
blocks[1704]['width'] = 2;
blocks[1704]['textOn'] = '';
blocks[1704]['textOff'] = '';
blocks[1704]['addClass'] = 'alarme';


blocks[1706] = {}
blocks[1706]['title'] = 'Alarmanlage';
blocks[1706]['width'] = 2;
blocks[1706]['textOn'] = '';
blocks[1706]['textOff'] = '';
blocks[1706]['confirmation'] = 1;
blocks[1706]['addClass'] = 'alarme';


blocks[1700] = {}
blocks[1700]['title'] = 'Alarmanlagen-Modus';
blocks[1700]['width'] = 2;
blocks[1700]['addClass'] = 'css_red';

blocks[1701] = {}
blocks[1701]['title'] = 'Alarmanlagen-Status';
blocks[1701]['width'] = 6;
blocks[1701]['addClass'] = 'alarme';

//Zeile 2 ---------------
blocks[489] = {}
blocks[489]['title'] = 'Kellertür';
blocks[489]['width'] = 2;


blocks[667] = {}
blocks[667]['title'] = 'Haustür';
blocks[667]['width'] = 2;


blocks[567] = {}
blocks[567]['title'] = 'Pooltür';
blocks[567]['width'] = 2;


blocks[617] = {}
blocks[617]['title'] = 'Schlafz.Balk.';
blocks[617]['width'] = 2;


blocks[312] = {}
blocks[312]['title'] = 'Küche Balk.';
blocks[312]['width'] = 2;






//Columns ----------------------
var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['stationclock','376_1','376_2',305, 553,'376_3',643];
columns[1]['width'] = 4;


columns[2] ={}
columns[2]['blocks'] = ['638_1', 'news_2', 'news_1'];
columns[2]['width'] = 4;

columns[3] ={}
columns[3]['blocks'] = [ '638_2', 1535, '680_1', '680_2', 604, 1640, 1682];
columns[3]['width'] = 4;

columns[4] = {}
columns[4]['blocks'] = [ 1704,1706,1700, 1701];
columns[4]['width'] = 12;

columns[5] = {}
columns[5]['blocks'] = [489,667,567,617,312, 685];
columns[5]['width'] = 12;


//Definition of screens
var screens = {}
screens[1] = {
columns: [1,2,3,4,5]
}
-----------------------
custom.css
/*
CUSTOM CSS FILE
*/
.body {font-size: 1.4em !important;}
.title{ font-size:2em !important;}
.state{ font-size: 1.3em !important;}
.value{ font-size: 1.3em !important;}

.block_638_1 .bigfont .title {font-size: 3em !important;}
.bigfont .title {font-size: 3em !important;}
.bigfont {font-size: 3em !important;}

.alarme{background-color: #000000;}

.alarmrow{
font-size: 24px !important;
}
.alarmrow a {
color: white;
}
.alarmrow strong{
display: inline-block;
}

.css_red {
color: red;
}

[Lokonli]

It's working on my system. Just to be sure: You are using Dashticz latest version? (3.5)

A few remarks:

The following line will not work:

Code: Select all

.block_638_1 .bigfont .title {font-size: 3em !important;}

You have to remove the space before .bigfont, like:

Code: Select all

.block_638_1.bigfont .title {font-size: 3em !important;}

(reason: .block_638_1 and .bigfont are classes on the same div)

To change the background color, you have to add !important, like this:

Code: Select all

.alarme{background-color: #000000 !important;}

(reason: The Dashticz blocks will already set the background color with a higher CSS specificity)

[Opus]

Hi Lokonli

the main problem was my version 3.4. Now with 3.5 it works fine.

Thanks to all helpers!

Michael

[lzwfkv]

addClass should work for all Domoticz devices and for most special blocks.
If you encounter issues please share your block definition from your CONFIG.js.

Hi Lokonli, yes you are right, i just misinterpreted the source of my issue, in that the property addClass added to the blocks in CONFIG.js was not applied, in my case, for most of the block types (it was just casual though that the one working was a special block type and the ones not working were normal).
Indeed, it is more subtle of an issue than one can think of. My problem was that for those normal blocks i set some classes (icon colors) in custom.js in function getStatus_xxx(), using block.addClass='classname' assignment. This ended up to overwrite the property addClass assigned to the block's addClass Property.
I have temporarily overcome this overlapping of addClass values, by using the asssignments: block.addClass += ' classname' in custom.js, but it would be appreciated and more effective if a check in the Dashticz code is introduced to control that, whenever block.addClass is assigned a value that is different from the block.addClass Property in CONFIG.js, then they are appended rather than replaced/overwritten.

Thank you.

[Lokonli]

If addClass appends the class, then also removeClass needs to be supported as parameter.
Both parameters need to be cleared after usage.
When you instantiate a block twice it becomes a bit unpredictable what the outcome will be for each block.

So I prefer to keep the current behavior. Maybe I should rename addClass to customClass or something to prevent misunderstandings.


Sent from my SM-A320FL using Tapatalk

[lzwfkv]

If addClass appends the class, then also removeClass needs to be supported as parameter.
Both parameters need to be cleared after usage.
When you instantiate a block twice it becomes a bit unpredictable what the outcome will be for each block.

So I prefer to keep the current behavior. Maybe I should rename addClass to customClass or something to prevent misunderstandings.


Sent from my SM-A320FL using Tapatalk

OK Lokonli, i understand and will be careful to avoid overrides of addClass parameter; yes addClass is a bit misleading as a name.
Thank you and keep up the good work.