Viewing 15 replies - 1 through 15 (of 22 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question.

    Highlighting a single cell is possible with this CSS code that needs to be entered into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-1 tbody td:hover {
        background-color: #ff0000;
    }

    Note that you must uncheck the Row Highlighting checkbox on the table’s “Edit” screen for this to work!

    However, you will probably not be happy with the result as you have split the image and the text into two cells. You should therefore merge them, as the effect will not look nice otherwise.

    To create a gap between the cells, you can use this “Custom CSS” code:

    .tablepress-id-1 {
        border-collapse: separate;
        border-spacing: 6px 6px;
    }

    The first number is the horizontal gap, while the second is the vertical cap.

    Regards,
    Tobias

    Thread Starter wokkaboy

    (@wokkaboy)

    Thanks, I’ll give it a go!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem. If this does not work, just let me know.

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    Thread Starter wokkaboy

    (@wokkaboy)

    Hi, you may get this question twice, apologies if so.

    I have amended the cells as recommended, however please advise how to sit the image to the left with the text next to it on the right, rather than as currently appears at https://www.heliweb.co.uk/

    I used the ‘inset image’ button in WP.

    Many thanks

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    you will basically just have to move the HTML code for the image to the beginning of the text, i.e. before the texts like “Are you looking” and “Ever dreamt”.
    After that, you can fix the spacing around the images by adding this to the “Custom CSS”:

    .tablepress-id-2 img {
        margin: 5px 5px 0 0;
    }

    Regards,
    Tobias

    Thread Starter wokkaboy

    (@wokkaboy)

    Great, thanks!
    Last question (hopefully!) Is there a way to remove the horizontal line underneath the tables?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    yes, that table border can also be removed with some CSS code. For details, please see the answer to the question “How do I remove the borders from a table?” in the TablePress FAQ at https://tablepress.org/faq/

    Regards,
    Tobias

    Thread Starter wokkaboy

    (@wokkaboy)

    Thanks

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    Thread Starter wokkaboy

    (@wokkaboy)

    Will do.

    Do you know what font is used in the WP 2012 template as I’d like to use it in my table for continuity.

    Thanks

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,l

    the main font in TwentyTwelve is OpenSans. That’s also used in tables by default, but you have changed that in the “Custom CSS”. If you remove that, you will get the default font again.

    Regards,
    Tobias

    Thread Starter wokkaboy

    (@wokkaboy)

    Got it. Thanks again.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    sure, no problem!

    Best wishes,
    Tobias

    Thread Starter wokkaboy

    (@wokkaboy)

    Hi

    Is there a way to round the edges of the cells – similar to the images that appear in them?

    Thanks

    Hi, wokkaboy

    Custom CSS should do what you expect, like this:

    .tablepress td {
        border-radius: 5px;
    }

    You could give it a try. And the radius could be changed to other numbers to get a content look. Please let me know if you need other help.

    Regard,
    Haoxian

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Individual cell highlight’ is closed to new replies.