WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Added CSS to Extra CSS class but seeing no effect (17 posts)

  1. wotnow
    Member
    Posted 2 years ago #

    Hi! First off the bat I would like to say THANKS! This plugin has saved me the drama of trying to make two columns on a page, I think, lol.
    Using the latest twenty eleven theme and your plugin on a page.

    Trying to have no borders, different font and columns equal width.
    Have used the following code in the extra css class in the table styling options. With table id=2.

    .wp-table-reloaded-id-2, .wp-table-reloaded-id-2 td, .wp-table-reloaded-id-2 th { border: none!important; border-collapse: collapse!important; border-spacing: 0px!important; }.wp-table-reloaded-id-2 .column-2 {width: 291px;} .wp-table-reloaded-id-2 .column-1 {width: 291px;} .wp-table-reloaded-id-2 td { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #373737; }

    Not sure where I am going wrong.

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. wotnow
    Member
    Posted 2 years ago #

  3. wotnow
    Member
    Posted 2 years ago #

    PS I would also like to centre the headings

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    the code needs to go into the "Custom CSS" textarea on the "Plugin Options" screen, and not into the "Extra CSS class" field. Can you try that?

    Regards,
    Tobias

  5. wotnow
    Member
    Posted 2 years ago #

    My apologies, I didnt see this section. Awesome Plugin. Thanks so much!

  6. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    no problem, you are very welcome! :-)

    Best wishes,
    Tobias

  7. wotnow
    Member
    Posted 2 years ago #

    Hi just made a small donation, keep up the good work! You are much appreciated. Don't suppose you could tell me how to add some spacing to the top of the table?

  8. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    thank you for your donation, I really appreciate it!

    To add some spacing to the top of the table, just add something like

    .wp-table-reloaded-id-2 {
      margin-top: 50px!important;
    }

    to the "Custom CSS", and adjust the value as necessary.

    Best wishes,
    Tobias

  9. ceviz ms
    Member
    Posted 2 years ago #

    Hey Tobias,
    .wp-table-reloaded-id-2 {
    margin-top: 50px!important;
    }
    targets for the table with id 2, is there any way to target something like;
    table id 5 and Column-1.
    I am trying to adjust the width of a column in a table. Dunno why but when I add a picture with NextGen Gallery shortcode ([singlepic id=1 w=160 h=80 float=]) it gets a width of 390.7px :)
    or even better can table width and column width are adjustable from somewhere in the plugin?

  10. ceviz ms
    Member
    Posted 2 years ago #

    Once again,
    here is the solution if anyone needs,
    in the WP-Tables Reloaded setting use the Custom CSS section,

    .column-1{
    width:80px;
    }

    and in any table you can use .column-1 in "Extra CSS class" field
    omg, what a plugin :D

  11. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    yes, that "Custom CSS" that you posted is good, but I'd actually recommend to use it with a table class prepended, like

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

    where 123 is the ID of your table.
    That way, you would not have to add an "Extra CSS class". And actually, in this example, an "Extra CSS class" .column-1 does not make any sense, as every table has this class (for it's first column). Also, it is a CSS class on the table, and not just a column! Thus, this would actually change the width of the entire table.

    Regards,
    Tobias

  12. ceviz ms
    Member
    Posted 2 years ago #

    Yes, thank you. Worked like a charm :)
    I am a bit out of css here as you can say.
    Is there any way to combine these then?

    .wp-table-reloaded-id-4 .column-1{
    width:80px;
    }
    .wp-table-reloaded-id-5 .column-1{
    width:80px;
    }

    thanx in advance

  13. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    great that it worked! :-)

    Yes, you can combine these two commands:

    .wp-table-reloaded-id-4 .column-1,
    .wp-table-reloaded-id-5 .column-1 {
      width:80px;
    }

    Just take the full selectors and combine them with a comma (,).

    Regards,
    Tobias

  14. ceviz ms
    Member
    Posted 2 years ago #

    Thanx again,
    Any last suggestion on vertical alignment?

    .wp-table-reloaded-id-4 .column-1,
    .wp-table-reloaded-id-5 .column-1 {
      width:80px;
    vertical-align:middle;
    }

    just wont work, not sure if interferes with the theme css :(

  15. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    that code looks good, but unfortunately, it's sometimes not this easy, for example with images in the cell.

    Can you please post the URL to the page with your table?

    Regards,
    Tobias

  16. ceviz ms
    Member
    Posted 2 years ago #

    tables are located here:
    @@vira@@dijital@@.com@@/makineler/endustriyel-baski/

    Sorry for the @@'s :D just remove them:D

  17. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    thanks for the URL.

    Now, what exactly are you trying to do here? In the code above you are talking about vertical alignment, but in the code on your site, you are doing horizontal alignment, using "text-align"... (And there's actually the semicolon missing after "center", which is why some of the CSS might not be working).

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic