How to bring the content to the of celles

  • Resolved shss

    (@shss)


    4 years ago

    Hello Tobas, thanks a million for the awesome plugin!

    I recently started to add red buttons (you can see in the link) using the following code;

    .tablepress-id-123 .column-4 a {
    white-space: nowrap;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 12px;
    border-radius: 5px;
    background-color: #de1414;
    }

    However, as you can see the buttons are not centered. They are positioned-Top. Can you please tell me how to bring the buttons in the center of the cells?

    Also, let’s say I want to bring the same change to 5 more tables on my website, can I add the table IDs right next to each other? Here is an example:

    .tablepress-id-123,124,125,126,127,128,129,130 .column-4 a {
    white-space: nowrap;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 12px;
    border-radius: 5px;
    background-color: #de1414;
    }

    Thank you so much for the awesome support

    • This topic was modified 4 years ago by shss.

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

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

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    To vertically center the buttons, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-123 .column-4 {
  vertical-align: middle;
}

    Applying the CSS to multiple tables requires copying the full CSS selector part (the part before the {) as a comma-separated list, i.e.

    .tablepress-id-123 .column-4 a,
.tablepress-id-124 .column-4 a,
.tablepress-id-125 .column-4 a,
.tablepress-id-126 .column-4 a {
  white-space: nowrap;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 12px;
  border-radius: 5px;
  background-color: #de1414;
}

    An easier approach might therefore be to add a CSS class to your buttons, in the HTML code, like

    <a href="..." class="best-price-button" rel="noopener noreferrer" target="_blank">See The Best Price</a>

    Then, you would only need the CSS code

    .tablepress .best-price-button {
  white-space: nowrap;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 12px;
  border-radius: 5px;
  background-color: #de1414;
}

    to change all buttons in one go.

    Regards,
    Tobias

    Thread Starter shss

    (@shss)

    As always, your support is truly amazing! Thanks a lot

    Can you please elaborate on this part?

    “An easier approach might therefore be to add a CSS class to your buttons, in the HTML code, like”

    Where do I exactly place that CSS code? Should I go to appearance > custom CSS and add the CSS there?

    It’s just I have never added anything to the HTML.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    this essentially means to use slightly different HTML code for the links in the table cells that you are then changing to look like buttons.
    Note the extra class="best-price-button".
    This goes into the HTML for the link button in every cell.

    The CSS code should go into the “Custom CSS” text area on the “Plugin Options” screen of TablePress.

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to bring the content to the of celles’ is closed to new replies.