XF 2.1 How to deal with transparent style property

[AndyB]

In my add-on I use the Block tab header background color as seen here:



In my .less template I have the following code:

.calendar-day-head {
    font-size: @xf-fontSizeSmaller;
    font-family: @xf-fontFamilyUi;
    color: contrast(@xf-blockTabHeaderBg);
    background: @xf-blockTabHeaderBg;
    padding: 5px;
    border-top: 1px solid @xf-borderColorLight;
    border-right: 1px solid @xf-borderColorLight;
    text-align: center;
    width: 120px;
}

The final result is this:



This works very well on forums which use a color value for the Block tab header background color. However one particular third party style has the following value:



The transparent value has the following result:




Is there any code I can use in my .less template which could identify if the value is transparent and substitute a color?

Thank you.

 

[Jeremy P]

Why wouldn't you use @xf-blockTabHeaderTextColor for the color, which is designed to be paired with the background color and will probably always contrast on a properly configured style? And are there even styles that set this to transparent to begin with?

 

[AndyB]

Why wouldn't you use @xf-blockTabHeaderTextColor for the color, which is designed to be paired with the background color and will probably always contrast on a properly configured style?

Hi Jeremy,

Once again you have offered the perfect answer to my question. I changed to @xf-blockTabHeaderTextColor and now everything works perfectly.

Thank you.

 

[AndyB]

Another very similar issue.

The following .less code works fine on XenForo default style and most third party styles.

.calendar-day-number-today {
    font-size: @xf-fontSizeSmaller;
    font-family: @xf-fontFamilyUi;
    color: @xf-buttonTextColor;
    background-color: @xf-buttonBg;
    padding: 5px;
    margin: -5px -5px 0 5px;
    float: right;
    text-align: center;
    width: 30px;
}

The result in this example is the 8th day on calendar shows like this:



But this particular third party style uses transparent for the @xf-buttonBg value, the result is this:



Ideally I would like to have a background for the current day.

Is there any code I could use in the .less to override the transparent so there would be some color.

Thank you.

 

[Jeremy P]

Unless the day is actually a button, I would use the underlying more generic style property (@xf-paletteColor4) instead of @xf-buttonBg, otherwise the color being tied to the button color seems strange. If you're still concerned with it being transparent, I'd say create your own style property that defaults to @xf-paletteColor4 and let people change it themselves if needed.

 

[AndyB]

I would use the underlying more generic style property (@xf-paletteColor4)

This worked perfectly.

.calendar-day-number-today {
	font-size: @xf-fontSizeSmaller;
	font-family: @xf-fontFamilyUi;
	color: @xf-paletteColor1;
	background-color: @xf-paletteColor4;
	padding: 5px;
	margin: -5px -5px 0 5px;
	float: right;
	text-align: center;
	width: 30px;
}

I did the same for the header we discussed a few posts back.

.calendar-day-head {
	font-size: @xf-fontSizeSmaller;
	font-family: @xf-fontFamilyUi;
	color: @xf-paletteColor1;
	background-color: @xf-paletteColor4;
	padding: 5px;
	border-top: 1px solid @xf-borderColorLight;
	border-right: 1px solid @xf-borderColorLight;
	text-align: center;
	width: 120px;
}

Thank you kindly.