Cell colouring and image behaviour

  • Resolved Chuckie

    (@ajtruckle)


    8 years, 8 months ago

    I started to get help with this before and I am going to try again.

    I have a couple of main issues with the linked post.

    1. I am using a certain theme for my blog and the table is not rendering correctly. I can’t see the text on the background and, apart from changing the theme back to a default, I don’t know how to fix it.

    2. If I view this post on a iPad it does not render right. All images are shown at 100% so the table is winder than the page. How can I make this work better? I thought:

    The table show the images shrinked down, so shrinked if needed so it all fits. Then, when you click it, it enlarges to full size.

    3. I can’t work out how to center images in the cell.

    Sorry if these are answered before.

    Thank you.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter Chuckie

    (@ajtruckle)

    8 years, 8 months ago

    I have looked through the FAQ and fixed some of it. I used this custom styling:

    .tablepress-id-3,
.tablepress-id-3 tr,
.tablepress-id-3 tbody td,
.tablepress-id-3 thead th,
.tablepress-id-3 tfoot th {
	border: none;
}

.tablepress-id-3 {
	width: auto;
	margin: 0 auto 1em;
}

.tablepress-id-3 .row-1 td,
.tablepress-id-3 .row-2 td,
.tablepress-id-3 .row-3 td,
.tablepress-id-3 .row-4 td,
.tablepress-id-3 .row-5 td {
	background-color: #333;
}

    Now the borders have gone, the background matches the style I am using.

    But:

    1. I still have the overall width / image size issue.
    2. I still have the image alignment issue.
    3. The highlight for each row needs to be less contrasting.

    Thread Starter Chuckie

    (@ajtruckle)

    8 years, 8 months ago

    I have chosen this colour for the highlighting:

    .tablepress .row-hover tr:hover td {
	background-color: #A21C33;
}

    But I am colour blind so I really do not know if I have chosen a sensible counterpart and I welcome your input about that.

    The other two issues still remain.

    Thread Starter Chuckie

    (@ajtruckle)

    8 years, 8 months ago

    I have installed a plugin WP Featherlight and updated all my image links. Now it works much much better on a iPad and I am happy with my images. The alignment issue is automatically resolved.

    My request about the highlight colour still stands.

    Also, is it possible to make the editor grid use more space on my display rather than small boxes? 🙂 Great plug in.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 8 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Good to hear that you were able to find solutions for your questions already! 🙂
    About the highlight color: To be honest, I would turn off the Row Highlighting here. It’s not necessary for a table like this.

    Regards,
    Tobias

    Thread Starter Chuckie

    (@ajtruckle)

    8 years, 8 months ago

    Thanks Tobias. I achieved what you said by setting the hover colour as #333. Was that the right way? If I just remove the style code about the hover colour it just goes back to bright highlighting.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 8 months ago

    Hi,

    you could simply uncheck the checkbox on the table’s “Edit” screen to turn off the effect.

    Regards,
    Tobias

    Thread Starter Chuckie

    (@ajtruckle)

    8 years, 8 months ago

    Great. That was better.

    What about my comment concerning the size of the table editor when creating the table. Could they be bigger?

    And/or maybe more options in the advance cell editor like heading text etc?

    Just thoughts. It is a cool tool. Thanks.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 8 months ago

    Hi,

    ah, missed that question, sorry. You could either increase the cells via drag and drop in the bottom right corner (just for that editing session), or use the TablePress Extension from https://tablepress.org/extensions/input-field-size/ to permanently increase the input fields.

    I currently don’t plan to add more options to the “Advanced Editor”. Headings don’t belong in tables, in my opinion, as that leads to “abuse” of tables for styling and layout purposes.

    Regards,
    Tobias

    Thread Starter Chuckie

    (@ajtruckle)

    8 years, 8 months ago

    Tables seemed the right way. I could not work out how to lay the image and text without a table.

    Otherwise I would not have used it.

    Is there alternative that makes same effect as I have now without a table?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 8 months ago

    Hi,

    no worries, you are fine. Your table is probably an edge case. Just using regular HTML and CSS in the page would also work, i.e. using headings and images that “float” on the page. But now that you have a solution, you can stick to it.

    Regards,
    Tobias

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Cell colouring and image behaviour’ is closed to new replies.