CSS for table title

Hi Daniela,

thanks for your question, and sorry for the trouble.

1. The table name is using a <h2> element by default and therefore uses the theme’s font for that already. Or am I missing something?

2. That description also uses the same font already…

3. You forgot to replace the N with the table’s ID here. Once you do that, the CSS code will be applied.

Regards,
Tobias

Hi Tobias,

Thanks so much for replying so quickly. You are not missing anything. I didn’t explain myself clearly. On both questions 1 and 2, what I meant is that I would like to be able to edit the font size and line height in the table (Title and table description) so it matches the changes I did in my page’s content. I ask because I made those changes directly on each page, and not in the main CSS.

I think the problem can be resolved by changing my templates CSS correct?

Again, thanks so much for your quick reply. I really like your plugin!

Cheers,
Daniela

Hi Daniela,

ok, thanks for the clarification. That should be possible with some CSS, but I’d actually like to discourage you from keeping those changes that you have made in the pages.
From what I can see, you are using (for example) <h5> HTML tags for the regular text in your pages. This is really bad for several reasons: <h5> tags specify “headings” in a text, and it’s vital for e.g. users with screen readers that those are used correctly. It’s also very important for search engines that the HTML mark up in your pages is used correctly. Additionally, it will be very hard to make global styling changes to your site with HTML like those on every piece of text.
I therefore suggest that you revert those text changes and try to get your desired styling (font size and line height) via CSS changes in your theme. Most likely, the table elements (title and description) will match that content styling automatically.

If you really want to keep using your current approach, please give me a detailed example of which styling (a quote of the text that currently has that styling) you want for the table title and description and I’ll try to find the necessary CSS code.

Regards,
Tobias

Hi Tobias,

You are totally correct. Your suggestion is the best option for this site so I will review the CSS to make sure that all styles are applied correctly throughout the entire website. This will make things a lot easier. I already changed the info for the table and it came out correctly!

One last thing I would like to make is to have my table use the same font that I have throughout the website, which is Roboto. Should I code the table css to this:

.tablepress .odd td {
background-color: #e9ebec;
font-family: Roboto, Tahoma;
font-size: 14px;
color: #666666;
}

.tablepress .even td {
background-color: #f2f3f4;
font-family: Roboto, Tahoma;
font-size: 14px;
color: #666666;
}

Again, thanks so much for your suggestion and your help.

Have a great evening!
Daniela

Hi Daniela,

good to hear that the CSS approach will work!

In order to change the table font and the text color, it should be enough to use

.tablepress thead th,
.tablepress tbody td {
  font-family: Roboto, Tahoma;
  font-size: 14px;
  color: #666666;
}

Regards,
Tobias

Hi Tobias,

I reached out to you about a month ago regarding some help with your plugin. I’ve made the changes you suggested but now I am having trouble loading the page that contains the table. I am not sure why, but whenever I try to open that specific page, it takes a very long time to load. I usually have to click on another page, and click again on that one to finally see the page.

Is the loading issue related to the content on that table? Is there a way that I can correct this so this uploads quickly?

The website is https://umdesc.danielavizcainodesign.com

When you go to that page, click on the tab called “Nuestros Productos” which is the page that contains the table.

I’d appreciate some feedback on how I can correct this, if you have any idea of what is happening.

Thanks so much!
Daniela

Hi Daniela,

I’m not exactly sure, but the reason for this seems to be how the theme works when a user clicks a link. Instead of triggering a full new page load, it seems to be starting an AJAX request to only load that part of the page that needs to be changed.
However, during that process, there seems to be a JavaScript error somehow.

I suggest that you try to disable this AJAX loading in the theme.

Regards,
Tobias