Having some confusion

  • Resolved shoaib11027

    (@shoaib11027)


    8 years, 7 months ago

    Hello,

    Hope you are fine, First of all thanks for this wonderful plugin.

    I added your table on two pages of my website. on the first page, it’s working cool. but on another page, it shows the images and text a bit bigger and it’s not fully visible too, we need to use the horizontal scroll-bar to see the full columns.

    Also if you notice, you’ll see that the text and images are not center-aligned, how can i do it?

    Looking forward to your kind response

    Thank you!

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

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Do you mean the tables at https://www.fxforever.com/forex-signals/ and at https://www.fxforever.com/ ?

    The first one was not created with TablePress, and the plugin that created it simply adds its own CSS styling for smaller font sizes, etc. while TablePress leaves this to the theme defaults.

    You could assign a smaller font size to the TablePress table as well, and you can center the data and move everything closer together. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-2 th,
.tablepress-id-2 td {
  font-size: 12px;
  text-align: center;
  padding: 3px;
}

    The columns will still be a bit wider, because – for example – the sorting arrow icons in the header row also need space.

    Regards,
    Tobias

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    Here is another page, where the plugin is working cool – https://www.fxforever.com/forex-signals/

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    in the “CLOSED POSITIONS” table on that link, the browser is simply able to add enough line breaks/word-wrapping to fit everything into the available space.

    Basically, this all depends on the amount of content that you put into the table, and especially on the individual length of the words and the size of the images.

    Regards,
    Tobias

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    Hello,

    Thanks for the clarification.

    I understand, but i also tried to put the hight and the width on the tag to make images a bit smaller, because the arrow also not looking good in bigger size, as you can see on this screenshot, on the ‘preview’ time it’s smalled but when i save the table and refreshing my website homepage to see it’s effect, the web shows the same image size like before.

    screenshot = http://prntscr.com/h5o5wm

    Thank you!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    basically, your theme’s CSS is overriding this, because you have specified a height/width in the HTML tag, but you also left the size-full CSS class. This takes priority so that the image is enlarged to fit into the cell.
    If you remove the size-full from the class attribute in the <img ... /> HTML tag, it should have the smaller size.

    Regards,
    Tobias

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    Hello,

    Thanks for your response,

    please also check this, i wish, the title should not be in 2 rows. It should be in the same line: http://prntscr.com/h5perr

    Also i wish to change the color of the table header from blue to black.

    Thank you!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    if you want to prevent line breaks in the title row, you can add this “Custom CSS”:

    .tablepress-id-2 th {
  white-space: nowrap;
}

    Of course, the table will get wider again then, unless you make the font size smaller.

    For the header row background color, please see https://tablepress.org/faq/change-background-color-table-head-row/

    Regards,
    Tobias

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    Hello,

    I added the CSS styles, you gave.

    .tablepress-id-2 th,
    .tablepress-id-2 td {
    font-size: 12px;
    text-align: center;
    padding: 3px;
    }

    But still the font size not changed.

    Also i added the

    .tablepress-id-2 th {
    white-space: nowrap;
    }

    but it didn’t work.

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    The header color is not changing too.

    This is what i added on the Custom CSS: http://prntscr.com/h5prze

    Thank you!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    you will probably have to clear the cache of the CSS minification that your site is doing via a plugin.

    Regards,
    Tobias

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    Hello,

    Hope you are fine today. CSS minify is already enabled on my WordPress site.

    Screenshot: https://prnt.sc/h6rpuk

    I also bold the Pair and Action column of my table and also it shows the correct preview but when i save the file and refresh the homepage, everything showing like before.

    Now what should i do?

    Thank you!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    what I want you to do is to turn off/disable the CSS minification 🙂 Or, clean its cache after adding TablePress CSS.

    This way, we can find out if the minification interferes.

    Regards,
    Tobias

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    Hello,

    Thank you for helping us a lot.

    All are working well as long as i keep the CSS minify disabled.
    The text is center-aligned but i also wish to make it middle-aligned too.
    Also i want to small the images a bit. if i reduce the size of the image via photoshop > ‘image size’, will it work without disabling the theme default css full-size class of img?

    Thank you!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    for these changes, please also add

    .tablepress tbody td {
    vertical-align: middle;
}
.tablepress-id-2 img {
    margin: 0 auto;
}
.tablepress-id-2 .column-5 img {
    width: 40px;
    margin: 0 auto;
}

    Regards,
    Tobias

    Thread Starter shoaib11027

    (@shoaib11027)

    8 years, 7 months ago

    Hello Mr. Tobias,

    You are really a great man i ever saw. Everything has been set up.

    May GOD Bless you always.

    Thank you very much for your time!

Viewing 15 replies - 1 through 15 (of 16 total)
1 2

The topic ‘Having some confusion’ is closed to new replies.