WordPress.org

Forums

TablePress
[resolved] Changing header background and hover colors (11 posts)

  1. AlanOldStudent
    Member
    Posted 9 months ago #

    Hello Tobias,

    I donated to you because I like your plugin. However, I'm having a bit of trouble changing the background color. I copied the code from the FAQ and changed the table ID and color appropriately, using copy and paste. The hover behaves as expected but not the rest of the header. I hope it's just something dumb I did in coding. I'm using Atahualpa theme and because of confidential material in the table, it is in a password-protected site.

    Anyhow, the code I used was this:

    .tablepress thead th,
    .tablepress tfoot th {
    	background-color: #683600;
    }
    
    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #1c7d97;
    }

    Thanks

    Alan OldStudent

    https://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Alan,

    thanks for your question, and sorry for the trouble.

    Some themes have CSS for certain styling aspects, so that we might have to raise the priority of your "Custom CSS". Please try again with

    .tablepress thead th,
    .tablepress tfoot th {
    	background-color: #683600 !important;
    }
    
    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #1c7d97;
    }

    (note the !important keyword there).

    Regards,
    Tobias

  3. AlanOldStudent
    Member
    Posted 9 months ago #

    Danke Tobias,

    When I cut and pasted exactly, that changed the background color but seemed to have broken the hover color.

    So I changed the part that said:

    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #1c7d97;
    }

    to this:

    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #1c7d97 !important;
    }

    That seems to have fixed it.

    By the way, if it's not too off-topic, about those little graphics at the bottom of the table for navigation. I wanted to replace them, but I could not find them anywhere.

    Could you please give me a little hand on that?

    Regards,

    Alan OldStudent
    The unexamined life is not worth living—Socrates
    Gracias a la vida, que me ha dado tanto—Violeta Parra

  4. TobiasBg
    Member
    Plugin Author

    Posted 9 months ago #

    Hi,

    ah, yes, you'll have to add the !important tag two the second block of code as well. Nice catch!

    For those pagination arrows: Technically, those are not images, but characters in a special "icon font". This not only guarantees high quality icons, also on HiDPI/Retina screens, but it also makes the icons more customizable (in terms of color, for example) and faster to load. Replacing them is however more tricky. What exactly are you trying to achieve with them?

    Regards,
    Tobias

  5. AlanOldStudent
    Member
    Posted 9 months ago #

    Actually, they are very hard to see on a white background. I wanted to make them dark and more easily seen. In fact, it would be great if they were at the top of the screen.

    If you could tell me how to change their color to something like #1c7d97, that would fit in well on the page the table is located on. As is, they practically disappear on my screen.

    Regards,

    Alan OldStudent
    The unexamined life is not worth living—Socrates
    Gracias a la vida, que me ha dado tanto—Violeta Parra

  6. TobiasBg
    Member
    Plugin Author

    Posted 9 months ago #

    Hi,

    ah, thanks for the explanation! That's indeed possible with some extra "Custom CSS", like this:

    .paginate_enabled_previous:before,
    .paginate_enabled_next:after {
    	color: #1c7d97 !important;
    }
    .paginate_disabled_previous:before,
    .paginate_disabled_next:after {
    	color: #00ff00 !important;
    }
    .paginate_enabled_previous:hover:before,
    .paginate_enabled_next:hover:after {
    	color: #0000ff !important;
    }

    There are three main states (enabled, disabled, and hovered), so that you can adjust three colors.

    Moving the pagination to the top is also possible. For that, you'd have to add a "Custom Command" on the "Edit" screen of the table. Please try adding

    "sDom": 'lfprti'

    there, which moves the pagination to the top, and which is based on the documentation at http://legacy.datatables.net/usage/options#sDom

    Regards,
    Tobias

  7. AlanOldStudent
    Member
    Posted 9 months ago #

    Thanks Tobias,

    I appreciate all the help.

    That seems to have worked for recoloring the pagination. Moving the pagination to the top worked too, but it put the navigation arrows smack dab against the search, on the far right. You can see a screen shot here

    Is there a way to center it?

    Regards,

    Alan OldStudent
    The unexamined life is not worth living—Socrates
    Gracias a la vida, que me ha dado tanto—Violeta Parra

  8. TobiasBg
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Alan,

    good to hear that this helped!

    Yes, we can tweak the positioning of the arrows. For that, please try adding this to the "Custom CSS" on the "Plugin Options" screen:

    #tablepress-123_paginate {
      float: none;
      margin: 4px auto 0;
      width: 110px;
    }

    Note that the 123 has to be changed to the table's ID.

    Regards,
    Tobias

  9. AlanOldStudent
    Member
    Posted 9 months ago #

    Thank you, Tobias, danke schoen.

    That worked for me. I appreciate the help. I'll mark this closed, but I'll have more questions later on, I'm sure.

    Alan OldStudent
    The unexamined life is not worth living—Socrates
    Gracias a la vida, que me ha dado tanto—Violeta Parra

  10. AlanOldStudent
    Member
    Posted 9 months ago #

    I'm having trouble closing this and marking it "resolved." Can you please do that for me?

  11. TobiasBg
    Member
    Plugin Author

    Posted 9 months 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!

Reply

You must log in to post.

About this Plugin

  • TablePress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic