WordPress.org

Forums

TablePress
[resolved] Individual cell highlight (23 posts)

  1. wokkaboy
    Member
    Posted 1 year ago #

    Hello

    I have 2 cells in a table side by side. Rather than both highlight on hover, I would like them to contain separate text and images, and only highlight when the individual cell is hovered over.

    Please advise how to do this, and to create a gap between the cells.

    My website is http://www.heliweb.co.uk

    Thank you

    http://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. wokkaboy
    Member
    Posted 1 year ago #

    Thanks, I'll give it a go!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  5. wokkaboy
    Member
    Posted 1 year ago #

    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 http://www.heliweb.co.uk/

    I used the 'inset image' button in WP.

    Many thanks

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. wokkaboy
    Member
    Posted 1 year ago #

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

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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 http://tablepress.org/faq/

    Regards,
    Tobias

  9. wokkaboy
    Member
    Posted 1 year ago #

    Thanks

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  11. wokkaboy
    Member
    Posted 1 year ago #

    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

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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

  13. wokkaboy
    Member
    Posted 1 year ago #

    Got it. Thanks again.

  14. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem!

    Best wishes,
    Tobias

  15. wokkaboy
    Member
    Posted 1 year ago #

    Hi

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

    Thanks

  16. Haoxian
    Member
    Posted 1 year ago #

    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

  17. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, that CSS should help here.
    (You might want to use the .tablepress-id-123 selector to not have this affect all tables.)

    Regards,
    Tobias

  18. wokkaboy
    Member
    Posted 1 year ago #

    Great - thanks guys!

  19. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    no problem, you are very welcome! :-) Good to hear that this helped!

    Best wishes,
    Tobias

  20. wokkaboy
    Member
    Posted 1 year ago #

    Do you know how to reduce the horizontal padding in the navigation bar to stop it going onto 2 rows?

    Thanks

  21. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sorry, that's more of a theme question, so you should maybe ask about this at http://wordpress.org/support/forum/themes-and-templates
    It will probably be a CSS change where you reduce the margin of the used HTML elements. However, from what I can see, you'll probably not be that successful: The texts of the links in the nav bar are all pretty long and they will not fit onto one line.

    Regards,
    Tobias

  22. wokkaboy
    Member
    Posted 1 year ago #

    OK thanks

  23. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TablePress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.