WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] column CSS style (31 posts)

  1. infinito62
    Member
    Posted 3 years ago #

    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

  2. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  3. MadDog_
    Member
    Posted 3 years ago #

    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?

  4. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  5. MadDog_
    Member
    Posted 3 years ago #

    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

  6. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  7. MadDog_
    Member
    Posted 3 years ago #

    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

  8. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  9. nettaP
    Member
    Posted 3 years ago #

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

  10. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  11. rszarvas
    Member
    Posted 3 years ago #

    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

  12. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  13. rszarvas
    Member
    Posted 3 years ago #

    Thobias,

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

    Richard

  14. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Richard,

    you are welcome, no problem! :-)

    Best wishes,
    Tobias

  15. malania
    Member
    Posted 3 years ago #

    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!

  16. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  17. malania
    Member
    Posted 3 years ago #

    well, it did reduce my overall table but I still wanted to reduce it more. But anyway, I'm happy with that. Thanks a lot ^_^

  18. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    Hi,

    well, it's kind of hard to find the solution to this without actually seeing the page (with which I could also run tests). :-)

    This might also help:

    .wp-table-reloaded-id-1 {
      width: auto!important;
    }

    Best wishes,
    Tobias

  19. bistro44
    Member
    Posted 3 years ago #

    I've been reading a lot of your posts on custom CSS commands for wp-table and I would not bother you but I honestly couldn't find anything addressing my specific issue. I'm sorry to bother you.

    I see the custom CSS text area on the "plugin options" page but I also noticed a place to enter a custom CSS class in the "table styling options" within each table. I would like to do three things:

    1) Reduce cell padding on all tables
    2) Make all tables 300px wide
    3) And if possible, Justify all tables to right (so that I have a blank area on the left of my pages)Like this page below: http://lifunforless.com/new-page/

    The reason I'm trying to position tables to right is that I would like to eventually figure out how to position images to the left of tables.. kind of like a third column. I don't know if the way I did this is going to cause problems positioning images, text etc. to the left of tables.. do you see any problems doing things this way?

    My website: http://lifunforless.com

    Also, What is the "custom CSS class" text area in the "table styling options" used for?

    Thank you so much for being here.. you are like a god to me!!!

  20. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    Hi,

    thanks for your post.

    This CSS code should do what you want:

    .wp-table-reloaded td,
    .wp-table-reloaded th {
      padding: 4px!important;
    }
    
    .wp-table-reloaded {
      width: 300px!important;
      float: right!important;
    }

    That code needs to go into the "Custom CSS" textarea on the "Plugin Options" screen.

    The "Custom CSS class" field on the "Edit" screen of each table has a different purpose. With that, you can add your own CSS classes to tables, so that you can apply your CSS code to several tables at the same time.

    Regards,
    Tobias

  21. littletrooper
    Member
    Posted 2 years ago #

    Hi Tobias,

    I'm using the plugin to insert a table at the bottom right of my site (in a widget area) for a subscription form.

    Here's my site: http://bit.ly/p0oODq

    However, I tried to use "valign=middle" for the tr because as you can see, the labels of the form don't align with the fields.

    Do I need custom CSS to do this? Trying to figure it out but I'm stumped. Thanks!

    NOTE: So I finally got the text to center although I'm not sure what did the trick (since I tried so many things and added custom CSS as you instructed to some of the people above.)

    NOW my only problem is, there's a huge space below the image. Already insert the decrease padding in the custom CSS. Any idea how I can get of the extra space? Thanks!

  22. littletrooper
    Member
    Posted 2 years ago #

    Okay, now the text is off-center again. :(

  23. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    this should be possible with the following CSS code. However, you are not using WP-Table Reloade for this table, so you need to put this into the theme's style.css. And as the table does not have an ID or class, you can only use the element selector, so this will apply to all tables that you have on your site.

    table td {
      vertical-align: middle;
    }

    Regards,
    Tobias

  24. littletrooper
    Member
    Posted 2 years ago #

    Tobias,

    Thanks for your help! I realized the reason why the custom CSS stuff I placed in the Plugin Options weren't showing up: it was because I exported the table and edited things from there.

    That's when things got messy.

    Thank you for the speedy response and for the fantastic plugin. Really makes doing tables a whole lot easier.

    One last thing though: I've been trying to get the "Sign up" button to align in the middle of the column to no avail. It's a small thing and I'm already happy with the way the table looks, but if you could just help out, then it would make the table perfect.

    THANK YOU ONCE AGAIN!

  25. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    the <div> that wraps the button still has some bottom margin applied.

    Some CSS code like

    table .shopform_btn {
      margin: 0!important;
    }

    should change that.

    Best wishes,
    Tobias

  26. littletrooper
    Member
    Posted 2 years ago #

    Tobias, it works perfectly! You're a genius!

    Thank you very much!

  27. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    no problem, you are welcome!

    Best wishes,
    Tobias

  28. top_banana3
    Member
    Posted 2 years ago #

    Hi Tobias, I have a strange problem that I really hope you can help me with.

    I am using table reloaded, have a table with 1 row and 2 cells, all I simply need to do is put an image slider in the first and an embedded youtube video in the other. They both work fine, but they will not line up.

    http://croftweb.co.uk/chaser/?page_id=1411

    I have created a test page for you to have a look at it, really hope you can help.

    Liam

  29. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    this misalignment is the result of a margin on the images. Please try adding this "Custom CSS" code on the "Plugin Options" screen that should fix this:

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

    Best wishes,
    Tobias

  30. top_banana3
    Member
    Posted 2 years ago #

    Superb!

    Thanks Tobias, I have been scratching my head for hours with that. I new it was something to do with margin, but couldnt figure out how to sort it!

    Cheers

    Liam

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic