Custom CSS not working properly

  • Resolved dpasserone

    (@dpasserone)


    6 years, 3 months ago

    Hi!
    I have two problems with custom CSS:

    1) The table in the linked page should have some colors that I want applied to other tables of a user defined class. I assign this user defined class in the element “Text Block” of the page where I put the code [table id=10 /] and the user-defined class “trainingszeiten”.

    Then, in the custom CSS of the plugin I assign lines like

    .trainingszeiten .row-1 td {
    background-color: #606060 !important;
    color: #ccffff !important;
    }

    Unfortunately, such lines are not working good unless I delete the files
    tablepress-custom.min.css from the wp-content directory. If I don’t delete the files manually, the first line get of a completely different color with respect to the one required in the CSS. This is a strange behavior. How can I solve it?

    2) An additional problem is that in the “Edit” section of the table I must tick the
    “The first row of the table is the table header.” to access the DataTable function
    “Enable horizontal scrolling, to make viewing tables with many columns easier.”
    on the cell phones.

    BUT at this point, the table head row gets (on the PC screen) a slightly different column width with respect to the other rows, and the effect is not good.

    Thank you in advance!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Let’s start with 2) first: Indeed, the table header row is required for that feature. However, we can add it via a different method. For that, please uncheck the “Use DataTables” checkbox and instead use the scroll mode that the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ offers.

    For 1): That sounds strange. I assume that this is caused by your caching and CSS minification plugin somehow. Have you tried clearing that plugin’s cache after making these modifications?
    By the way, instead of adding the CSS class “trainingszeiten” to the Text Block, you could add it directly to the table, in the field “Extra CSS classses”, on the table’s “Edit” screen.

    Regards,
    Tobias

    Thread Starter dpasserone

    (@dpasserone)

    Thank you Tobias,

    I progressed a lot thanks to your help.

    1) For the moment I disabled the CSS minimization.
    2) I installed the extension and have the table responsive
    3) I changed to Extra CSS in the table edit screen.

    Just an extra point: I would like to have all columns the same width, but the “width” field does not seem to work in the Custom CSS. Rather, it seems that the column width is determined by the length of the text in the head row.

    Can you help here? Please see my table for an illustration
    https://limmatsharks.com/portfolio-item/jugendgruppe/

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    the columns in the “Trainingszeiten Jugend” all have the same width, from what I can see? Did you already find a solution?

    Regards,
    Tobias

    Thread Starter dpasserone

    (@dpasserone)

    er…. they have not. FREITAG is much thinner than DONNERSTAG

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    well, I wouldn’t say “muhc thinner”, but now I see a difference, yes.

    Instead of what you tried, please try

    .trainingszeiten thead th,
.trainingszeiten tbody td {
  width: 12.5%;
}

    Regards,
    Tobias

    Thread Starter dpasserone

    (@dpasserone)

    Yes ?? We are in Switzerland, everything will be measured with great precision…
    This with 12.5% works, but not when responsive=scroll is activated. There, I come back to the old behavior…

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    I can only confirm this (the “wrong” widths) when I reduce the browser window width so that I can actually scroll the table.
    The reason for this basically is that the browser doesn’t really want to make the table scrollable. The browser would much rather like to keep everything visible, which is why it disobeys your wishes regarding the width.

    You could therefore maybe also experiment with

    .trainingszeiten tbody td {
    white-space: nowrap;
}

    which will prevent the browser from shrinking the columns by adding automatic line breaks. You might however have to add some manual line breaks (like moving the place below the time, by pressing “Enter” in the table).

    Regards,
    Tobias

    Thread Starter dpasserone

    (@dpasserone)

    Well now I am very happy with the result. Thank you!

    Best , Daniele

    Plugin Author Tobias B?thge

    (@tobiasbg)

    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!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Custom CSS not working properly’ is closed to new replies.