• Resolved Mark Stevens

    (@mark-stevens)


    I have gone through the forums and tried many of the css fixes for placing an image background into a table. No success, and I know I must be doing something wrong, so here is the info I think you will need.
    WordPress Ver. 3.4.1
    I have several table id’s in the CSS.
    The ones I wish to affect are these: .wp-table-reloaded-id-treatment-centers & .wp-table-reloaded-id-therapists

    There are 3 columns in each table.
    The image that I wish to have in the background of each row is: THIS

    This is the existing Custom CSS: Click Here for .txt file
    It’s quite messy, and any help cleaning it up/consolidating would be appreciated.

    Here is what this table looks like now: >> “Before

    This is what I wish it to look like “After

    Can I still have alternate rows be shaded on mouseover?
    Can I have alternate background image for odd/even rows?

    Help with this would be GREATLY appreciated…Thank You in advance.

    http://wordpress.org/extend/plugins/wp-table-reloaded/

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

    (@tobiasbg)

    Hi,

    thanks for your question, and the detailed description!

    I’m not yet sure if everything can be done like this, and what the best approach is, so here some questions from me:

    Do you have an actual image for the row background? (The link “THIS” in your post links to the image “After”.)? If so, we could use that, if not, we can try to get this look just with CSS.

    At the end, will there be exactly one table “Treatment Centers” and exactly one table “Therapists”, or will there be several such tables each? (I’m asking this to find out whether we actually need an “Extra CSS class” here.)

    The “Sorting” feature is not very helpful on this table. Therefore, the question is, whether we need the “Table head” row at all. This depends on the answers to these questions: Do you want the “Search” field (above the table)? And do you want to keep the pagination (only really useful, if each of your tables contains many, many rows and you want to be able to see a few at a time only).

    Regards,
    Tobias

    Thread Starter Mark Stevens

    (@mark-stevens)

    Thank you Tobias for your quick response as usual!

    Ooops, THIS should link here…sorry.
    Also, if I put the image in the “img” sub-folder in the wp-table-reloaded plugin folder, what would be the path to the image to use with background-image: url(tbl_bkg.png);

    The search function is not of great use yet so it can probably be removed, along with the Table Head row but maybe in the future when the tables get full it may be.
    Is there or could you create a way to make wp-table-reloaded able to search by other parameters such as gender, zipcode, ect..

    There are about 4 different table classes, so Yes the Extra CSS class is necessary in my opinion.

    Can I make the default number of rows shown to be 25 by default instead of 10?

    Thread Starter Mark Stevens

    (@mark-stevens)

    Also, there are already over 500 individual tables, so editing each one to remove the table head row would be too time consuming, I would rather leave it alone at that point.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for theses answers!

    About the image: You must NOT put that into the “wp-table-reloaded” folder (or any subfolder)! The reason is that it will be deleted during a plugin update (due to the way plugin updates work in WordPress). You may safely store it in “wp-contents” though. But the current location is also no problem at all.

    About the search function: No, it’s not possible to search for other parameters directly. That feature can only search through the entire row (unless you develop custom code for the search).

    And ok, for 500 tables, the “Extra CSS classes” definitely make sense! (I also now understand how these are organized (by State and County). Had missed that the first time.)

    For the default number of rows: You can change that number on the table’s “Edit” screen, in the “DataTables JavaScript features” section. Due to the high number of tables, this makes sense only for those tables that already have that many rows, I guess, for now.

    Now, about the row styling:
    It turns out that is more difficult than I had thought.
    I tried a few things, but always stumbled, as the background image was not applied to the row, but to each cell individually. This seems odd to me, but apparently browsers behave inconsistent here. I found http://jeffri.net/2012/09/background-image-on-table-row/ as a reference.
    That link shows a possible solution (which however doesn’t work in IE), but I doubt that it will be a good idea in the long run.
    Additionally, I’m not sure if the features like alternating row colors and row hover would work with this idea (of a background image) at all. Very likely they would result in weird looking styling and behavior.
    I’d therefore suggest that you pass on the background image, but just go with a background color.

    Regards,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: WP-Table Reloaded] Background Image in table’ is closed to new replies.