WordPress.org

Ready to get started?Download WordPress

Forums

Column Styling in WP-Table-Reloaded (6 posts)

  1. despiross
    Member
    Posted 1 year ago #

    I have a series of tables that need to be styled so that images inserted in the 2nd column are always centered (horizontally and vertically) without a border.

    See an example here by expanding item 1.1 - http://www.childrensmuseum.org/midnorth/work-plan/aesthetics

    A web developer styled the first table directly in the site's CSS and now I cannot seem to get any custom CSS to work in the Plug-In Options.

    Any advice?

  2. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    your webdesigner seems to have added the code the theme's "style.css" file. This is ok, but do to that it is not easily changeable in the "Custom CSS" textarea. However, that should not be a problem.

    Please follow these steps:
    1. Add

    .wp-table-reloaded-second-column-image-centered {
      vertical-align: middle !important;
    }
    .wp-table-reloaded-second-column-image-centered img {
      margin: 5px auto !important;
    }

    to the "Custom CSS" textarea.
    2. For every table that has an image in the 2nd column that you want to center, add

    wp-table-reloaded-second-column-image-centered

    into the "Extra CSS classes" field on that table's "Edit" screen.

    Regards,
    Tobias

  3. despiross
    Member
    Posted 1 year ago #

    Thank you for the quick reply!

    I added these two items to the Custom CSS and table 1.1 and it looks like the image is now centered in the cell, but the vertical alignment didn't work.

    Also, how can I remove the image border?

    Thanks, again for your speedy help!!

  4. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    ah, the code is wrong. I forgot something... Sorry.
    Here's the fixed code, that will also remove the borders as well as the shadows on the images:

    .wp-table-reloaded-second-column-image-centered .column-2 {
      vertical-align: middle !important;
    }
    .wp-table-reloaded-second-column-image-centered img {
      margin: 5px auto !important;
      border: none !important;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    }

    Regards,
    Tobias

  5. despiross
    Member
    Posted 1 year ago #

    SUCCESS!! Thank you so very much!

  6. TobiasBg
    Member
    Posted 1 year ago #

    Hi,

    sure, no problem! You are very welcome!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Topic