Hey everyone!
With the Labour Day holidays coming up, we’d like to let you know about our upcoming working hours:
Thursday, May 1st: Our team will be off during Labour Day.
Friday, May 2nd: We'll also be off for an extended holiday break.
We’ll be back on Monday, May 5th, ready to respond to all messages received during this time.
In the meantime, if you need help, feel free to:
-
Use the support widget on the bottom right of our websites (Amelia and wpDataTables) — our AI-powered assistant is available 24/7 and can help with many common questions.
-
Visit our documentation, articles, or YouTube channels for quick answers and step-by-step guides.
https://www.youtube.com/@AmeliaWordPressBookingPlugin/videos
https://www.youtube.com/@wpDataTables/videos
Thank you for being so understanding, and we hope you enjoy the long weekend!
Hello,
I am seeking assistance with modifying the content display in the wpDataTables plugin on my website. Specifically, I want to style different parts of the text inside a <td> with different fonts/styles. The content inside this element is structured as follows:
I would like to separate the three lines of text (separated by <br> tags) and apply different font styles to each line. Ideally, the first line should have one font style, and the other two lines should have another font style.
I attempted to achieve this by using a custom JavaScript function to dynamically add HTML, but couldn't get it to work.
Best regards
Hi,
This is only possible with an other HTML-structure.
Excample:
<td style="" class="column-tunniplaan"><div class="1">test1</div><div class="2">test2</div><div class="3">test3</div></td>
Kind regards
Jens
Hi Jens,
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
You are correct, if we just input some text without any HTML element 'wrapping around it',
in that case, it can be very difficult to somehow 'target' a specific text compared to other text with it inside the same HTML element,
because there is no HTML element as a "CSS selector" like that.
.
This is more of a question what could be the best way to create Custom HTML and Custom CSS,
rather than a question of our Plugin's functionality.
-
1. Yes, that is a good example, if you would wrap each piece of the text in that cell inside a DIV container,
then you can add one specific class to each DIV.
2. Or, you could try with a "span" element, which is sometimes used for a short text area,
then add a class to each HTML Span,
for example like, you could make one DIV that holds the entire cell content ( and optional class for that DIV), then nest some Spans with each having its own class inside, like :
Then you can target each "text" class and assign different font properties like that.
I am not an expert on everything about HTML and CSS, but you can research online on this topic and i am sure there are different examples what we might do,
but i hope that this can help.
For example, i found this well explained on the Mozilla Dev Documentation,
they explain how a Span can be used for use-cases like this.
I tried to copy the text from their example, and made just some random classes like "red", "yellow" and "green" to test it out in a Manual Table cell, and it works.
I try :
Then i add the CSS to the table, like
And it works on my table to set a different font property to each of these Span elements.
I hope that could work, or perhaps you can also see alternate methods online.
Thank you.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables