WordPress.org

Support

Support » Plugins and Hacks » TablePress » [Resolved] Problems with changing color in table-header

[Resolved] Problems with changing color in table-header

  • 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/

Viewing 15 replies - 1 through 15 (of 30 total)
  • 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

    Plugin Author TobiasBg

    @tobiasbg

    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

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

    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:

    Tรคterindex

    I know that developers are proud if they see others work with their stuff ๐Ÿ˜‰

    Donation’s coming soon.

    Regards,

    Nina

    Plugin Author TobiasBg

    @tobiasbg

    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

    embee_studio

    @embee_studio

    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;
    }

    Plugin Author TobiasBg

    @tobiasbg

    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

    embee_studio

    @embee_studio

    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…

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

    embee_studio

    @embee_studio

    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?

    Plugin Author TobiasBg

    @tobiasbg

    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

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Resolved] Problems with changing color in table-header’ is closed to new replies.
Skip to toolbar