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.
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,
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 :
<p>
Add the <span class="green">basil</span>, <span class="ingredient">pine nuts</span> and
<span class="yellow">garlic</span> to a blender and blend into a paste.
</p>
<p>Gradually add the <span class="red">olive oil</span> while running the blender slowly.</p>
Then i add the CSS to the table, like
.green {
font-family: "Lucida Console", "Courier New", monospace !important;
color : green !important;
}
.yellow {
font-family: "Times New Roman", Times, serif !important;
color : yellow !important;
}
.red {
font-family: "Brush Script MT", cursive !important;
color : red !important;
}
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.
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