• Resolved yellowtangylemon34

    (@yellowtangylemon34)


    Hello, since the update to version 3.0, some css codes no longer work.

    I would like to know how to put the search box on the left and how to change the background and text color of the hovered row ?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi!

    Thanks for your post and sorry for the trouble!

    For the hovered row styling, please see https://tablepress.org/faq/change-color-highlighting-hovered-rows/

    Moving the search field to the left with CSS is now much more complex (a side effect of some important other changes). It can however be done with a Shortcode parameter. 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!

    Regards,
    Tobias

    Thread Starter yellowtangylemon34

    (@yellowtangylemon34)

    The css code you provided to change colors when rows are hovered works fine. Thanks.

    Here is the link to my site that you asked for: https://bit.ly/3CISTYU

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    I think I found a CSS solution for this! Please add this to the “Custom CSS” text area on the “Plugin Options” screen of TablePress:

    #tablepress-9_wrapper .dt-layout-row:first-child .dt-layout-end {
    justify-content: flex-start;
    margin-left: 0;
    }

    Best wishes,
    Tobias

    Thread Starter yellowtangylemon34

    (@yellowtangylemon34)

    It works thank you very much !

    But on mobile the search box is in the middle, it would be possible to put it on the left ? Before the 3.0 update, it was on the left for mobile devices.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    ah, I see.

    For that, please extend the code above to

    #tablepress-9_wrapper .dt-layout-row:first-child .dt-layout-end {
    justify-content: flex-start;
    margin-left: 0;
    flex-direction: row;
    }

    Best wishes,
    Tobias

    Thread Starter yellowtangylemon34

    (@yellowtangylemon34)

    This works as well. Thank you very much for your quick and efficient support.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi @yellowtangylemon34,

    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 in the plugin directory. Thanks!

    Hello,

    I’m also having issues with my search box having moved from the left side to the right side with the update. I tried adding the CSS you described above but the search box is still on the right side.

    Here is the custom CSS I have currently in the Plugin Options:

    .dt-container .dt-search input {
    width: 200px;
    }

    .dt-container .dt-search {
    float: none;
    text-align: left;
    }

    .tablepress a:hover {
    text-decoration: underline;
    color: #0bf;
    }

    #tablepress-9_wrapper .dt-layout-row:first-child .dt-layout-end {
    justify-content: flex-start;
    margin-left: 0;
    flex-direction: row;
    }

    Any advice?

    Thanks,
    Brian

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi Brian,

    Sorry to hear that you are also affected by this change. Please post a link to the page with the table where this problem happens, so that I can take a direct look. Thanks!

    Regards,
    Tobias

    Hi Tobias,

    Here’s one place I’m using it for the “gas finder”: https://www.mathesongas.com/gases/

    Thanks,

    Brian

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi Brian,

    Thanks for the link. You will just need one small change: The 9 in the code needs to be changed to a 19 for you, as that’s your table’s ID.

    Best wishes,
    Tobias

    Ha! Of course. I was wondering about the significance of the wrapper definition. This works, and I repeated the CSS for another table with another ID (there is probably a more elegant way to handle multiple tables, but it works).

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi @brianscully,

    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 in the plugin directory. Thanks!

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Css code for 3.0 update’ is closed to new replies.