Changing the colour for search box and text

  • I started to use this plug-in today, and it is awesome. But I am using a dark background to my webpage and I would like to change the font and colours of the text around the “Show XX entries” and “search” at the top plus the “showing xx of xx” at the bottom.
    I’m a novice at CSS but I would like to get some idea of how to do this. I’ve put a couple of images below to illustrate my issue. Thanks in advance!

    Image of top | Image of bottom

    • This topic was modified 3 days, 17 hours ago by nleeder.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi!

    Thanks for your post and sorry for the trouble!

    Can you please send me a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Best wishes,
    Tobias

    Thread Starter nleeder

    (@nleeder)

    Thanks Tobias. The page is: https://nickleeder.com/buzzword-dictionary/

    (I have only just published it!)

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link! To set those colors to e.g. white, please add this to the “Custom CSS” text area on the “Plugin Options” screen of TablePress:

    dt-container {
        color: #ffffff;
    }

    Best wishes,
    Tobias

    Thread Starter nleeder

    (@nleeder)

    Thanks Tobias. I might be doing something wrong. I have added the code above to the custom CSS (shown below at the end) and the text with the “entries per page”, “search”, and the text at the footer of the table inc the page numbers are still a grey. Can you look at proposing what to change please. Also, I’d love the active page to show yellow (#DEA800) ??.

    /* CSS for all tables / 
    / End / 

    / CSS for Buzzword Dictionary / 

    / This sets the heading row color */
    .tablepress-id-2 thead th {
    background-color: #DEA800;
    color: white;
    font-weight: bold;
    }

    /* This set how the headings change when you hover over */
    .tablepress-id-2 thead .sorting_asc,
    .tablepress-id-2 thead .sorting_desc,
    .tablepress-id-2 thead .sorting:hover {
    background-color: #DFC067;
    color: #49545C;
    font-weight: bold;
    }

    /* These set the width and font information of each column */
    .tablepress-id-2 .column-1 {
    width: 15px;
    font-weight: normal;
    font-size: 14px;
    }

    .tablepress-id-2 .column-2 {
    width: 45px;
    font-weight: bold;
    font-size: 16px;
    }

    .tablepress-id-2 .column-3 {
    width: 200px;
    font-weight: normal;
    font-size: 14px;
    }

    .tablepress-id-2 .column-4 {
    width: 200px;
    font-weight: normal;
    font-size: 14px;
    }

    .tablepress-id-2 .column-5 {
    width: 200px;
    font-weight: normal;
    font-size: 14px;
    }

    .tablepress-id-2 .column-6 {
    width: 200px;
    font-weight: normal;
    font-size: 14px;
    }

    /* This sets the behaviour of odd rows of the table */
    .tablepress-id-2 .odd td {
    background-color: #141414;
    color: white;
    }

    /* This sets the behaviour of even rows of the table */
    .tablepress-id-2 .even td {
    background-color: #2A2D30;
    color: white;
    }

    /*This sets how a row behaves when you hover over it */
    .tablepress-id-2 .row-hover tr:hover td {
    background-color: #DEA800;
    color: white;
    font-weight: bold;
    }

    /*This changes the colours for the headers with search etc */
    .tablepress-id-2 dt-container {
    color: #ffffff;
    }

    /* End */
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    ah, my bad… It looks like a forgot a . before dt-container when doing copy/paste. Sorry.

    Please try again with

    .dt-container {
    	color: #ffffff;
    }

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.