Color the group separator

Resolved PAWs FABRIK
(@pawloui)

1 year, 5 months ago

I want to color the group separator with a different color, e.g. red. Does anyone know how to do that?

[open_text time_group_separator=”| “]%if_open% %hours_today% %end% %if_closed% Lukket %if_open_tomorrow% ,%space%vi åbner igen i morgen kl. %space% %tomorrow_start% %end% %end%[/open_text]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Noah Hearle
(@designextreme)

1 year, 5 months ago

@pawloui At the moment, you cannot place HTML to enclose the text string used to separate groups of opening hours. HTML is intentionally stripped from all text strings.

I could offer something that would perform a search/replace of the HTML to allow you to do the same if that’s of interest to you?

Please share the URL and I’ll write something that can be added in JavaScript/CSS to perform this modification.

Thread Starter PAWs FABRIK
(@pawloui)

1 year, 5 months ago

Hi,

Thank you for your quick reply!

It sounds great that you can offer some custom Script/CSS. While you’re at it, would it also be possible to include the text that appears when the status is “closed” (in Danish, it’s “Lukket”)? I would like the separator pipe and the “Lukket” text to have the same red color.

The URL to my test site is: https://redesign.skfc.dk/

Thank you in advance!

Thread Starter PAWs FABRIK
(@pawloui)

1 year, 5 months ago

Hi,

How is it going, do you need more time? Let me know if you need some more info or details.
Plugin Author Noah Hearle
(@designextreme)

1 year, 5 months ago
@pawloui I have other web development work, so I can’t always respond quickly.

Here is the code that you can try:
```
/* JavaScript */
document.querySelectorAll('.hours').forEach(hours => {
	if (hours.textContent.match(/^[\d.:]+\s+–\s+[\d.:]+$/) == null) {
		return;
	}

	hours.textContent = hours.textContent.replace(/^([\d.:]+)(\s+–\s+)([\d.:]+)$/, '$1$2$3'); 
});
```
And the CSS is quite simple:
```
.opening-hours .separator,
.opening-hours .closed-bold .hours {
	color: #FF0000;
}
```
If you like the plugin, please consider leaving a review. Thanks!

Update: I realise you said the group separator, not the hours… for the group of hours, please enclose the HTML as follows:
```
[open_text time_group_separator="| "]
%if_open% %hours_today%
%else% Lukket
	%if_open_tomorrow% , vi åbner igen i morgen kl. %tomorrow_start%
	%end%
%end%
[/open_text]
```
JavaScript:
```
document.querySelectorAll('.opening-hours-today').forEach(hours => {
	if (hours.textContent.match(/[\d.:]+\s+–\s+[\d.:]+\s*\|/g) == null) {
		return;
	}

	hours.textContent = hours.textContent.replace(/([\d.:]+\s+–\s+[\d.:]+\s*)(\|)/g, '$1$2'); 
});
```
CSS, slightly updated:
```
.opening-hours-today .separator,
.opening-hours .closed-bold .hours {
	color: #FF0000;
}
```
- This reply was modified 1 year, 5 months ago by Noah Hearle. Reason: Added group separator version
Thread Starter PAWs FABRIK
(@pawloui)

1 year, 5 months ago
Hi,

Thank you so much for your help, I really appreciate it! I’m glad you took the time to help me.

The code you wrote worked perfectly, which is absolutely wonderful😊 In the meantime, I came up with a few small changes, so I used your code as a base and asked ChatGPT to help me make some modifications. This is what I ended up with.

Thanks again for your support, I actually learned a little more coding through this process.

Best regards

HTML:
```
[open_text time_group_separator="|"]
%hours_today%
[/open_text]
```
JavaScript:
```
// Highlight separators in .opening-hours-today
document.querySelectorAll('.opening-hours-today').forEach(hours => {
 hours.innerHTML = hours.innerHTML.replace(/(\|)/g, ' $1 '); // Style separator
});

// Highlight "Lukket" in .hours
document.querySelectorAll('.hours').forEach(hours => {
 hours.innerHTML = hours.innerHTML.replace(/Lukket/gi, 'Lukket'); // Style "Lukket"
});
```
CSS:
```
/* Style for the pipe separator */
.opening-hours-today .separator {
 color: #FF0000 !important; /* Red for separator */
 font-weight: bold;
}

/* Style for "Lukket" */
.opening-hours .closed-bold {
 color: #FF0000 !important; /* Red for "Lukket" */
 font-weight: bold;
}
```

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Color the group separator’ is closed to new replies.