Accents in custom CSS code

Resolved lnpgaceta
(@lnpgaceta)

5 years, 1 month ago

I’m trying to highlight cells as per our discussion here, and I’ve had plenty of success so far . . . except when the term to be highlighted has an ñ in it.

This is the code I’ve been trying to input:

.tablepress-stat .highlight-añasco {
background-color: #a30000 !important;
color: #ffd65c !important;
}

I know it works, because when I take the ñ off, and replace with a regular n, it’s still colored in according to my settings.

I notice that, in the Plugin Options, that adding the ñ makes whatever I type afterwards turn green, which I assume means it no longer forms part of the command. Is there a workaround for this? I can implement a different solution if need be, but I figured I’d ask y’all first.

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

Plugin Author Tobias Bäthge
(@tobiasbg)

5 years, 1 month ago

Hi,

thanks for your post, and sorry for the trouble.

Most likely, we’ll need a small code change here. For me to verify, can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Thread Starter lnpgaceta
(@lnpgaceta)

5 years, 1 month ago

Yeah, no problem: https://www.lnpgaceta.org/statistics/.

This is the shortcode:

[table id=37 highlight=”Adjuntas||Aguada||Aguadilla||Aguas Buenas||Aibonito||Añasco||Arecibo||Moca” highlight_full_cell_match=”false” /]

This is the Plugin Options code I’ve got:

`.tablepress-stat .highlight-adjuntas {
background-color: #57267e !important;
color: #00e000 !important;
}

.tablepress-stat .highlight-aguada {
background-color: #020202 !important;
color: #e36c09 !important;
}

.tablepress-stat .highlight-aguadilla {
background-color: #eeee00 !important;
color: #000080 !important;
}

.tablepress-stat .highlight-aguas-buenas {
background-color: #000000 !important;
color: #ff0000 !important;
}

.tablepress-stat .highlight-aibonito {
background-color: #003f7a !important;
color: #ff8c00 !important;
}

.tablepress-stat .highlight-añasco {
background-color: #a30000 !important;
color: #ffd65c !important;
}

.tablepress-stat .highlight-arecibo {
background-color: #c00000 !important;
color: #f7f7f7 !important;
}

.tablepress-stat .highlight-moca {
background-color: #c0c0c0 !important;
color: #800040 !important;
}
Plugin Author Tobias Bäthge
(@tobiasbg)

5 years, 1 month ago
Hi,

thanks for the link!

It looks like you’ll have to make a modification to the tablepress-cell-highlighting.php PHP file. In line 215, please change
```
sanitize_title_with_dashes
```
to
```
sanitize_html_class
```
After that, the correct CSS should be
```
.tablepress-stat .highlight-aasco {
  background-color: #a30000 !important;
 color: #ffd65c !important;
}
```
(Thus, the ñ simply gets removed from the CSS class.)

Regards,
Tobias
Thread Starter lnpgaceta
(@lnpgaceta)

5 years, 1 month ago

Got it. Just to make sure: would doing that also work for the other special characters (á/é/í/ó/ú/ü)?

So, for example, Canóvanas will look like .highlight-canvanas?

Plugin Author Tobias Bäthge
(@tobiasbg)

5 years, 1 month ago

Hi,

yes, that’s what should happen 🙂 If it’s not working, you could check the HTML source of the page (“View Source” in the browser) and search for highlight- and then find the one that looks like the highlight word 🙂

Regards,
Tobias

Thread Starter lnpgaceta
(@lnpgaceta)

5 years, 1 month ago

Having now tried it, and done a couple tweaks (I had to also remove spaces as a character) it works now! Thank you for the help.

Plugin Author Tobias Bäthge
(@tobiasbg)

5 years, 1 month ago

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!

Best wishes,
Tobias

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

The topic ‘Accents in custom CSS code’ is closed to new replies.