WordPress.org

Support

Support » Plugins and Hacks » WP-Table Reloaded » [Resolved] [Plugin: WP-Table Reloaded] column CSS style

[Resolved] [Plugin: WP-Table Reloaded] column CSS style

  • Hi,
    I’m trying to format the 1st column of the 1st table, the heading column, but all settings are ignored. This is the code I use:

    .wp-table-reloaded-id-1 .column-1 td {
    font-size: medium;
    font-weight:bold;
    }
    I tried also with this:
    .wp-table-reloaded-id-1 .col-1 td {
    font-size: medium;
    font-weight:bold;
    }
    but both do nothing, while, for testing, this works:
    .wp-table-reloaded-id-1 .row-14 td {
    font-size: medium;
    font-weight:bold;
    }
    row 14 is the last of the table.
    Do you know why?
    Thanks
    Riccardo

Viewing 15 replies - 1 through 15 (of 30 total)
  • Plugin Author TobiasBg

    @tobiasbg

    Hi,

    thanks for your question.

    When using the .column-N selector, you must not use an additional td in the CSS, as the column is a td already, while the .row-N belongs to a tr, so the td is necessary 🙂

    This will work:

    .wp-table-reloaded-id-1 .column-1 {
      font-size: medium;
      font-weight: bold;
    }

    Best wishes,
    Tobias

    Tobias,

    I’ve just started using your plugin and can’t get the column widths or text size to change with the custom .css.

    When I try

    .wp-table-reloaded-id-1 .column-2 {
    font-size: large;
    font-weight: bold;
    }

    in the Custom CSS Class area for my table, like you show above, my text size doesn’t change. I can’t figure out why I can’t get the text size, or column width to change. Can you please help me troubleshoot this?

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

    can you please provide a link to the page with your table? That would make it a lot easier to find out what’s wrong.

    Thanks!
    Tobias

    Thanks Tobias. The link to the page is:

    http://www.tuesdaynighttwilights.com/sponsors-2

    I just published it as password protected. The password is table.

    Right now, I have in Table Styling Options, Custom CSS Class:

    .wp-table-reloaded-id-1 .column-1 {
    width: 600px;
    }

    and in DataTables JavaScript Features, Custom Commands:

    “bAutoWidth”: false

    as an example of making the column width wider than the image logo. It seems like whatever I do, I can’t override the autowidth, or get any .css commands to work.

    Thanks a bunch for the help.

    Best regards,
    Glenn

    Plugin Author TobiasBg

    @tobiasbg

    Hi Glenn,

    thanks for the link and for the explanation.

    There’s a tiny piece of misunderstanding here:

    Your CSS code (which is perfectly ok) needs to go into the “Custom CSS” textfield on the “Plugin Options” screen, and not into the “Custom CSS class” field on the “Edit” screen.

    Once you move it, the CSS, together with the bAutoWidth code, which is correct, should work as expected.

    Regards,
    Tobias

    Awesome Tobias!

    Simple, and of course, it works.

    I kept beating my head against the wall, and knew I was doing something wrong.

    Thank you so much for an awesome plugin that will make my life so much easier. I’ll have lots of use for it once I get all the nuances figured out.

    Also, thanks for making life so much easier for nyoobs, non-html coding types like myself, for whom html, .css, and .php most often looks like an indecipherable foreign language.

    Dankeschön,
    Glenn

    Plugin Author TobiasBg

    @tobiasbg

    Hi Glenn,

    great to hear that you got it to work!

    And thanks for your kind words, that really nice to hear!

    Best wishes,
    Tobias

    ahh the answer to my question on the transparency lies here, i believe.

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

    yes, if you have been pasting the code from the other post into the “Custom CSS class” field, this is your answer 🙂

    Regards,
    Tobias

    Hi Tobias,

    If i insert a picture, then have in the cell before and after picture 19 px space. I would like remove this space, and i would like to put the picture center in cell.
    Where i change the table cell options?

    This is link, the table is in this site, after an other table.
    http://www.trademagazin.hu/2011-es-programok-vasarok/

    Thank You!
    Richard

    Sorry for my bad english

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

    this space is coming from your theme’s CSS.

    To remove it, please add the following to the “Custom CSS” textarea on the “Plugin Options” screen:

    .wp-table-reloaded img {
      margin:0!important;
    }

    To center the images, you can use this CSS, which will center the text in the first column:

    .wp-table-reloaded-id-2 .column-1 {
      text-align: center!important;
    }

    Regards,
    Tobias

    Thobias,

    You are a Superman! :-)))
    End of problem.
    Thank You very much!

    Richard

    Plugin Author TobiasBg

    @tobiasbg

    Hi Richard,

    you are welcome, no problem! 🙂

    Best wishes,
    Tobias

    alrite.. i thought I would stop head banging but yea i still have to, apparently.

    Basically I want to reduce my column width and cell spacing but im not able to. No matter what I try, it does not work! Obviously i’m doing something wrong.. but this is what i’ve done till now:

    Custom Commands: “bAutoWidth”: false

    Custom CSS (plugin option page) :

    .wp-table-reloaded-1 .column-1 {
    width: 10px;

    (yes, i did read the documentation.. copy pasted things and changed the values after refreshing umpteen no. of times.. but to no avail)

    tried many variations to it.. it still wudnt work.. my entire table is just intact. No matter what value I add to the width. I wanna reduce my entire column and rows (i dont know what u call.. width or cell spacing? or maybe cell padding) spacing thereby shortening the entire table.

    http://i53.tinypic.com/33dfub6.jpg

    So you see those extra spacing around all columns? and rows also.. Basically I just wanna shorten everything.

    Help please!

    Plugin Author TobiasBg

    @tobiasbg

    Hi,

    judging from your screenshot, you might need the following code, which will remove extra space around images in tables (your checkmarks), and it will reduce the space between the text and the cell border (“padding” in HTML terms):

    .wp-table-reloaded-id-1 img {
      margin:0!important;
    }
    
    .wp-table-reloaded-id-1 td,
    .wp-table-reloaded-id-1 th {
      padding:4px!important;
    }

    So, actually you don’t have to mess with the column widths, but you will make the content in the cells (which includes that padding) smaller.

    If this does not work, can you please provide a link to your table, as it is easier to help than, because I can see the actual code – compared to just looking at a screenshot.

    Regards,
    Tobias

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Resolved] [Plugin: WP-Table Reloaded] column CSS style’ is closed to new replies.
Skip to toolbar