[Plugin: WP-Table Reloaded] Fonts; colors; and codes

Hi,

thanks for your questions.

The color codes are pretty simple, I recommend this Wikipedia article, which explains everything: https://en.wikipedia.org/wiki/Web_colors#Hex_triplet

For styling certain words in certain ways, you will need to use some basic HTML in the cells, which is quite simple, so here’s an example:

This text will have <strong>bold text</strong>, <u>underlined text</u> and <em>italicized text</em>.

Just paste that into a table cell and see what it comes out to and you will understand how it works ??

Best wishes,
Tobias

Thank you for the great instructions. Very easy to use and follow.
I have 2 more ‘beginner’s questions.’

1) It appears that my font for the Table Name and Description are different from the font within the table itself. It looks odd when displayed on the website.
How do I change the font/font size/font color for the Table Name and (Table) Description?

2) Also, when I changed the background color I did it row-by-row within the Custom CSS box (see below). Is it possible to ‘choose’ several rows and edit them using only 1 command line in the CSS box? In other words, I want rows 3,4, and 5 to be the same color. Is there a way to do this other than editing row-by-row like I did below? I hope you understand the question.

.wp-table-reloaded-id-1 .row-3 td {
background-color: #50C878!important;
}

.wp-table-reloaded-id-1 .row-4 td {
background-color: #50C878!important;
}

.wp-table-reloaded-id-1 .row-5 td {
background-color: #50C878!important;
}

Thank you again for the help. I’m starting to ‘get it’ and hopefully won’t need much more help.
Andrew

Hi,

great to hear that you found that first answer helpful! ??

For your new questions:

1.) To change the font of the name and descrption, please try this “Custom CSS” (where you can change the font name to what you want):

.wp-table-reloaded-table-name,
.wp-table-reloaded-table-description {
  font-family: Verdana!important;
}

2.) Yes, grouping such CSS code can be done by simply grouping the “selector” parts of each piece of code. So, your example would become:

.wp-table-reloaded-id-1 .row-3 td,
.wp-table-reloaded-id-1 .row-4 td,
.wp-table-reloaded-id-1 .row-5 td {
  background-color: #50C878!important;
}

Best wishes,
Tobias

Everything was going super great until I added 2 more tables.
Now, when I add any Custom CSS into the text area in 1 table, the EXACT same custom CSS is getting added into the text areas of the other 2 tables – even though I’m specifically setting the table ID.
For example:
.wp-table-reloaded-id-1 .row-3,
.wp-table-reloaded-id-1 .row-7,
.wp-table-reloaded-id-1 .row-11 td{
font-size: 14px;
}
Is not only getting added to Table ID#1, it’s also getting added into the custom CSS text area of my other 2 tables (named ID#9 and #10 for some reason and not #2 and #3), but it doesn’t affect them because the Table ID is different.
However, if I delete the Custom CSS from the text area of those tables, then it deletes it from the original table, as well (where I need it).
I’m not crazy, it’s really doing this. I’ve tried several times. I’ve deleted almost all the Custom CSS to try and start over. I thought the Custom CSS in the Tables, if IDed properly, worked independently.
I’m sure it’s another ‘beginner’s mistake.’

2 Other things:
1) The font in my first table (text area/cells) is in bold, but not in the other 2 tables. I never added any custom CSS to make it bold.

2) How do I change the column width of only certain rows?

I’m sorry. I thought I was really getting to understand it.
Thanks again.
Andrew

Hi Andrew,

what you describe is totally correct ??
Reason: There is no “Custom CSS” field for each table. There is only one common “Custom CSS” field for ALL tables (therefore it is on the “Plugin Options” screen and not on the “Edit” screen).
So, just paste all of your CSS into that textarea, first the CSS for table 1, then the CSS for table 9, then table 10 and so on.
All “Custom CSS” goes into that one textfield.

And the IDs of your tables are 9 and 10 instead of 2 and 3, because at some point you already had tables 2 and 3 (and 4 through 8), but deleted them again. The number of a table gets automatically incremented and each ID can only be used once.

For your other questions:
1. Tbe font is bold because somehow there is a <strong> HTML tag around the Shortcode. If you edit the post with the Shortcode and switch to the “HTML editor” there (in the upper right corner of the editor textfield), you should see something like

<strong>[table id=9 /]</strong>

Just change that to

[table id=9 /]

and the font should be back to normal.

2.) I’m not really sure what you want to achieve here. There is no such thing as row width, you can only change the widths of column (see the FAQ on the plugin’s website for that).

Best wishes,
Tobias

Oh, wow:) I get it. Sorry, I thought the custom CSS (and text area box) was per table. I’ll work on it today and (hopefully:) have no more problems.

My 3rd question was:
Can I change the column width for only some rows?
For example: I want rows #15 – #20 to have a different column width from the rest of the table.

Thanks
Andrew

Hi,

thanks for the clarification on your third question.

Unfortunately, this is not possible, not because of WP-Table Reloaded, but because of how HTML tables work. Tables can only have constant widths for a column, so the width can not be changed for individual rows.
You could try to work around this and “fake” the rows with the “colspan” feature. This means to actually have more columns than you have and then combine them again. However, this is kind of ugly and not recommended.
The better solution would probably be to use more than one table and then use different column widths there.

Best wishes,
Tobias

Thanks,

I actually thought this would be the answer and it’s really no problem.
The Custom CSS worked out great now that I understand the ‘1 text area’ concept.
And, of course, some more minor questions:

1) How do I insert a link in the description box? It’s not the same process as inserting a link in the table, is it? I need something in the description box to link to another page on my website.

2) Where can I find a list of the other HTML codes that I might need. You gave me some of the codes (underline, bold, italics). But, I might want to ‘center’ something or have some ‘normal text’ within a bold area, ‘indent’ something etc. Is there a friendly, useable master list somewhere.
BTW, the Wikipedia article was great for the colors

Thanks
Andrew

Hi,

to insert a link into the “Description” box, you need to do a little trick: Just insert the link into a table cell first (e.g. using the “Insert Link” button) and copy the resulting content from that table cell to the description text field.

Unfortunately, I don’t have a really handy list of possible HTML codes, but you might again try Wikipedia (search for HTML) or google.
You might however notice, that there are not that many HTML codes for text styling available. This is, because HTML is more of a semantic language which simply designates certain content as such. The styling of elements is then done with CSS.

Regards,
Tobias

Thanks. The little trick worked great.

I’ll look for the HTML materials.
Related to your table, I was looking for 2 more codes for text styling:
1) How to center
2) How to have ‘normal font text’ within a section of longer text that I’ve already made ‘bold’ and/or ‘italicized’. An odd request, but I may want to use it for something.
Thanks
Andrew

-BTW, a small donation has just been sent to you ??

Hi,

to center the text in a cell, you could try the <center> HTML code, or use “Custom CSS” (add it on the “Plugin Options” screen), like this:

.wp-table-reloaded-id-3 .row-4 .column-5 {
  text-align: center!important;
}

(change the table ID and row and column accordingly).

For the normal font, just wrap the normal-font text in this HTML:

<span style="font-weight: normal!important;">normal text</span>

And thank you very much for your donation, I really appreciate it!

Best wishes,
Tobias

Thanks for the great help.
I think, and hope, that I’m ok for a while ??

Andrew