Where is this code located?

  • Resolved avadhut2013

    (@avadhut2013)


    2 years, 3 months ago

    Hi,

    I am using TablePress to create tables.

    In past, my associate created a table and it worked well, it’s showing colored tick and cross marks.

    He also used a CSS code (tdcheckbox biwswsp) it seems (see the screenshot) without which the colored tick and cross marks not possible. Now, I am unable to find that code. Where should I locate it? I have seen “Additiona CSS” in Generatepress theme, it’s not there.

    Except this code, everything else is I am able to create and see.

    I am attaching all the screenshots.

    URL where this Table can be seen: https://www.financewalk.com/breaking-into-wall-street…/

    Thank you.

    Images:

    https://ibb.co/7rnGFWW
    https://ibb.co/2sLN1pH
    https://ibb.co/NnfSwyy

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

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

    (@tobiasbg)

    2 years, 3 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    I’m not exactly sure, but it appears that the CSS that changes the font and color of these symbols is in some “Custom CSS” text area of the Elementor editor for this particular page.

    Regards,
    Tobias

    Thread Starter avadhut2013

    (@avadhut2013)

    2 years, 3 months ago

    Thank you. I couldn’t find it there.

    If I want to use such Green and Red colored tick boxes, how to do it in Tablepress?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    2 years, 3 months ago

    Hi,

    essentially, you will need HTML code like

    <div class="symbol-green">✔</div>

    or

    <div class="symbol-red">✖</div>

    to show the symbols in the table cells.

    To color these, you could tpcssadd this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .symbol-green {
    font-size: 20px;
    color: green;
    font-weight: bolder;
}
.symbol-red {
    font-size: 20px;
    color: #DC143C;
    font-weight: bolder;
}

    Regards,
    Tobias

    Thread Starter avadhut2013

    (@avadhut2013)

    2 years, 3 months ago

    Thank you very much. It worked.

    How can I adjust the size of colums?

    Like this table (https://ibb.co/PM9YbcS) where I want to reduce the size of the column.

    Thread Starter avadhut2013

    (@avadhut2013)

    2 years, 3 months ago

    Secondly, the green tickmarks change in not taking place on Mobile Device. Is there any code for it?

    https://ibb.co/t84xwR1

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    2 years, 3 months ago

    Hi,

    changing the column widths is possible with CSS code, see e.g. https://tablepress.org/faq/column-widths/

    As for the color not working on mobiles: I assume that this is simply a caching issue, where your mobile is maybe not yet seeing the new CSS code. Maybe try in a private/incognito browsing tab, to be sure. The CSS code itself is fine and will work on mobile as well.

    Regards,
    Tobias

    Thread Starter avadhut2013

    (@avadhut2013)

    2 years, 3 months ago

    I am using this code:

    

@media screen and (max-width: 768px) {
    .tablepress {
    font-size: 16px;
    }
    }

.symbol-green {
    font-size: 20px;
    color: green;
    font-weight: bolder;
    }

.symbol-red {
    font-size: 20px;
    color: #DC143C;
    font-weight: bolder;
    }

.tablepress-id-1 .column-2 {
    width: 400px;
    }

.tablepress-id-1 .column-3 {
    width: 10px;
    }

.tablepress-id-1 .column-1 {
    width: 10px;
    }

    For this table: https://ibb.co/ZGWkVSj

    URL: https://innergpsgurus.com/energy-vortex-positive-signs-and-benefits/

    I could change the width of the column. However,

    1. I am unable to see the Green color tickmarks on mobile device. I cleared cache

    2. I am unable to make the column data centre-aligned. How to do it?

    Thank you.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    2 years, 3 months ago

    Hi,

    I can see the tickmarks on my phone without issues, so I’m not sure what’s going on for you… 🙁

    To center align them, add

    text-align: center;

    to the .symbol-green CSS code.

    Regards,
    Tobias

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

The topic ‘Where is this code located?’ is closed to new replies.