WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Type adjustments/background color on table (27 posts)

  1. MargotP
    Member
    Posted 1 year ago #

    Hi I'm back!
    3 (hopefully little) things:
    a) Need to tighten up leading in right column (smaller vertical spacing bet. lines of type)
    b) Shift type down so it lines up with top of image (or vice versa)
    c) Make background of entire table white/colorless (I don't think it's a child style.css issue but I could be wrong).

    http://www.margottago.com/gingermop/digital/copernicus1/

    Went through your FAQs for the solutions. Pls forgive me if I overlooked anything :)

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    please to this as first steps:
    Uncheck the "Table Head Row", "Alternating Row Colors", and "Row Hover Highlighting" checkboxes.
    That should take care of (at least) c).

    Then also add this to the "Custom CSS"

    .tablepress-id-4 img {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }
    .tablepress-id-4 .column-3 {
        line-height: 1em;
        width: 200px;
    }

    That should take care of the positioning and line spacing.

    One more thins: Why are you using a three-column table where two columns are combined? Why don't you just use a two-column table?

    Regards,
    Tobias

  3. MargotP
    Member
    Posted 1 year ago #

    The reason is I'd like one column a lot wider than the other. Is there a better way of doing this?
    Best, MargotP

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, the best way for that is to set the columns widths manually, via CSS. My code above does this for the third column (which is actually the second).
    To see how this works, please see http://tablepress.org/faq/column-widths/
    Using a three-column table but combining two-columns does not actually increase their width, so that approach won't work.

    Regards,
    Tobias

  5. MargotP
    Member
    Posted 1 year ago #

    Aha! Thanks I'll check that out.
    Also, I made the type/image changes but still the tope of the characters in the Title: COPERNICUS FUNDS doesn't line up with the top of the image.
    Hovering over buttons still gives a grey outline, but I take that as a 2011 child theme style.css issue.

  6. MargotP
    Member
    Posted 1 year ago #

    Once I deleted the middle column the type lined up! Many many thanks!

  7. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    nope, you did not use the exact CSS code from my post above, which is why the text and image don't line up.
    Also, all instances of "N", "X", and "Y" in the CSS code that you added, need to be changed to their respective values ("N" to a table ID, "X" to a row number, and "Y" to a column number). (Or the "-id-N" part needs to be removed, if you want a setting to apply to all TablePress tables.)

    And the table has that grey background, as well as the darker grey hover, because you did not uncheck the "Alternating Row Colors", and "Row Hover Highlighting" checkboxes, as I suggested above.

    Regards,
    Tobias

  8. MargotP
    Member
    Posted 1 year ago #

    Oops, now they don't line up again :( Trying to figure it out.

  9. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ok, that's good already :-)
    Now you need to fix the white space around the images.
    To that, I recommend to change

    .tablepress-id-N img {
    	margin: 0;
    	padding: 0;
    }

    to

    .tablepress img {
    	margin: 0;
    	padding: 0;
    }

    (That will also slighly change the appearance of the images on http://www.margottago.com/gingermop/digital/ . If you don't want that, change the code to

    .tablepress-id-4 img {
    	margin: 0;
    	padding: 0;
    }

    That way, it will only apply to the table on http://www.margottago.com/gingermop/digital/copernicus1/

    Regards,
    Tobias

  10. MargotP
    Member
    Posted 1 year ago #

    OK, now I see what's happening. When I change the number for em on the font it shifts the first line down (nothing to to with padding, margins, etc.). In the interest of still having the text fall so the Image and the Cap Height of the Title line up across the top PLUS having the line height of the body copy the way I want it (around 1.5 em) is there anything I can do?
    MargotP

  11. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    to be honest, that description confused me a little bit. Sorry :-)
    So, you want a different font size and line height (which defines the vertical spacing between the text)?
    Then, I suggest that you change the font size and the line height to what you would like to have, and then we'll take care of the positioning again.

    Regards,
    Tobias

  12. MargotP
    Member
    Posted 1 year ago #

    That's ok, I was rambling. I think it needed to be this way all along, just refined the line height. I guess the one question would be how to add a little extra space between paragraphs within the cell (if the need were to arise).
    Again, many thanks, MargotP

  13. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    so, you have now set the desired font size and line height for the "COPERNICUS FUND This describes ..." text?
    And now you want the image to align with text at the top?

    If you now reduce the margin for the images from 5px to 2px, and remove the empty line above "COPERNICUS FUND This describes...", you should have it.

    Or am I still not understanding a few things?

    Regards,
    Tobias

  14. MargotP
    Member
    Posted 1 year ago #

    I'm really happy with how this looks! I think I'm close to resolving this.
    Is there a way to move the type a little more to the right? I tried padding and margins for column 2 and it didn't seem to work. Also, do I need to input these values for every table? Is there a more concise way of doing this (eg. .tablepress-id-4, 6, 7, 8) All but 2 tables on the entire site will be using these settings. And I will have LOTS of these tables.
    Again thanks for all of your help.

  15. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    to move the text more to the right, you'll indeed just have to add some padding again (you have one CSS command, that takes it away). Just change

    .tablepress-id-4 .column-2 {

    to

    .tablepress-id-4 .row-1 .column-2 {

    and the cell will have a 2px padding.

    About handling this for several tables at once: If really only two tables have a different style, you could make this CSS the default, by simply always using

    .tablepress

    in the selector, instead of

    .tablepress-id-123

    That way, you won't have to copy the CSS for each table.

    Just for the two tables that shall not have this styling, you'll basically have to reset the styling, with some "Custom CSS" targets just them (with their respective .tablepress-id-123 selector).

    Regards,
    Tobias

  16. MargotP
    Member
    Posted 1 year ago #

    That's a great idea! Just do the particular styling with the fewer group of tables! (haven't done it yet, but will further down the line).
    Also, the spacing for that second column is great!
    Now, what about have different font colors/weights/sizes WITHIN the cell? It turns out we have subtitles for some of the work, and I'm working on a type hierarchy. If not possible, should I just create more rows with the rowspan option?
    Again, many thanks. Margot P

  17. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    to have different font sizes/weights/sizes within a cell, you'll need to use HTML code in the cell.

    The best way would be to define certain CSS classes (for the different things), and then wrap the corresponding text in a HTML <span> element, that uses one of these classes. (For bold or italics, this is not necessary, as you can simply use the existing <strong> and <em> HTML tags.)
    An example could be:

    <span class="large-text">This text shall be larger than the rest</span>

    and the corresponding "Custom CSS"

    .tablepress .large-text {
      font-size: 24px;
    }

    Regards,
    Tobias

  18. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    after thinking about it again: If your formatting has a rather clear structure, where you can divide the text into several "blocks" with different formatting, which is the same in all of those tables, the option of combining rows could indeed be a possibility as well.
    You would then have to add #rowspan# to the cells below the cell with the image, so that you have several small cells next to the image.

    Regards,
    Tobias

  19. MargotP
    Member
    Posted 1 year ago #

    Yes, I went ahead with that option. Will do font adjustments in a bit but for the time being is there a way I can tighten up the space between rows 3-7?
    Best, MargotP

  20. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    you will just have to reduce the vertical padding. So, instead of using something like

    .tablepress .row-4 .column-2 {
      padding: 10px;
    }

    use

    .tablepress .row-4 .column-2 {
      padding: 2px 10px;
    }

    The 2px will be the vertical padding, while the 10px is the horizontal padding. If you just provide one value, it will be both the vertical and horizontal padding.

    This needs to be done with cells 3 through 7, accordingly.

    Regards,
    Tobias

  21. MargotP
    Member
    Posted 1 year ago #

    Thank you so much! I see the pattern and it's all coming together now!

  22. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem! :-) You are very welcome!

    Best wishes,
    Tobias

  23. MargotP
    Member
    Posted 1 year ago #

    Hey there I'm back.
    This question seems unrelated to the stuff above, so if you'd prefer that I start a new query, please let me know.
    I'm trying to put a .swf file in the 1st column on this table/page
    http://www.margottago.com/gingermop/digital/bnet/
    is it possible to interact with this .swf file directly in the table without opening a different window?
    As always, your help is much appreciated, MargotP

  24. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Margot,

    no, no need to open another thread now (for the future, yes, if it's unrelated to the rest of the thread, please open a new thread).

    This is actually not even a question that concerns tables directly, but more a question of how to integrate Flash files into a site. You have now added a link to the Flash file. Instead of offering it for download, most browsers (with Flash installed on the viewer's computer) will then load the Flash file in a new window. To embed it directly into the page, you will need some HTML code. Unfortunately, I haven't done this before, so I don't know the details. I just know that the <embed> and <object> HTML tags are likely necessary. Maybe that helps in finding a tutorial about embedding Flash content into a website?

    Regards,
    Tobias

  25. MargotP
    Member
    Posted 1 year ago #

    OK, I'll look into that. In the meantime, on another page, when I try to embed a VIMEO link into the table it doesn't work. When I embed it straight into the page it does work. Any ideas how to get around this problem? Is is related to the issue I had with the .swf file? I searched wp forums.
    Should I just embed the VIMEO straight into the page and put a table next to it so it would look like the other pages (HOPEFULLY?!?!?!??)
    I use your plugin because it is so clean and consistent and I really hope I can use it in this case. Otherwise, I'm pretty screwed.

    http://www.margottago.com/gingermop/broadcast/

    this is what I'm shooting for (although I'm sure it wasn't using wordpress!)
    http://www.sparkyideas.com/broadcast/ncaa/
    Again, many many thanks! MargotP

  26. MargotP
    Member
    Posted 1 year ago #

    ok, scratch that last request. vimeo provided code for me. (great site, btw)
    http://www.margottago.com/gingermop/broadcast/boradcast-tester/
    now it's just a question of getting right column closer, but I think I need to do that for that particular table in Frontend Options.
    Still working on embedding that pesky .swf file. plays on another page whether or not in page or in table, so definitely not something related to your plugin.
    Thanks again, MargotP

  27. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, inserting the video with just the URL is not possible right now, as the so-called "oEmbed" functionality for this is only active in the posts, by default. It is possible to make this work in tables, but actually you already found the better solution: Namely, add the full code from the Vimeo site to the table.

    To now get the right column closer, you'll indeed need some more "Custom CSS":

    .tablepress-id-25 .column-1{
      width:500px;
    }

    Oh, and that sparkyideas website that you linked to, is actually using WordPress! :-)

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic