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

  •  5
    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,877
    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