Hi,
zebra striping is available as a feature for tables from within the plugin already, on a table-by-table basis.
To get it to work nicely, I recommend this:
Turn of any zebra striping within your theme (i.e. the Atahualpa settings). Then just enable the feature within WP-Table Reloaded, on each table’s “Edit” screen.
It is important that the theme does not apply its CSS for striping to tables, so you will need to make sure that it is deactivated in the settings.
Regards,
Tobias
Thread Starter
c12281
(@c12281)
Hi Tobias –
Well, I did try turning off the Atahualpa zebra setting, however, it seems as though the Atahualpa “No Striping” command takes precedence; even when I enable the feature within WP-Table Reloaded for individual tables. Anything else I can try?
Thanks much.
Hi,
can you provide a link to the URL of your page with the table?
Thanks,
Tobias
Thread Starter
c12281
(@c12281)
Sure. The primary table is at http://muzzmarketing.com/services/overview. I usually have the zebra striping set to “on” in the theme because it makes the table much more legible, but I will turn it off for your review of the site. I’m still working on the site and am not officially live yet so it’s not a big deal! I really appreciate your your help. Sheryl
Hi,
it seems that you have unchecked the “Use Default CSS” checkbox on the “Plugin Options” screen, which loads the necessary CSS into the page to get the coloring for the alternating row colors.
Is there any reason for that? Can you enable the checkbox to see if the striping appears?
Regards,
Tobias
Thread Starter
c12281
(@c12281)
I just checked the “Use Default CSS” box and voila now I have zebra stripes for that one table. However, now I remember why I “unchecked” it. The text is extremely small and hard to read. Is there a way to change the size? Also, on my home page, I now have a white background behind my social media icons. I had written CSS code before to change the background color to match the column color, but that command seems to be ignored now.
Also, one other question for you. Please take a look at http://muzzmarketing.com/portfolio. I just added that table and would like to align the second column at the top. Is there a way to do that? I’ve tried a few different html codes (I’m no expert!), but can’t seem to get the right one.
Really appreciate your help!
Sheryl
Thread Starter
c12281
(@c12281)
I’m sorry. One other thing, Tobias. On http://www.muzzmarketing.com/promote, my social media icons are spread across the whole page. Can I change the column widths so they are closer together? This change happened after I checked the “Use Default CSS” box.
Hi,
ok, I figured that you had unchecked that box for a reason.
And I guess, due to all the things that now come up with the box checked, it is simpler to just fix it the other way around, by taking the striping code and adding it to the “Custom CSS”.
So, uncheck the “Default CSS” checkbox again and add this to the “Custom CSS”:
.wp-table-reloaded .even td {
background-color: #FFFFFF!important;
}
.wp-table-reloaded .odd td {
background-color: #F0F0F6!important;
}
For the alignment at the top, change your current Custom CSS to
.wp-table-reloaded-id-18 .row-1 .column-2 {
text-align: top;
}
That should do it.
Also, I noticed, that you are not using the latest version of WP-Table Reloaded. Is there are reason why you are not using 1.8?
Best wishes,
Tobias
Hi,
ah, never mind on my last sentence. You are using 1.8, of course. However, you seem to have manually updated the plugin, by simply replacing the files with the new ones, correct?
Please “deactivate” and then immediately “activate” the plugin again (necessary as a precaution that the update really works).
Best wishes,
Tobias
Thread Starter
c12281
(@c12281)
Ah – we’re getting there. Everything is back to normal and tables 13 and 14 are now striped. Curious — how come there was no need to add an ID# for that command? I would think that it would apply the setting to all of the tables. Would be good to know for future reference.
Also, I tried the text-align: top; command but the gallery is still vertically aligned in the center with the text. I’d like to keep it at the top so it’s the first thing you see when you get to the page.
Thanks again!
Sheryl
Hi,
yes, indeed, the striping will now work for all tables (that have the feature enabled). This is because of the usage of the .wp-table-reloaded selector, which is a CSS class that all tables will have. Additionally, each table has an ID based class (for customizations on only this table).
For the alignment: Sorry, my mistake, I actually meant (CSS is tricky… 🙂 )
.wp-table-reloaded-id-18 .row-1 .column-2 {
vertical-align: top;
}
To remove the remaining small margin at the top, add
.wp-table-reloaded-id-18 .row-1 .column-2 .ts_wrapper {
margin: 0px auto!important;
}
Best wishes,
Tobias
Thread Starter
c12281
(@c12281)
Thank you, thank you! All looks great now. I would be lost without your plug-in. You’ve been so great with your quick responses. I really appreciate it. I’m sure I’ll have more questions going forward, but I’m set for now.
Have a great night!
Sheryl
Thread Starter
c12281
(@c12281)
Hi Tobias –
I can’t get the vertical-align code to work for me. Please see http://muzzmarketing.com/portfolio. I am now trying to align the text in the first column at the top as opposed to middle and cannot get it to work. Can you help? I have tried many variations, with this one the latest, to no avail.
.wp-table-reloaded-id-18 .column-1 {
vertical-align: top;
}
Hi,
weird, that should be working…
.wp-table-reloaded-id-18 .column-1 {
vertical-align: top!important;
}
Can you try again with
Also, there’s an extra } in the line after the code for the .ts_fullsize in your Custom CSS, which you should remove.
Regards,
Tobias
Thread Starter
c12281
(@c12281)
Well, I tried again cutting and pasting your code above and still not working. Thanks for pointing out the extra }. I have removed it. Anything else I can try to align the text at the top? Thanks…
