Customizing Column Text

  • Resolved Diana McFarlane

    (@diana-mcfarlane)


    9 years, 7 months ago

    Is there a way to customize color, font size and alignment within the advanced editor for selected lines in a column?

    I have data for a column that looks like this:
    Leashes (I want centered, bold and in color red)
    Fully adjustable (I want it centered, in color black)
    Two neck widths (I want it centered, in color black)

    Is this possible?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 7 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    This will require a little bit of extra HTML code and CSS. The approach with the <span> tags mentioned in https://tablepress.org/faq/highlight-cells-or-content/ should get you started. You will basically need multiple CSS classes here. For the CSS commands on color and font, please see https://tablepress.org/faq/change-font-family-size-color/.

    Regards,
    Tobias

    Thread Starter Diana McFarlane

    (@diana-mcfarlane)

    9 years, 7 months ago

    Hi Tobias, I have very little experience in html. Can you show me an example of how to change individual lines within a row/column?

    I did try to change the whole column using the following but nothing changed on the table.
    .tablepress-id-9 .column-1
    .tablepress-id-9 .column-3 {
    font-family: ‘Noto Serif’a;
    font-size: 12px;
    color: #0000000;
    }

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 7 months ago

    Hi,

    you will basically just have to copy that HTML code into the table cell, like
    <span class="hilite">test</span>
    and then add “Custom CSS” like

    .tablepress .hilite {
	color: #ff0000;
}

    to the “Custom CSS” textarea on the “Plugin Options” screen.
    You can repeat this with other styling. In that case, just replace hilite with another keyword, like hilite-bold and other CSS.

    In your CSS, there are two small mistakes: There needs to be a comma after .column-1, and there’s an extra a after 'Noto Serif'. The correct code would be

    .tablepress-id-9 .column-1,
.tablepress-id-9 .column-3 {
  font-family: 'Noto Serif';
  font-size: 12px;
  color: #0000000;
}

    Regards,
    Tobias

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

The topic ‘Customizing Column Text’ is closed to new replies.