WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Problems with changing color in table-header (31 posts)

  1. TCNina
    Member
    Posted 1 year ago #

    Hi Tobias,

    unfortunately I'm not very familiar with creating CSS, so I came around here to search for an answer.

    I've tried to change the color in my table-header from blue to #cccccc;
    so I used the following code in the custom-css box:

    .tablepress th {
    		background-color:#cccccc;
    	}

    But it doesn't work. Additional I'd like to have a hover-effect matching with my navigation-menu. So I would like to change the following effects:

    Now:
    Text-Color: #000000
    BG-Color: #something light blue

    To:
    Text-Color no changes
    Background-Color: #cccccc

    And on Mouse over:

    Now:
    Text-Color: #000000
    Background-Color: #something darker blue

    To:

    Text-Color: #ffffff
    Background-Color: #cc0000

    Do I have to create and use special button-images or is it possible to simply change the code?

    Kindest,

    Nina

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

  2. TCNina
    Member
    Posted 1 year ago #

    Sorry for double-posting:

    I managed to change the "unhovered" bg-color, I just forgot the "thead" in my code. ;-)

    And I got an additional question:

    Is it possible to change the color of the tiny arrow to "prev" or "next" page from your blue to my red?

    Just in case you get bored sometimes. ;-)

    Nina

  3. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Nina,

    thanks for your post.

    So, from what I understand, you were able to change the head row background successfully now?

    To also change the mouse hover color, please try this "Custom CSS":

    .dataTables_wrapper .sorting:hover {
    	color: #ffffff;
    	background-color: #cc0000;
    }

    For the "prev" and "next" buttons: These are currently images, and therefore not that easy to change as the other colors. I know that they don't match the styling of the rest of the table, but I havent't yet found the time to create new images.
    So, to change this to your red, you would need to copy the arrow images from the "img" subfolder, re-create these in red, and save them in a new folder, e.g. in "wp-content". After that, "Custom CSS" could be used to change the image URLs that are currently used. (As a quick test, you could simply replace the current arrow images with new ones, but as that change gets overwritten with every plugin update, I don't recommend it as a permanent solution.)

    Regards,
    Tobias

  4. TCNina
    Member
    Posted 1 year ago #

    Hi Tobias,

    lots of thanks for this fast helping.

    Yes, you got it. The head row bg is done and with your help the hover-function is working too. I tried to change the active and visited functions too (:hover as you told me, :visited bg-color: #990000 and .active bg-color: #ff0000), but that didn't work, neither with the thead th code nor with the _wrapper .sorting or tr code.
    Do you have any suggestions?

    And relatimg to the arrows: that's not that important. Maybe I find out how to change them in case I get bored. ;-)

    Kindest,

    nina

  5. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Nina,

    great that this worked already :-)

    There's no real "active" or "visited" state for the table head cells, as these are not links.
    Well, ok, one could argue that there is an "active" state, as the column that is currently sorted on gets highlighted as well.
    To change that, you can use

    .dataTables_wrapper .sorting_asc,
    .dataTables_wrapper .sorting_desc {
    	background-color: #ff0000;
    }

    For the arrows: You really only need the new images, the rest is rather trivial.

    Regards,
    Tobias

  6. TCNina
    Member
    Posted 1 year ago #

    Hi Tobias,

    Wow, you're amazing. Thank you soooooooo much. :-) Everything is working fine now. ;-)
    And for the arrows: Yes, I know, that's why I keep it for boring times and care about the really important things right now. ;-)

    If you'd like to have a look, what this table is good for:

    http://true-crime.info/taeterindex/

    I know that developers are proud if they see others work with their stuff ;-)

    Donation's coming soon.

    Regards,

    Nina

  7. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Nina,

    no problem, you are very welcome!
    And indeed, thanks for the link! Always happy to see how people use the plugin!

    And thank you for wanting to donate, I really appreciate it!

    Best wishes,
    Tobias

  8. embee_studio
    Member
    Posted 1 year ago #

    I know this was resolved for Nina but I tried the same code and am having no luck changing the default background color of my table header... any thoughts?

    my code:

    .tablepress thead th {
        background-color: #000;
    }
  9. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question!

    Your CSS code looks correct, so I can only assume that some CSS from your theme is interfering here.
    Can you therefore please post a link to the page with your table?

    Thanks,
    Tobias

  10. embee_studio
    Member
    Posted 1 year ago #

    Thanks for the quick response... here's the link

    http://jump-site.com/wordpress/?page_id=29

    this is just a temp development site, trying to sort some things out...

    I'm using a pretty basic theme as a starting point so I can build my own. There's not al ot of default CSS...

  11. TCNina
    Member
    Posted 1 year ago #

    Sorry for disturbing, I've still checked this "notify me via email"-option activated.

    Embee, maybe it's a question of what theme you are using? You could try to change it to "custom styles" even if you're using the theme defaults. Try to check them out if there's somewhere an option for "using custom css" and activate it?

    Greetings,

    Nina

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the link!

    From what I can see, you have simply inserted the CSS commands into your theme's "style.css" file. This is not the correct place, as the commands are then loaded before the default styling of TablePress, and thus they are overwritten again. Instead, please paste the CSS commands into the "Custom CSS" textarea on the "Plugin Options" screen of TablePress.

    Best wishes,
    Tobias

  13. embee_studio
    Member
    Posted 1 year ago #

    ahh... that was it... I was wondering about that... thank you both very much... spent way to much time slamming my head against the wall over this...

    one other question, I made some other mods to the table via my style.css and they worked... should I not do that? Should all style mods go in the custom css area?

  14. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, everything related to TablePress styling should go into the "Custom CSS" textarea on the "Plugin Options" screen. With the other changes you were just lucky, because TablePress doesn't have direct default commands for them.

    Regards,
    Tobias

  15. twt106
    Member
    Posted 1 year ago #

    hi,
    excuse me if I open again the post, but I'm neofit and I've the following problems:
    1) I've inserted these rows
    /* background riga head */
    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #502410; /* brown*/
    color: #ffbb76; /* testo ocra */
    }
    in Custom CSS of Tablepress and it doesn't work; the colour of the thead text is a colour that I use in the theme (to understand which part of the theme I'm using (a troubleshooting)), which is a child of twentyten.
    2) Then which command I've to write for changing the hover on all the rows.
    here you can see: http://allevamentodisimone.altervista.org/?page_id=89
    the site is in costruction and I've not a lot of time to spend ...
    thanks a lot bye

  16. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post, and sorry for the trouble.
    The reason why this is not working is that your theme also contains some CSS code for table styling. So, we have to override that.
    To do that, please put

    #content

    before every

    .tablepress

    like in

    #content .tablepress ...

    For 2):
    Please try this:

    #content .tablepress .row-hover tr:hover td{
      background-color:#502410;
    }

    Regards,
    Tobias

  17. twt106
    Member
    Posted 1 year ago #

    thanks very much Tobias you're very kind

  18. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem! You are very welcome!

    Best wishes,
    Tobias

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

  19. TCNina
    Member
    Posted 1 year ago #

    Hi Tobias,

    it's me again. Would you please so nice and cute to tell me how to change the color of those "next" and "previous" buttons?
    I've been searching via ftp in every directory contained in /wp-content/plugins/tablepress, from "admin" to "views" but I couldn't find the images for those blue arrows.

    Thx a lot and hope you had fun with my donations. ;-)

    Kindest,

    Nina

  20. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Nina,

    thanks for your question!

    Those arrows are no longer loaded from images, but from an icon font. See https://tablepress.org/release-announcement-tablepress-0-9-rc/ for more on this.
    To change their color, you can now use CSS code, which you can find in this post: http://wordpress.org/support/topic/css-pagination?replies=20#post-4198024

    Regards,
    Tobias

  21. TCNina
    Member
    Posted 1 year ago #

    Hi Tobias,

    thanks for answering faster than light, as usual. ;-)
    Changing the colors was so very easy now.

    Best wishes,

    Nina

  22. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Nina,

    no problem :-) You are very welcome!
    Great to hear that this helped!

    Best wishes,
    Tobias

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

  23. LasPalmas
    Member
    Posted 1 year ago #

    Hi Tobias,

    I've tried everything you say here, but it's not working properly.

    This is the website page:

    http://www.costa-del-tennis.com/tennis-camps-barcelona-spain/

    I tried adding #content before on the plugin options (custom css seccion) but nothing..I can't change the font size either.

    Do you know if I'm doing something wrong? Thank you so much!

    Best!

  24. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    Now, I'm a little bit confused. The link that you posted does not contain a table, from what I can see? Where you already able to solve the problem, or does it still exist? Can you then provide some more details, please? Thanks!

    Regards,
    Tobias

  25. LasPalmas
    Member
    Posted 1 year ago #

    I'm sorry Tobias. I put it down because I wasn't sure when you would respond. It's back there! Let me know whenever you can.

    Thank you!

  26. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks!

    So, am I correct with the assumption, that you want that table row to be red? And do you really want the hover effect?

    So, my suggestion is: Uncheck both the "Alternating row colors" and "Row Highlighting" checkboxes on the table's "Edit" screen. Then, replace the current "Custom CSS" with just this:

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

    Regards,
    Tobias

  27. LasPalmas
    Member
    Posted 1 year ago #

    Hi Tobias,

    Thank you so much for your response. I did what you suggested, but I wanted to keep the hover effect. If I check the Row Highlighting option, the background I chose changes. I just chose red in order to see the different. It doesn't matter the color. I just wanted to be able to choose a background color and a hover color.

    I also tried adding text-align: center; but it didn't work for me. Do you know why?

    This is the CSS I have:

    .tablepress-id-1 tbody td {
    background-color: #e6e3e3;
    text-align: center;
    }

    .tablepress-id-1 .row-hover tr:hover td {
    background-color: #cccaca;
    }

    .tablepress-id-1 {
    text-align: center;
    }

    Thank you!

  28. LasPalmas
    Member
    Posted 1 year ago #


  29. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the clarification. From what I can see, the centering and the original background color works just fine. The hover color is currently not working, because you have unchecked the "Row Highlighting" checkbox.

    Regards,
    Tobias

  30. LasPalmas
    Member
    Posted 1 year ago #

    It's perfect now. Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic