Plugin Author
Meitar
(@meitar)
It’s no mystery, your CSS is setting the header’s text color to white, same as your page background color. Change one, either the background color, or the header text color.
Thanks for the prompt response Meitar. I think you’re right about the text being white, but I’ve been through the CSS several times and cannot find any code that modifies the text color.
As a test, I copied the table manually and put it on the same page below the Google Sheet table. You can see the table header text is displaying properly, black (by default) and bold (by the CSS). If the CSS was changing the table header text from the Google Sheet to white, it should have also done it to the table header text from the manually created table, right?
http://www.rickmatsumoto.com/sandbox/
It makes me think there is another CSS specifically for the Google Sheet that is changing the table header text to white?
Plugin Author
Meitar
(@meitar)
You should apply any CSS changes you like to your theme.
I would, and I have, but it doesn’t have any effect. Also tried several different themes, no effect. In my example, I think I proved the theme isn’t touching the table header text anyway – when I create the table manually, the header displays fine. It’s only when the table is created by your plug-in that the text changes to white.
The page source shows that the table has its own class – class=”igsv-table”. That’s why I suspect there is another CSS that is overriding the CSS of my theme. Happy to be proven wrong, but you’ll need to point it out because it’s not clear to me.
Anyway, I know it’s annoying when people don’t take the time to research and read documentation, try to figure it out on their own. I’ve done this to the tune of 10 hours so far. I feel like there must something really simple I’m missing, just need a stronger hint than you’ve given me so far.
Plugin Author
Meitar
(@meitar)
I believe that you’ve read the documentation but what you’re missing is some basic knowledge about CSS, or possibly how to debug it. Have a look at these screenshots: http://imgur.com/a/O2TCx
All you need to do is right-click where the table header text should be, select “Inspect Element” from the contextual menu, then view the CSS rules being applied. Once you know what rules are causing your problem, you override the given rule in your theme’s style.css. This is intentionally left up to Themes so that the plugin works with the overwhelming majority of existing themes out of the box.
Thanks for the tip about “right-click inspect element.” I knew that once upon a time, but had obviously forgotten. Using a file manager on my site, I was able to trace the problem to a CSS that was installed by another plug-in. After fixing that, I ran into a problem with another plug-in that was storing the CSS in cache. After fixing that, I’m finally able to see the table header text!
It’s still a mystery to me why this was a problem only for the table created by your viewer and not for the table I created manually, but I’ve already invested too much time in this. Maybe I’ll come back to it out of curiosity, but right now I need to catch up on other work.
Thanks for your help. Happy to make a donation now.
