Hey everyone!

With the holiday season upon us, we want to share our upcoming working hours:

After that, we’ll return to our regular schedule and assist you as quickly as possible.

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find tons of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel), which might just have the answers you need while we’re away.

Thanks a bunch for your understanding and support!

Warm regards and happy holidays!

TMS

Okay
  Public Ticket #3481606
Assistance with Modifying Content Display
Closed

Comments

  • Kaarup started the conversation

    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:

    htmlCopy code
    <td style="" class="column-tunniplaan">test1<br>test2<br>test3</td>
    

    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

  •  3
    Jens replied

    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

  •  1,847
    Miloš replied

    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 :

    <div class="maincontainer">
    <span class="text1">Text 1</span>
    <br>
    <span class="text2">Text 2</span>
    <br>
    <span class="text2">Text 3</span>
    </div>

    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.

    9184880200.png

    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.

    2019727692.png
    2312190788.png


    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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